Filters

Usage

Overview

Filters from @prepared911/ui/blocks/filters is the search and applied-filter bar. useFilterState from the same module stores a FiltersValue when the page is not already holding one.

The block does not sort rows and does not filter them. Column header sort is DataTable. Matching rows is the page's job.

When to use

A list or table that needs search plus applied filter chips.
A page that reads value.search and value.appliedFilters and passes a narrower data array to DataTable.

When not to use

Sort by a column. Set enableSorting on the DataTable column.
A single choice with fewer than about eight options. Use Select or SegmentedControl directly.

Data Table / Accessibility

Filters / API and Development

On this page

Overview

When to use

When not to use

Filters

Usage

Overview

Filters from @prepared911/ui/blocks/filters is the search and applied-filter bar. useFilterState from the same module stores a FiltersValue when the page is not already holding one.

The block does not sort rows and does not filter them. Column header sort is DataTable. Matching rows is the page's job.

When to use

A list or table that needs search plus applied filter chips.
A page that reads value.search and value.appliedFilters and passes a narrower data array to DataTable.

When not to use

Sort by a column. Set enableSorting on the DataTable column.
A single choice with fewer than about eight options. Use Select or SegmentedControl directly.

Data Table / Accessibility

Filters / API and Development

On this page

Overview

When to use

When not to use