FilterTable

A compact task table with status chips (All, To do, In progress, Completed) that filter the rows in place.

When to use

• Show a short list of agent or team tasks where status is the main thing people filter by.
• Use it inline in an assistant reply or a dashboard tile, where 4–8 rows fit without paging.
• Not for large, sortable or editable data sets — use SortableDataTable or RecordsTable. Not for a free-form filter builder — use FilterToolbar or FilterMenu.

Usage

import FilterTable from "@/components/iris/filter-table/filter-table";

h(FilterTable, {
  rows: [
    { task: "Write the first spec", date: "18 Sep", status: "todo", owner: "Katerina Vlachou" },
    { task: "Add login", date: "22 Sep", status: "progress", owner: "Katerina Vlachou" },
    { task: "Ship the changelog", date: "22 Sep", status: "done", owner: "Tomasz Wrona" },
  ],
  labels: { columns: { task: "Task name", date: "Date", status: "Status", owner: "Owner" } },
});

Props

Prop	Type	Default	Description
rows	{ task: string; date: string; status: "todo" | "progress" | "done"; owner: string }[]	5 notdocs tasks	Table rows. status drives the pill and the filter. task is the React key, so keep it unique.
labels	{ columns: { task: string; date: string; status: string; owner: string } }	Task name / Date / Status / Owner	Column headers. This is a whole object, not a partial: pass all four keys.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• The chip counts (5 / 2 / 2 / 1) and chip dot colours are hard-coded. Counts only match when you pass 2 to-do, 2 in-progress and 1 completed row.
• Filtering collapses hidden rows with a height-and-opacity transition, so the table never jumps.
• Chips are buttons with aria-pressed. The table is a focusable, horizontally scrollable region (a labelled <section>, min width 420px) and truncates long task names.
• Each status pill tints one base hue against --surface and --ink with color-mix (a richer fill in dark), and the grid lines use --grid-line. Also reads --surface, --field, --hover, --ink, --ink-2 and --ink-3.