Data Table

When to use

Use for tabular data that needs sorting, filtering, pagination, or row selection. Define columns once, feed data — TanStack handles the row model. Add more features incrementally (getSortedRowModel, getFilteredRowModel, getPaginationRowModel).

When not to use

Don't use for static/simple tables (use Table primitives directly). Don't use for virtualized very-large lists (use TanStack Virtual). Don't use for grid layouts (use CSS grid). DataTable is a Client Component (uses useReactTable hook) — fetch data in a Server Component and pass it as props.

Common mistakes

• Forgetting getCoreRowModel() (table renders nothing)
• Recreating columns array on every render (breaks memoization — wrap in useMemo or define outside the component)
• Using accessorKey with nested paths without accessorFn
• Not adding filter/sort row models when those features are needed

Accessibility

Uses semantic <table> via Hex UI Table primitives. Add aria-sort to sortable column headers. Announce filter/sort changes via aria-live for dynamic updates.

Related components

• table
• pagination