React Advanced Table
Everything the basic Data Table doesn't do: click-to-sort columns (asc → desc → off), global search, row selection with an indeterminate header checkbox, optional sticky header, one-click CSV export of the filtered+sorted result, and built-in Pagination. Composes the house Empty State when a search matches nothing. Fully generic over your row type.
| AXM-330-48C00 | AXM-330 | QFN-48 | Commercial | 400 | 0 | EOL | |
| AXM-110-256I01 | AXM-110 | FCBGA-256 | Industrial | 537 | 419 | ACTIVE | |
| RFX-91-81A02 | RFX-91 | WLCSP-81 | Automotive | 674 | 838 | ACTIVE | |
| PMU-12C-676C03 | PMU-12C | FCBGA-676 | Commercial | 811 | 1,257 | ACTIVE | |
| AXM-330-48I04 | AXM-330 | QFN-48 | Industrial | 948 | 1,676 | ACTIVE | |
| AXM-110-256A05 | AXM-110 | FCBGA-256 | Automotive | 1,085 | 2,095 | NRND | |
| RFX-91-81C06 | RFX-91 | WLCSP-81 | Commercial | 1,222 | 2,514 | ACTIVE | |
| PMU-12C-676I07 | PMU-12C | FCBGA-676 | Industrial | 459 | 2,933 | ACTIVE | |
| AXM-330-48A08 | AXM-330 | QFN-48 | Automotive | 596 | 3,352 | ACTIVE | |
| AXM-110-256C09 | AXM-110 | FCBGA-256 | Commercial | 733 | 3,771 | ACTIVE |
Sort any column, search bga, select rows, export CSV.
Installation
Depends on pagination and empty-state (installed automatically by the CLI when referenced, or copy them too).
npx shadcn@latest add advanced-table.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | — | Row objects |
| columns | AdvColumn<T>[] | — | { key, header, cell, sortValue?, align?, mono?, width?, exportValue? } |
| rowKey | (row: T) => string | — | Stable key; also the selection id |
| searchText | (row: T) => string | — | Enables the global search box |
| selectable | boolean | false | Checkbox column + header select-all |
| onSelectionChange | (keys: string[]) => void | — | Selected row keys |
| pageSize | number | 10 | Initial rows per page |
| exportFileName | — | — | Enables the CSV button |
| — | — | — | Body height; makes the header sticky |