Filter bar

Renders a filter bar to filter the current view model data source.

Node name : filter-bar

Attributes

Attribute	Type	Required	Default value	Description
display-mode	`string` (`inputs`, `editable-chips`)	`false`	`inputs`	Display mode.
size	`string` (`extrasmall`, `small`, `medium`, `large`, `extralarge`)	`false`		Chip size. In the current implementation, this only affects the `editable-chips` display mode.
quick-search	`bool`	`false`	`true`	Display the `quick-search` component. This only applies to the `inputs` display mode.
chips	`bool`	`false`	`true`	Displays the current filter as removable chips. This only applies to the `inputs` display mode.
advanced-mode	`bool`	`false`	`true`	Value indicating whether the advanced mode is available.
server-filter-chips	`string`, `string[]`	`false`		Displays additional chips representing the server-side filter. This gives more information to the user.

Examples

Default composition

<filter-bar />

By default, the filter bar is composed of 2 horizontal bars.

The first horizontal bar includes:

a button to toggle the filter-builder in a popover component.
the quick-search component (that can be disabled by setting the quick-search attribute to false).
an input for each "filter visible" property.

The second horizontal bar includes the filter-chips component (that can be disabled by setting the chips attribute to false).

Editable chips

Since version 2.2, there's a new editable-chips display mode, for a lighter filter bar made up of editable chips.

<filter-bar display-mode="editable-chips" />

With this display mode, the quick-search and filter-chips components are not included. The quick-search and chips attributes are ignored. However, you can still display the quick-search independently by using the quick-search component directly.

The default display mode can be set globally via the FilterBarDisplayMode behavior option.

Editable chips size

Use the size attribute to change the size of the filter chips rendered by the editable-chips display mode.

<filter-bar display-mode="editable-chips" size="large" />

Accepted values are extrasmall, small, medium, large, and extralarge.

Important

In the current implementation, size only affects chips rendered by the editable-chips display mode. The inputs display mode and server-filter-chips keep their standard sizing.

Filter chips can also use a custom icon when the underlying filterable property or entity view parameter defines FilterIcon. See Filter and Use entity view parameters.

In editable-chips mode, a filterable date entity view parameter can also edit a full date range in a single chip when it links another date parameter through FilterValue2Parameter. The chip then uses the between operator and updates both parameter values together. See Use entity view parameters.

Table of Contents