Component
DataTableFacetedFilter
A menu of checkboxes that filters a column to the chosen values, with counts.
import { DataTableFacetedFilter } from '@loidolt/theme-svelte';
Example
| Stock | Status | Layers | |
|---|---|---|---|
| Bracket 1 | Birch ply | Ready | 1 |
| Coaster 1 | Mount board | In review | 8 |
| Sign 1 | Cork | Ready | 4 |
| Enclosure 1 | Acrylic | Blocked | 11 |
| Panel 1 | Birch ply | Ready | 7 |
1–5 of 42
Notes
- Counts come from rows passing every other filter, so each choice shows what picking it would add.
- Choices default to the column's
filterOptions, else the distinct values in the data.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
column required | string | — | The column to filter. |
table required | DataTableState<T> | — | |
class | string | — | |
clearLabel | string | 'Clear filter' | |
options | Option[] | — | Choices. Defaults to the column's filterOptions, else the values present in the data. |
selectedText | (count: number) => string | (count) => `${count} selected` | How the trigger reports a selection, e.g. "Stock, 2 selected". |
showCounts | boolean | true | Show how many rows hold each value. |
title | string | — | Trigger text and menu heading. Defaults to the column header. |