Filtering

The @eds/filtering package contains useful components to easily implement the Filtering pattern in your application. Alongside the documentation on this page, refer to the pattern for more guidelines and composition examples.

The <FilterBar /> component is used to create a consistent layout of the filter controls, that automatically adheres to the Filtering pattern. It provides spacing, positioning and responsive stacking, as well as props to show/hide fixed elements.

• Use the loading prop to display a loading spinner when filter results are being fetched.
• Pass any quick filter controls, such as SelectDropdown or Toggle via children. Max 3 as per pattern.
• If advanced filtering is needed, pass an AllFiltersButton via children as the first element.
• Use the clearable prop to display a "Clear" button when any advanced/quick filters are applied, and the onClear prop to pass a function that clears all the filters.

NOTE: The following code examples are not fully interactive. Refer to Filtering pattern examples for more realistic implementations, fully interactive with state handling and async data fetching.

Show codeCopy code

When implementing the keyword filter only pattern, the positioning automatically changes to adhere to guidelines.

• Since the keyword filter has its own onClear functionality, the filter bar's clearable and onClear props are redundant for this variant.
• Use the width prop to adjust the width of the keyword filter if needed.

Show codeCopy code

The <AllFiltersButton /> component is a button made specifically for opening a modal containing all available filters in a view. See an example of "All filters" modal on Filtering pattern examples.

Use the numberFiltersApplied prop to pass the number of applied filters. It defaults to 0 and displays in a NumberBadge. The number is capped at 99, so if 100 or more is passed it will say 99+.

Show codeCopy code