Components / Blocks / FilterableDataTable
Filterable
FreeBlockA typed table workflow with local search, a semantic filter, loading, empty, and error states.
Demo dataResponsive
3 of 3 records
| Name | Owner | Status | Updated |
|---|---|---|---|
| Project Apollo | Sarah Chen | active | May 12 |
| Project Zephyr | James Park | Needs review | May 11 |
| Project Orion | Maya Patel | archived | May 10 |
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/filterable-data-table.jsonThe shadcn CLI writes the source into your project. Files added:
- components/blocks/filterable-data-table.tsxblock
- components/ui/button.tsxui
- components/ui/input.tsxui
- components/ui/native-select.tsxui
- components/ui/skeleton.tsxui
- components/ui/table.tsxui
- components/elements/empty-state.tsxcomponent
- lib/utils.tslib
Dependencies@base-ui/reactclass-variance-authorityclsxlucide-reacttailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| columns (required) | readonly FilterableDataTableColumn<T>[] | — | |
| emptyDescription | ReactNode | 'Try a different search or clear the active filters.' | |
| emptyTitle | ReactNode | 'No matching records' | |
| error | ReactNode | — | |
| filterLabel | string | 'Status' | |
| filterOptions | readonly FilterableDataTableOption[] | [] | |
| getFilterValue | (row: T) => string | — | |
| getRowId (required) | (row: T, index: number) => string | — | |
| getSearchText (required) | (row: T) => string | — | |
| isLoading | boolean | false | |
| rows (required) | readonly T[] | — | |
| searchPlaceholder | string | 'Search records' |
FilterableDataTableColumn
| Prop | Type | Default | Description |
|---|---|---|---|
| align | 'left' | 'right' | — | |
| header (required) | ReactNode | — | |
| id (required) | string | — | |
| render (required) | (row: T) => ReactNode | — |
FilterableDataTableOption
| Prop | Type | Default | Description |
|---|---|---|---|
| label (required) | string | — | |
| value (required) | string | — |
Accessibility
- Search and filter inputs have screen-reader labels.
- The result count is announced politely as filters change.
- The clear-filters button is disabled until a filter is active.