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-advancedOther Examples
Simplified Table
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Optional CSS classes to apply. |
columns* | ColumnDef<TData, TValue>[] | - | The column definitions for the table |
data* | TData[] | - | The data array to render in the table |
loading | boolean | false | Shows skeleton loading state when true |
noDataMessage | React.ReactNode | "No results." | Message to display when there are no rows |
onRowClick | (row: TData) => void | - | Callback when a row is clicked |
enableRowSelection | boolean | true | Enable row selection checkboxes |
onSelectionChange | (selectedRows: TData[]) => void | - | Callback when selection changes |
enableSearch | boolean | true | Enable built-in global search filter |
searchPlaceholder | string | "Search..." | Placeholder text for the search input |
searchValue | string | - | Controlled search value |
onSearchChange | (value: string) => void | - | Callback when search input changes |
searchColumn | string | - | Controlled search column |
onSearchColumnChange | (column: string) => void | - | Callback when search column changes |
searchHints | Record<string, string> | - | Dictionary of hints for specific columns |
enablePagination | boolean | true | Enable client-side pagination |
defaultPageSize | number | 5 | Default page size |
pageSizeOptions | number[] | [5, 10, 20] | Page size options shown in selector |
serverPagination | ServerPaginationProps | - | Server-side pagination options |
toolbarPrefix | React.ReactNode | - | Content shown before the column toggle in the toolbar |
toolbarSuffix | React.ReactNode | - | Content shown after the column toggle in the toolbar |
skeletonRows | number | 5 | Number of skeleton rows shown during loading |