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-48C00QFN-48Commercial400256EOL
AXM-330-256I01FCBGA-256Industrial597512ACTIVE
AXM-550-81A02WLCSP-81Automotive7941,024ACTIVE
RFX-91-48C03QFN-48Commercial9912,048ACTIVE
AXM-110-256I04FCBGA-256Industrial1,188256ACTIVE
AXM-330-81A05WLCSP-81Automotive485512ACTIVE
AXM-550-48C06QFN-48Commercial6821,024NRND
RFX-91-256I07FCBGA-256Industrial8792,048ACTIVE
AXM-110-81A08WLCSP-81Automotive1,076256ACTIVE
AXM-330-48C09QFN-48Commercial1,273512ACTIVE

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 "http://localhost:3000/registry/parametric-search.json"

Usage

Loading...

Props

PropTypeDefaultDescription
dataT[]—Full dataset
columnsAdvColumn<T>[]—Result-table columns
rowKey(row: T) => string—Stable row key
facetsFacet[]—{ key, title, options } checkbox groups
facetValue(row, facetKey) => string—Row's value for a facet
rangeFiltersRangeFilter[][]{ 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

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.