What it does
DataTable handles common product-table workflows without forcing consumers to manually wire filtering, sorting, selection, pagination, visibility controls, loading states, or empty states.
It preserves semantic table markup through the lower-level Table primitive.
Composition and API
Define typed columns with accessors, optional custom cell renderers, sort values, filter values, and visibility behavior.
Use getRowId for stable row selection and bulk actions.
Common use cases
- User management screens with bulk invite or archive actions.
- Billing histories with sortable amounts and searchable customers.
- Operations dashboards with optional columns per team role.
- Paginated reports that need empty and loading states by default.
Accessibility
Sortable headers use the same keyboard and aria-sort behavior as Table. Selection controls are labeled per row and the toolbar reports selected counts in a polite live region.
Next.js integration notes
Use DataTable inside a client component when users interact with sorting, filtering, column visibility, selection, or pagination. Server components can still prepare the data and column definitions they pass down.
FAQ
Does DataTable replace the Table primitive?
No. DataTable is the composed, batteries-included layer. Use Table when you want full markup control and DataTable when you want typed columns plus common data interactions.
Can I control DataTable state from my app?
Yes. Sorting, search, pagination, selected row ids, and visible column ids expose controlled and uncontrolled APIs.
Does DataTable support bulk actions?
Yes. Enable row selection and pass bulkActions. Each action receives the selected row objects.