Advanced Data Table
A highly interactive data table with sorting, filtering, row selection, pagination, and bulk actions.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/data-table-advancedProps
| Prop | Type | Default | Description |
|---|---|---|---|
columns* | ColumnDef<TData, TValue>[] | - | TanStack Table column definitions. Use getSelectionColumn() and SortableHeader from this file for the checkbox column and sortable headers. |
data* | TData[] | - | The rows to show. |
loading | boolean | false | Shows skeleton rows instead of data. |
skeletonRows | number | 5 | Number of skeleton rows shown while loading. |
noDataMessage | React.ReactNode | "No results." | Shown when there are no rows. |
onRowClick | (row: TData) => void | - | Called with the row's data when a row is clicked. |
enableRowSelection | boolean | true | Allows rows to be selected. Add getSelectionColumn() to columns to show the checkboxes. |
onSelectionChange | (selectedRows: TData[]) => void | - | Called with the selected rows' data whenever the selection changes. |
enableSearch | boolean | true | Shows the search box and column picker. |
searchPlaceholder | string | "Search..." | Placeholder of the search box while searching all columns. A specific column shows "Search <column>..." instead. |
searchValue | string | - | Controlled search text. When set, the table stops filtering itself so you can search on the server. |
onSearchChange | (value: string) => void | - | Called with the new search text. Use with searchValue. |
searchColumn | string | - | Controlled search column: "all" or a column id. |
onSearchColumnChange | (column: string) => void | - | Called when a different search column is picked. Use with searchColumn. |
searchHints | Record<string, string> | - | Example values per column id. Shown as tooltips in the column picker and in the placeholder once that column is picked. |
enablePagination | boolean | true | Client-side pagination with a page size selector. |
defaultPageSize | number | 5 | Initial number of rows per page. |
pageSizeOptions | number[] | [5, 10, 20] | Choices in the rows-per-page selector. |
serverPagination | ServerPaginationProps | - | Pass this instead of relying on enablePagination when the server pages the data. |
toolbarPrefix | React.ReactNode | - | Content before the column toggle in the toolbar, e.g. filters. |
toolbarSuffix | React.ReactNode | - | Content after the column toggle in the toolbar, e.g. action buttons. |