Shadcn UI Data Table Block
DataTable31 is a left-aligned section featuring a heading, descriptive text, and a virtualized data table with full CRUD operations. A sticky footer row allows adding new records without scrolling. Existing rows support inline editing and deletion. The table includes sortable columns, row selection, and pinned columns.
Light background with dark text. The table has a thin border with rounded corners. The sticky footer remains visible at the bottom with an “Add Row” button or inline input fields. Edit mode activates on cell interaction with inline inputs. Delete actions may show confirmation. Pinned columns maintain visibility during horizontal scroll. Static layout with smooth virtual scroll and edit transitions.
This is a data table designed for complete data management workflows. The add/edit/delete functionality provides a full CRUD interface without separate forms. The most distinctive feature is the sticky add-row footer, making it ideal for data entry applications, inventory management, or any system requiring frequent record creation and modification.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| @tanstack/react-virtual | NPM |
| lucide-react | NPM |
| react | NPM |
| sonner | NPM |
| zod | NPM |
button @shadcn | Registry |
checkbox @shadcn | Registry |
dropdown-menu @shadcn | Registry |
table @shadcn | Registry |