React Parametric Search
The pattern every engineer knows from part distributors, as one composable block: a faceted sidebar (checkbox groups whose counts update live — each facet's counts exclude its own selections, the distributor convention, so a count always tells you what selecting it would yield), numeric range filters, applied-filter chips with one-click removal, and the Advanced Table underneath with sorting, search, paging, and CSV export of exactly the filtered selection.
| AXM-110-48C00 | QFN-48 | Commercial | 400 | 256 | EOL |
| AXM-330-256I01 | FCBGA-256 | Industrial | 597 | 512 | ACTIVE |
| AXM-550-81A02 | WLCSP-81 | Automotive | 794 | 1,024 | ACTIVE |
| RFX-91-48C03 | QFN-48 | Commercial | 991 | 2,048 | ACTIVE |
| AXM-110-256I04 | FCBGA-256 | Industrial | 1,188 | 256 | ACTIVE |
| AXM-330-81A05 | WLCSP-81 | Automotive | 485 | 512 | ACTIVE |
| AXM-550-48C06 | QFN-48 | Commercial | 682 | 1,024 | NRND |
| RFX-91-256I07 | FCBGA-256 | Industrial | 879 | 2,048 | ACTIVE |
| AXM-110-81A08 | WLCSP-81 | Automotive | 1,076 | 256 | ACTIVE |
| AXM-330-48C09 | QFN-48 | Commercial | 1,273 | 512 | ACTIVE |
Check facets (counts update live), set fmax ≥ 1000, then export the selection as CSV.
Installation
Depends on advanced-table (and its pagination + empty-state).
npx shadcn@latest add parametric-search.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Full dataset |
| columns | AdvColumn<T>[] | — | Result-table columns |
| rowKey | (row: T) => string | — | Stable row key |
| facets | Facet[] | — | { key, title, options } checkbox groups |
| facetValue | (row, facetKey) => string | — | Row's value for a facet |
| rangeFilters | RangeFilter[] | [] | { key, label, unit? } numeric ranges |
| rangeValue | (row, rangeKey) => number | — | Row's numeric value for a range |
| — | — | — | Enables the table's text search |
| — | — | — | CSV export of the filtered selection |