Advanced Data Table
A powerful, accessible data table component with multi-column sorting, faceted filters, global search, row selection, bulk actions, expandable sub-rows, and pagination.
Component Registry
Showing 1–5 of 12 records
1/3
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/advanced-data-table
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | [] | Array of data records to render in the table |
| columns | ColumnDef<T>[] | [] | Column configuration defining headers, accessors, sorting, filtering, and custom cell renderers |
| title | string | undefined | Optional table title displayed in the toolbar |
| searchPlaceholder | string | 'Search records...' | Placeholder text for the global search input |
| defaultPageSize | number | 10 | Initial number of records to show per page |
| renderSubComponent | (row: T) => ReactNode | undefined | Render prop function for expandable row sub-details |
| onBulkDelete | (selectedIds: string[]) => void | undefined | Callback fired when user executes bulk deletion |
| onBulkExport | (selectedIds: string[]) => void | undefined | Callback fired when user clicks bulk export |
| isLoading | boolean | false | Renders animated skeleton placeholders when true |
| error | string | null | null | Renders an error state banner when present |
| className | string | undefined | Custom Tailwind class names for styling overrides |