Filtering

Filtering compositions can vary depending on user need and data complexity. The examples below aim to illustrate what components can be used, and how they interact together when filtered data is being fetched. The data fetching is mocked with a debounced Promise for demo purposes, and would be replaced with an API call in a real application.

See comments in the code examples for more information.

The following example shows how to compose a filtering experience with 2 quick filters and a keyword filter.

Refer to the Quick filter guidelines for more information.

Show codeCopy code

The following example shows how to compose an advanced filtering experience with 1 quick filter, an "All filters" modal, and a keyword filter.

For advanced filters, it's recommended to keep all the applied filter values in one state object, and the filter values in the All filters modal in a separate "temporary" state. This enables you to sync the two states easily when toggling the modal, but also when applying filters from the modal.

Refer to the Advanced filter guidelines for more information.

Show codeCopy code

By quickly narrowing down the displayed data based on user input, a keyword filter provides an efficient way to retrieve targeted information from large datasets.

• Usually this would be an async call to an API, so some debouncing should also be implemented to protect the server.
• Place the keyword filter at the start of the filter bar when no other filter controls are needed.

Refer to the Keyword filter guidelines for more information.

Show codeCopy code