Shadcn UI Data Table Block
DataTable24 is a left-aligned section featuring a heading, descriptive text, and a data table with transactions grouped by date. Column headers are hidden for a cleaner appearance. Each date group has a header row followed by transaction rows showing invoice number, description, and amount.
Light background with dark text. The table has a thin border with rounded corners. Date group headers display the formatted date in a muted background row. Transaction rows show invoice numbers in monospace font and amounts formatted as currency. Positive amounts may have distinct styling. Hidden headers create a streamlined, report-like appearance. Static layout with no entrance animations.
This is a data table designed for chronological transaction display. The date grouping provides temporal context while hidden headers reduce visual noise. The most distinctive feature is the date-based row grouping with hidden headers, making it ideal for bank statements, activity logs, or any time-series transaction data.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| react | NPM |
table @shadcn | Registry |