Loading navigation…
User
Usage
@prepared911/ui-filters is the package home for filter and list-organization chrome: the Filter bar (search, categories, quick filters, segmented control, column visibility) and SortControl (Simple / Multiple sort, optional group-by pairing). Import from @prepared911/ui-filters directly. @prepared911/ui-data-table may still re-export Filter temporarily under CORE-555 — prefer the package import for new work.
When Filter receives columnOrder, its column-visibility menu supports keyboard reordering with Shift+Space or Shift+Enter followed by the arrow keys. Each move emits ColumnOrderChange and immediately updates the menu order in uncontrolled mode.
SortControl + useSortedData / useGroupedData.DataTable — still use Filter from @prepared911/ui-filters.| Concern | Use |
|---|---|
| Toolbar / list sort by named criteria (A–Z, most recent) | SortControl + SortCriterion from @prepared911/ui-filters |
Column header sort inside a TanStack DataTable | DataTable column enableSorting / DataTableSortDirection from @prepared911/ui-data-table |
Do not re-export sort/group APIs from @prepared911/ui-data-table.
Single-select criterion menu. The selected criterion (when it has no fixedDirection) shows a decorative morphing ascending/descending icon flush left of the checkmark. Pointer-activate that trailing region to toggle direction; activate the rest of the row (or press Enter/Space) to select or clear that criterion. ArrowLeft/ArrowRight on the selected row also toggles direction. Assistive tech hears {criterion}, {direction} on the selected radio, plus a left/right-arrow hint. Re-activating the checked row clears sort (criterionId: "").
Direction toggle for a single criterion. Pass criterion (not criteria). Exposes a stable accessible name, aria-pressed for the current direction, and a localized direction tooltip.
When grouping is set, group-by and sort menus share a labelled ButtonGroup. Group rows are toggleable single-select checkboxes (bare trailing checkmark): activate a row to group, activate it again to clear (groupValue === null). There is no explicit None option.
Filter documents search, categories, and quick filters in depth under Data Table API for historical reasons. Treat this Filters block as the package home — import from @prepared911/ui-filters and see that page for the full Filter prop tables until they are migrated here.