Shadcn UI Data Table Block
DataTable28 is a left-aligned section featuring a heading, descriptive text, and a virtualized data table with spreadsheet-like cell selection. Users can click and drag to select multiple cells, use keyboard arrows to navigate, and copy selected data as CSV to the clipboard. The table includes sortable columns and pinned columns.
Light background with dark text. The table has a thin border with rounded corners. Selected cells have a highlighted background with a selection border. The active cell shows a distinct focus ring. Keyboard navigation moves the active cell with arrow keys. Shift+click extends the selection range. Toast notifications confirm clipboard copy actions. Static layout with smooth virtual scroll and selection interactions.
This is a data table designed for spreadsheet-like data manipulation. The multi-cell selection with CSV copy enables quick data extraction and analysis. The most distinctive feature is the cell-level selection and keyboard navigation, making it ideal for data analysis workflows where users need to select and export specific data ranges.
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 |