DataTable
An advanced data table component with sorting, filtering, pagination, row selection, drag-and-drop, and bulk actions. Built on TanStack Table with comprehensive features for data management.
Installation
Import
Usage
Use DataTable for displaying and managing tabular data. It provides sorting, filtering, pagination, row selection, drag-and-drop, and bulk actions. Configure columns using columnsConfig: for data columns, provide accessorKey and header (no type needed); for control columns, use type: 'select', 'drag', or 'actions'. Add filters for faceted filtering. Use bulkActions for operations on selected rows. Enable drag-and-drop by adding a column with type: 'drag'. The component is built on TanStack Table for performance and flexibility.
Design Guidelines
Use appropriate column types for your data. Enable sorting for sortable columns. Provide clear column headers. Use filters to help users find data. Group related actions together. Use bulk actions for common operations. Consider pagination for large datasets. Use drag-and-drop sparingly and provide clear visual feedback.
Basic Usage
Simple data table with columns and data
With Sorting
Data table with sortable columns
With Filters
Data table with filtering capabilities
With Row Selection
Data table with selectable rows and bulk actions
With Row Actions
Data table with action buttons per row
With Pagination
Data table with pagination for large datasets
With Drag and Drop
Data table with drag-and-drop row reordering
With Custom Cell Rendering
Data table with custom cell renderers, column widths, and alignment
Disable Pagination
Data table with pagination disabled for server-side pagination
Column Alignment
Data table with column alignment (left, center, right)
Task Management
Complete task management table with all features
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
columnsConfig | ColumnConfig<TData, TValue>[] | — | Array of column configurations defining the table structure. For data columns, provide accessorKey and header. For control columns, use type: "select", "drag", or "actions". |
data | TData[] | — | Array of data objects to display. Each object must have an id property. |
filters | DataTableToolbarProps<TData, TValue>["filters"] | — | Filter configuration including global search, faceted filters (dropdown, boolean, range) |
bulkActions | (table: TanstackTable<TData>) => ItemOption[] | — | Function that returns bulk action options based on selected rows |
disablePagination | boolean | false | Whether to disable pagination (useful for server-side pagination) |
filterPlaceholder | string | — | Placeholder text for the global search filter |
hideToolbar | boolean | false | Whether to hide the toolbar with filters and bulk actions |
className | string | — | Additional CSS classes to apply to the component |
Accessibility
Accessibility features and considerations
DataTable includes proper ARIA attributes for table structure. Sortable columns are keyboard accessible. Row selection works with keyboard navigation. Filters are accessible. Error states are properly announced.