Shadcn Data Table: React Tables Built on TanStack Table
The shadcn data table combines the headless TanStack Table engine with shadcn/ui styling to produce sortable, filterable react data tables that look native to your admin theme. Rather than a monolithic datagrid widget, you get column definitions, row models, and Tailwind CSS markup you own completely, which is why this approach has become the default for serious dashboard work.
The examples on this page are complete, copy-paste data table implementations rather than fragments. They cover expandable rows, vertical scrolling within a fixed height, draggable rows, draggable columns, and tables with inline action buttons, all written in TypeScript and ready for Next.js.
What you get
- Full table setup: Column definitions, the useReactTable hook, and styled markup wired together into a working example.
- Expandable rows: Rows that reveal a detail panel inline, ideal for order line items or nested records.
- Vertical scroll: A fixed height body with a sticky header so long datasets stay inside their card.
- Draggable rows and columns: Drag and drop reordering for both axes, for priority lists and user-customizable column layouts.
- Action buttons: Per-row edit and delete controls plus overflow menus for less common operations.
Implementation tips
- Define columns outside render: Declare the column array in module scope or memoize it, otherwise the table re-initializes on every render.
- Choose your row models: Only import the row models you use, such as sorting or filtering, since each one adds bundle weight.
- Go server-side past a few thousand rows: Switch to manual pagination and sorting with server queries when datasets grow, keeping the same column definitions.
- Use stable row ids: Provide getRowId from your data keys so selection and expansion survive refetches and reordering.
- Keep cells lightweight: Heavy cell renderers multiply across every visible row, so memoize expensive cells or defer detail to the expanded panel.
Where it fits in a dashboard
The data table is usually the centerpiece of an admin screen. User management, order lists, product catalogs, audit logs, and billing histories all reduce to the same shape: a filterable, sortable table with row-level actions. Getting this component right pays off across the entire application.
The variants here map to specific dashboard needs. Expandable rows suit orders with line items, vertical scroll suits activity feeds inside a fixed layout, and draggable rows fit anything with manual ordering such as pipeline stages or featured content.
Related components and patterns
For static or lightly interactive data, the plain Table component skips the TanStack layer entirely. Around the table itself you will typically add Pagination controls, a Checkbox column for bulk selection, an Input for global filtering, and a Dropdown Menu for row actions.
Complete table screens with toolbars, faceted filters, and bulk action bars are available as full pages inside the Next.js dashboard templates.
Library support
Under the hood every example uses TanStack Table, the headless successor to React Table, which handles sorting, filtering, pagination, selection, and expansion as pure state with zero rendered markup. The shadcn/ui data table guide describes the same architecture these variants follow: TanStack Table for behavior, shadcn table primitives for presentation. Because the engine is headless, none of this depends on Radix UI or Base UI, and the examples work alongside either.