Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Summary Footer
Data table component with summary footer displaying aggregated totals and averages for React reports
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Display summary metrics on your Next.js financial dashboard with this footer-enabled table component. Features sticky summary footer row, total hours and revenue calculations, average rate display, paid/pending status counts, and dynamic updates with filtering. Built with shadcn/ui Table and TableFooter components using Tailwind CSS. The aggregation-focused design provides instant insights—perfect for invoice tracking, timesheet reports, sales analytics, or any React app requiring at-a-glance totals.
8 invoices (5 paid)
Total Billed
$34,825
Avg Rate
$144/hr
| Invoice | Client | Service | Hours | Rate | Amount | Status |
|---|---|---|---|---|---|---|
| INV-001 | Acme Corp | Web Development | 40 | $150 | $6,000 | Paid |
| INV-002 | TechStart Inc | UI/UX Design | 25 | $125 | $3,125 | Paid |
| INV-003 | MegaCorp Ltd | Consulting | 15 | $200 | $3,000 | Pending |
| INV-004 | StartUp Co | App Development | 60 | $150 | $9,000 | Overdue |
| INV-005 | Enterprise LLC | Web Development | 35 | $150 | $5,250 | Paid |
| INV-006 | Global Industries | SEO Optimization | 20 | $100 | $2,000 | Pending |
| INV-007 | Digital Agency | Brand Strategy | 30 | $175 | $5,250 | Paid |
| INV-008 | Local Business | Social Media | 12 | $100 | $1,200 | Paid |
| Total (8 invoices) | 237 | Avg $144 | $34,825 | 5 paid | ||
Installation
Related blocks you will also like
Searchable Filterable Data Table
Filter with dynamic totals
Table with Quick Filters
Filter chips with counts
Table with Export Options
Export with summary data
Table with Sortable Columns
Sort while showing totals
Table with Sticky Header
Fixed header on scroll
Table with Row Selection
Select rows to see subset totals