Shadcn UI Data Table Block
DataTable27 is a left-aligned section featuring a heading, descriptive text, and a virtualized data table for handling large datasets. Only visible rows are rendered to the DOM, enabling smooth scrolling through thousands of records. The table includes sortable columns, row selection, pinned columns, and row action dropdown menus.
Light background with dark text. The table has a thin border with rounded corners. The virtualization creates a fixed-height scrollable area where rows render dynamically based on scroll position. Pinned columns remain visible during horizontal scrolling. Status values display as badges with icons. Each row has a three-dot menu for actions like edit, view, and copy. Static layout with smooth virtual scroll performance.
This is a data table optimized for performance with large datasets. The row virtualization ensures only visible rows are rendered, dramatically improving performance. The most distinctive feature is the virtual scrolling, making it suitable for datasets with hundreds or thousands of rows where traditional rendering would cause lag.
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 |
table @shadcn | Registry |