Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tables blocks

Pro

Table With a Summary Footer Chain Block for React

A hire quote whose footer works down from the subtotal through a percentage discount, a tax rate, a flat delivery charge and the total, each showing its formula.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show how a total was reached, not just what it is, with this summary footer table for React with Base UI. Six hire lines each carry a quantity field and a line total, and the footer is a real tfoot that works down from them: Subtotal, then a Discount percentage, a Tax rate you choose from 0, 8 and 20 percent, a flat Delivery charge that drops away once the order is large enough, and last the Total. Every chain row says how it was worked out in small text under its name ("8% of $435.96"), and a switch says whether the prices already include tax, in which case the tax is the part of the price that is tax instead of an addition. Everything is worked out in whole cents on each render, and a status line reads the new total once you stop typing. It's built from Number Input, Native Select, Switch and Guides. For quotes, carts, invoices and any table that ends in a bill.

FAQ

In what order are the footer rows worked out?

Subtotal is the sum of the line totals. The discount is a percentage of the subtotal, rounded to a cent, and what remains is the amount tax and delivery are worked out from. Tax is that amount times the rate, delivery is a flat charge that is free once the amount reaches the threshold, and the total adds them.

What does Prices include tax change?

With it off, tax is added on top. With it on, the prices already contain tax, so the tax row shows the part of the amount that is tax (the amount minus the amount divided by one plus the rate), marked included, and the total does not add it a second time.

Are there limits on the fields?

Quantities stop at 99 and the discount at 50 percent, and every sum uses the capped number whichever way a field was typed. Empty or non-numeric text counts as 0, so no figure ever shows NaN.

How does the footer read on a phone?

The Unit price column goes below the small breakpoint, with the price folded under the item name. The chain labels stay in the first column and every amount in the last, and each chain row keeps its field in the quantity column, so no cell spans several columns.

How are changes announced?

The visible figures update at once, and a polite status line reads the total about half a second after you stop typing, only when the sentence changed, so a screen reader is not interrupted on every digit.

What stays local, and how do I wire it for real?

The prices, the threshold and the tax rates are typed in the file and nothing is ordered. For real data, load your lines and rates in place of the typed ones and keep the helpers that derive the chain; the same arithmetic then drives your checkout.

  • Pro

    Table Footer With Totals

    Totals and comparison

    A timesheet table with a real footer row whose totals (hours, average rate, amount, paid and pending) are worked out from the rows shown, so a client filter changes every figure.

  • Pro

    Editable Cells Grid Table

    Edit in place

    A sales forecast grid where every number is a field, with live row and column totals, a dot on each changed cell, arrow keys and Enter between regions, Undo and Reset.

  • Pro

    Plan Price Editor Table

    Edit in place

    A table of subscription plans whose prices you edit in number fields, with monthly recurring revenue, shares, the change against the saved prices and a Save changes button.

  • Pro

    Inline Cell Editing Table

    Edit in place

    A shop price list whose price and stock cells turn into a field in place, with Save, Cancel, Escape, a reserved line for the reason a value is refused and Undo.

  • Pro

    Sortable Members Table

    Sort and search

    A members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.

  • Pro

    Compare Rows Table

    Totals and comparison

    A sales table where you tick up to two quarters and a band closing the panel compares them metric by metric, with the signed difference and the change as an arrow, a sign and a word, plus Swap A and B.

All 49 tables blocks