useTableFiltering@astryxdesign/core v0.5.2 · useTableFiltering

Usage

Table plugin that adds inline column filters with popover or inline controls. Pairs with useTableFilterState for managed state. Supports text, select, multi-select, date, and number filter types via PowerSearch field definitions.

ts
import {useTableFiltering} from '@astryxdesign/core/Table'

Parameters

ParamTypeDescription
filtersrequired

Current filter state: map from column key to filter value.

onFilterChangerequired
(columnKey: string, value:
| null) => void

Called when the user changes a filter value. null clears the filter.

variant
'popover' | 'inline' | 'inline-compact' (default: 'popover')

Display variant for filter controls.

Examples

Common configurations, variations, and states.
Table — Inline Filters
Open in Playground

Table with inline filter controls rendered directly below each column header.

Table — Popover Filters
Open in Playground

Table with popover filter controls triggered by icons in column headers.

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.

This install URL expires with the draft preview.
bash
npx shadcn@latest add https://astryx-4p843mspp-fbopensource.vercel.app/r/hooks/use-table-filtering.json
Install the editable showcase composition
bash
npx shadcn@latest add https://astryx-4p843mspp-fbopensource.vercel.app/r/examples/table/popover-filters.json