Shadcn UI Data Table Block
DataTable32 is a left-aligned section featuring a heading, descriptive text, and a virtualized data table with advanced multi-column sorting. A popover control allows users to add, remove, and reorder sort rules with drag-and-drop priority management. The table includes row selection and pinned columns.
Light background with dark text. The table has a thin border with rounded corners. The sort control popover displays active sorts as a list with column name, direction toggle, and remove button. Users can drag sort items to change priority order. Shift/Ctrl+click on headers appends to existing sorts. Sort priority numbers may display on sorted column headers. Static layout with smooth virtual scroll and popover interactions.
This is a data table designed for complex sorting requirements. The multi-sort popover enables stacking multiple sort rules with explicit priority control. The most distinctive feature is the sort rule management interface, making it ideal for analytics dashboards, reporting tools, or any application where users need sophisticated data ordering.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| @tanstack/react-virtual | NPM |
| lucide-react | NPM |
| react | NPM |
| sonner | NPM |
| zod | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
checkbox @shadcn | Registry |
dropdown-menu @shadcn | Registry |
popover @shadcn | Registry |
select @shadcn | Registry |
table @shadcn | Registry |