Data table — Line items with totals footer

A concise line-item table ends in a subtotal, adjustment and emphasized total. Use for reconciling a small set of quantities and amounts.

ReactHTML

1440 × 900

Open in new tab

Component.tsx142 lines

export default function DataTableTotalsFooter() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-start justify-between gap-6">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Line item summary
            </h1>
            <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
              Explain the scope of the amounts listed below.
            </p>
          </div>
          <p className="text-sm text-neutral-500">Reference 00124</p>
        </header>
        <table className="mt-8 w-full table-fixed text-left">
          <caption className="sr-only">
            Line items, quantities and amounts with totals
          </caption>
          <thead className="bg-neutral-50">
            <tr>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium w-1/2"
              >
                Description
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-right"
              >
                Qty
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-right"
              >
                Amount
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Line item label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                2
              </td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                $240
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Add-on label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                1
              </td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                $60
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Service label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                3
              </td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                $90
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr className="border-t border-neutral-200">
              <th
                colSpan={2}
                scope="row"
                className="px-3 py-3 text-right text-sm font-medium"
              >
                Subtotal
              </th>
              <td className="px-3 py-3 text-right text-sm tabular-nums">
                $390
              </td>
            </tr>
            <tr>
              <th
                colSpan={2}
                scope="row"
                className="px-3 py-3 text-right text-sm font-medium"
              >
                Adjustment
              </th>
              <td className="px-3 py-3 text-right text-sm tabular-nums">
                -$20
              </td>
            </tr>
            <tr className="border-t border-neutral-200 bg-neutral-50">
              <th
                colSpan={2}
                scope="row"
                className="px-3 py-4 text-right text-base font-semibold"
              >
                Total
              </th>
              <td className="px-3 py-4 text-right text-base font-semibold tabular-nums">
                $370
              </td>
            </tr>
          </tfoot>
        </table>
        <div className="mt-6 flex flex-wrap gap-4">
          <a
            href="#"
            className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Download summary
          </a>
          <a
            href="#"
            className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            View source records
          </a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for line-item summaries and small reconciliations. Choose pricing-comparison-table for comparing plan features. Variations: add a tax row, display a discount code, or replace money with time totals.
Hierarchy: The h1 and reference identify the summary; quantities and amounts align right with tabular numerals. Subtotal and adjustment lead to the emphasized final total. Description slots allow 4 words, heading 5 and lede 14.
Responsive: All three columns remain visible at 320px with wrapping description labels. The reference and footer actions wrap. The heading size and section padding increase at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A wrapping heading/reference row sits above a fixed table with half-width descriptions. Cells have 12px horizontal and 16px vertical padding; compact total rows use 12px vertical padding. The last row is neutral-50 and semibold.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Line item summary                           Reference 00124   │
│Description                              Qty         Amount   │
│Line item label                            2           $240   │
│Add-on label                               1            $60   │
│Service label                              3            $90   │
│                                   Subtotal            $390   │
│                                 Adjustment            -$20   │
│                                      Total            $370   │
│[Download summary] [View source records]                      │
└──────────────────────────────────────────────────────────────┘

View all

Data table — Audit log with date bands
Layout tags: table,list,compact
Data table — Dense table with priority columns
Layout tags: stacked,table,numbers,compact
Data table — Expandable rows
Layout tags: stacked,table,list

Data table — Line items with totals footer

Pattern notes

More in Data table

Data table — Audit log with date bands

Data table — Dense table with priority columns

Data table — Expandable rows