Shadcn UI Data Table Block
DataTable26 is a left-aligned section featuring a heading, descriptive text, and a data table optimized for financial transaction display. The table includes sticky columns on the left for date and description, with horizontal scroll navigation buttons on either side. Row selection checkboxes and sortable column headers are included.
Light background with dark text. The table has a thin border with rounded corners. Sticky columns have a subtle background to distinguish them from scrollable content. Horizontal scroll buttons appear at the table edges for keyboard-friendly navigation. Status values display as color-coded badges. Currency amounts are formatted consistently. Static layout with smooth scroll animations.
This is a data table designed for wide financial datasets requiring horizontal scrolling. The sticky columns and scroll navigation buttons ensure critical data remains visible and accessible. The most distinctive feature is the scroll control buttons, making it ideal for transaction logs, banking interfaces, or any dense financial data presentation.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| lucide-react | NPM |
| react | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
checkbox @shadcn | Registry |
table @shadcn | Registry |