👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Summary Footer
Data table with summary footer row displaying aggregated totals, averages, and counts for numeric columns
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Need to show totals at a glance without mental math? This React table includes a sticky summary footer displaying aggregated metrics like total revenue, average price, and item count. Built with shadcn/ui Table and TableFooter components, the footer stays visible at the bottom showing bold totals that update dynamically with filters or data changes. Different aggregation types per column—sum for revenue, average for ratings, count for items—perfect for financial tables, analytics dashboards, sales reports, or any interface where users need quick insights into dataset totals.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-footer-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-footer-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-footer-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-footer-01.jsonRelated 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