shadcn-data-tables

TanStack Table handles client-side and server-side interactions like sorting, filtering, and pagination through its state management, while shadcn/ui provides the styled table primitives for rendering. Defining ColumnDef structures allows the DataTable component to process data and display responsive layouts with row selection.

You can add expandable rows and row selection to a TanStack Table by configuring the corresponding features in your column definitions and DataTable component. This Skill supports these optional features alongside sorting and filtering, enabling complex data interactions within responsive layouts.

The best way to style TanStack Table columns is by rendering them through shadcn/ui table primitives within a dedicated DataTable component. This method prevents design drift and ensures your data table maintains consistent, polished styling across various dashboard and admin panel use cases.

For client-side data handling, TanStack Table manages state internally based on your ColumnDef and data inputs, while shadcn/ui handles the visual rendering. You define the columns and data, and the DataTable component composition manages interactions like filtering and sorting without extensive boilerplate.