React Table Block Subtotals

Table component with subtotals and group summaries for React financial and reporting dashboards

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Calculate totals on your Next.js reporting dashboard with this subtotal table component. Features automatic sum calculations, group subtotal rows, grand total footer, formatted currency values, percentage of total column, and visual separator rows. Built with shadcn/ui Table component using Tailwind CSS. The inline calculations provide instant insights perfect for expense reports, sales summaries, budget tracking, invoice line items, or any React app requiring grouped numeric aggregations.

Q1 Expense Report

10 line items across 4 categories

$29,000

Total expenses

ID	Description	Category	Qty	Unit Price	Total	% of Total
EXP-001	Cloud hosting (Annual)	Software	1	$2,400	$2,400	8.3%
EXP-002	Design tool licenses		5	$180	$900	3.1%
EXP-003	Project management SaaS		1	$600	$600	2.1%
	Software Subtotal		7		$3,900	13.4%
EXP-004	Laptops for new hires	Hardware	3	$1,500	$4,500	15.5%
EXP-005	Monitor upgrades		5	$400	$2,000	6.9%
	Hardware Subtotal		8		$6,500	22.4%
EXP-006	Consulting fees	Services	40	$150	$6,000	20.7%
EXP-007	Security audit		1	$3,500	$3,500	12.1%
EXP-008	Training workshops		2	$800	$1,600	5.5%
	Services Subtotal		43		$11,100	38.3%
EXP-009	Ad campaign Q1	Marketing	1	$5,000	$5,000	17.2%
EXP-010	Trade show booth		1	$2,500	$2,500	8.6%
	Marketing Subtotal		2		$7,500	25.9%
	Grand Total		60		$29,000	100%