Data Table
NEWA sortable, searchable data table with sticky headers, row selection and range selection, animated bulk actions, paging, responsive stacked cards, and ready-made sparkline and delta cells.
Top products
Sort any column, select rows, or search. On a phone it turns into cards.
24 rows
14-day trend
Floor LampLighting
$73,174
1,152
2.3%
12.8%
Linen ShirtApparel
$72,504
742
2.2%
5.2%
Bamboo ShelfFurniture
$67,176
733
4.0%
23.4%
Studio HeadphonesAudio
$66,463
939
4.3%
15.0%
Soy CandleHome
$66,377
895
4.2%
47.5%
Leather WalletAccessories
$64,015
1,968
6.2%
11.8%
Linen ThrowTextiles
$63,979
1,789
1.3%
20.3%
Camp BlanketTextiles
$63,418
696
6.2%
58.0%
Travel MugKitchen
$62,942
885
3.8%
14.5%
Noise SpeakerAudio
$58,428
645
5.0%
34.3%
Pocket NotebookStationery
$58,255
1,174
4.7%
43.7%
Desk MatStationery
$56,815
1,557
5.2%
4.3%
Showing 12 of 24
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/data-table
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | T[] | required | Rows to render. Each row must include a stable id |
| columns | DataTableColumn<T>[] | required | Column definitions with headers, accessors, custom cells, alignment, widths, and mobile behavior |
| getRowLabel | (row: T) => string | String(row.id) | Readable row name used by checkbox labels and screen readers |
| selectable | boolean | true | Enables row selection, select-all, and the bulk-action bar |
| searchable | boolean | true | Shows the search field that filters rows |
| searchPlaceholder | string | 'Search…' | Placeholder text for the search field |
| searchText | (row: T) => string | undefined | Extra text to match when searching beyond the column accessors |
| defaultSort | SortState | null | Initial sort used when the sort prop is not controlled |
| sort | SortState | undefined | Controlled sort state |
| onSortChange | (sort: SortState) => void | undefined | Callback fired whenever the sort changes |
| selected | Id[] | undefined | Controlled selection state |
| onSelectionChange | (ids: Id[]) => void | undefined | Callback fired whenever the selection changes |
| bulkActions | (selectedIds: Id[]) => ReactNode | undefined | Buttons rendered in the bar while rows are selected |
| toolbar | ReactNode | undefined | Extra controls rendered on the right side of the toolbar |
| pageSize | number | 20 | Rows shown initially and revealed per "Show more" click. Infinity shows all rows |
| maxHeight | number | 520 | Table scroll height in pixels before the header sticks |
| density | 'comfortable' | 'compact' | 'comfortable' | Row padding and minimum height |
| cardBreakpoint | number | 640 | Width below which rows render as stacked cards |
| onRowClick | (row: T) => void | undefined | Makes rows interactive and keyboard-activatable |
| emptyState | ReactNode | undefined | Custom content shown when no rows match |
| ariaLabel | string | 'Data table' | Accessible name for the table region |
| className | string | undefined | Custom Tailwind class names for the outer wrapper |