Filter

This component is implemented using Select, MultiSelect, TreeSelect and TreeMultiSelect components. Please refer to them for further implementation details.

Example

There are different ways that the Filter pattern can be used in the project level, such as in the following examples.

Filter bar

A filter bar can be used when the filters are frequently used to filter the content below it.

Table header

Filters in table header can be applied at a per-column level and enable faster filtering.

Drawer

The side drawer can be expanded for advanced filter selection.

Advanced filters

Advanced filters can take many forms, you can pick the level of granularity the filters can afford. The combination of identifier + relative + value becomes a condition for the results to meet.

Data-fetching patterns

Filters can be applied to fetch data in the following ways.

Live-filtering

Results are fetched instantly when selection is made. This is similar to how select, multi-select dropdowns work.

Per-filtering

Filters are applied one at a time. Within a multi-select dropdown, options can be searched, scrolled and chosen without automatically updating the results. Updated results can be triggered by clicking the inline ‘Apply’ button.

Icon button can be used to trigger the multi-select dropdown for similar behavior. By default, the filter icon is used, but this can be customised using the children prop and customisation of other props can be done just like IconButtonProps.

Batch-filtering

Results are fetched when the various filters have been inputted and ‘Apply’ has been clicked. This is similar to how filter drawers work.

Accessibility

Navigation is similar to Select and MultiSelect components, use Arrow Down, Arrow Up, Escape, Enter and Tabs to open/close the popup and to navigate within the popup itself.

API

FilterButton