#Filter

#Demos

#Basic usage

Combines Filter.Date and Filter.Selection inside Filter.Panel, with search, toolbar tools, and resultCount for the number of matching transactions. Uses the list layout pattern.

#Custom filter type

Build your own filter using Filter.useFilterContext() and Filter.Item. This example shows a toggle filter alongside the built-in Filter.Selection.

#Async result count

When the result count comes from an API, use resultLoading to show a loading state while the request is in progress. Open the filter panel and change a filter to see the skeleton effect. This example uses debounce: 300 to delay the API call while the user is typing.

#Manual behavior

With behavior="manual", panel filter changes are buffered internally and not emitted until the user clicks "Apply filter". Search input is still emitted in real time. The panel shows an Apply button and a Cancel button that reverts unsaved changes.

#Predefined filters

Use defaultFilters to pre-select filters on mount. The panel and relevant filter accordions open automatically.

#URL sync with router hooks

Three hooks sync filter state with URL query parameters so users can share or bookmark filtered views. Back/forward navigation restores the previous filter state.

• Filter.useQueryLocator(id, options?) — Uses the History API directly. Works without any router dependency. Pass { excludeSearch: true } to exclude the search string from URL sync.
• Filter.useReactRouter(id, { useSearchParams, excludeSearch? }) — Uses React Router's useSearchParams.
• Filter.useNextRouter(id, { useRouter, usePathname, useSearchParams, excludeSearch? }) — Uses Next.js navigation hooks.

#With sort button

Use Filter.SortButton to add a sort dropdown to the toolbar. It renders a tertiary Dropdown with a sort icon and independent width. The sort state is managed outside the filter.

#Quick filters

Quick filters are toggle buttons placed directly below the toolbar, outside the panel. They let users apply common filters without opening the panel.

#Toolbar with actions only

A toolbar with only action buttons and no search field.

#Search only

A simple search field with a secondary search button.

#Multi-selection filter with grid layout

Use Filter.MultiSelection inside Filter.Panel to let users select one or more clients. This example uses a Grid layout to place the filter and results side by side.

#Decoupled hook

Filter.useFilter(id) can be called anywhere in the tree — the filter UI and data consumer can live in completely separate components.