Shadcn UI Data Table Block
DataTable25 is a left-aligned section featuring a heading, descriptive text, and a data table designed for invoice line items. The table displays product name, SKU, quantity, unit price, and line total columns. Below the data rows, summary rows show subtotal, tax amount, and grand total calculations.
Light background with dark text. The table has a thin border with rounded corners. Numeric columns are right-aligned for easy scanning. Currency values are formatted consistently. Summary rows have a muted background to distinguish them from line items. The total row may have bold styling for emphasis. Static layout with no entrance animations.
This is a data table designed for financial document presentation. The summary rows provide automatic calculations displayed inline with the data. The most distinctive feature is the footer summary section with subtotal, tax, and total, making it ideal for invoices, quotes, purchase orders, or any itemized financial document.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| react | NPM |
table @shadcn | Registry |