Filter table
Status filter pills over a compact table. The active filter lives in a keyed atom (filterTableFilterAtom) so an app can set it by table id.
Preview
Use the controls to explore the component's props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
statuses (required) | { id, label, tone }[] | — | Filter pills and status dot colours. |
columns (required) | { key, header, className? }[] | — | Table columns; the status column renders a dot. |
rows (required) | { id, status, … }[] | — | Rows; filtered by status. |
filter / onFilterChange | string | null | — | Controlled filter; null is All. |
Example
| Task name | Date | Status | Advisor |
|---|---|---|---|
| Restock mango sorbet | Dec 03 | To do | Mango Moon |
| Churn black sesame | Sep 22 | In progress | Kumo Creamery |
| Print summer menu | Jan 02 | To do | Coral Coast |
| Taste-test batch 42 | Nov 08 | In progress | Maple Orbit |
| Order waffle cones | Apr 14 | Completed | Aurora Scoops |
import { FilterTable } from "@exegia/corpora-ui"
<FilterTable statuses={statuses} columns={columns} rows={rows} />Last updated on
Code block
Code card with filename, Code | Diff toggle and Copy; gutter line numbers and keyword / string tinting from the --code-* tokens. No highlighter dependency.
Records table
Selectable records with an initial avatar, tags with +N overflow, relative date and connection strength. Selection lives in recordsTableSelectionAtom(id); sorting is a callback only.