Sticky Footer Totals Table
Invoice lines table with right-aligned tabular numbers, status badges, and a sticky footer row showing the line item count and running total for billing pages.
Invoice lines table with right-aligned tabular numbers, status badges, and a sticky footer row showing the line item count and running total for billing pages.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sticky Footer Totals Table is the invoice lines panel for INV-2026-0401, five line items covering Team plan seats, data retention, SSO, priority support, and an API overage charge. Every number column is right-aligned with tabular-nums. The TableFooter row spans the description columns, shows the line item count, and anchors the running total at the right edge. Pending items are flagged outline; the footnote clarifies they are estimated and will be finalised at close of the billing period.
Lines are one const array; amounts are stored as integer cents and formatted via Intl.NumberFormat so the dollar sign, comma grouping, and decimal places are consistent across locales. The total is derived once above the component to avoid summing inside JSX.
Reach for this block on any billing or order summary page where the line item count and running total must stay visible as the user scrolls the body rows. Wire the lines array to your invoice endpoint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the monthly invoice breakdown. Other totals tables:
Tip: store amounts as integer cents and format once at render, floating point arithmetic on dollar values will eventually produce a rounding surprise.