Data table — Grouped table sections

A single table separates records into named row groups with aligned numeric columns. Use when grouping gives context without separate filters or nested cards.

ReactHTML

1440 × 900

Open in new tab

Component.tsx122 lines

export default function DataTableGroupedSections() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Grouped record overview
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Describe how records are organized into their reporting groups.
          </p>
        </div>
        <table className="mt-8 w-full table-fixed text-left">
          <caption className="sr-only">
            Records grouped by reporting period
          </caption>
          <thead className="bg-neutral-50">
            <tr>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium w-1/2"
              >
                Record
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium "
              >
                Status
              </th>
              <th
                scope="col"
                className="px-3 py-3 text-left text-sm font-medium text-right"
              >
                Total
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-neutral-200">
              <th
                colSpan={3}
                scope="rowgroup"
                className="px-3 py-3 text-left text-xs font-semibold text-neutral-500"
              >
                Current period
              </th>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Item label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Active</td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                1,240
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Entry label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Active</td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                820
              </td>
            </tr>
          </tbody>
          <tbody>
            <tr className="border-t border-neutral-200">
              <th
                colSpan={3}
                scope="rowgroup"
                className="px-3 py-3 text-left text-xs font-semibold text-neutral-500"
              >
                Previous period
              </th>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Record label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Archived</td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                680
              </td>
            </tr>
            <tr className="border-t border-neutral-200">
              <th
                scope="row"
                className="px-3 py-4 text-sm text-left font-medium "
              >
                Collection label
              </th>
              <td className="px-3 py-4 text-sm text-neutral-600 ">Archived</td>
              <td className="px-3 py-4 text-sm text-neutral-600 text-right tabular-nums">
                430
              </td>
            </tr>
          </tbody>
        </table>
        <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
          <p className="text-sm text-neutral-500">4 records across 2 groups</p>
          <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"
          >
            Export grouped records
          </a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a dataset has two or more natural row groups. Choose data-table-toolbar-pagination for large searchable datasets. Variations: group by status, add group subtotals, or replace Total with an owner column.
Hierarchy: The h1 leads into column headings, period group labels and records. Row headers identify each record, and tabular totals align right. Heading up to 6 words, lede 16, row labels 3 words and group labels 3.
Responsive: The same three-column table remains at all widths, with record names wrapping in the half-width first column. The footer wraps at 320px. Heading 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 full-width fixed-layout table begins 32px below the heading. Its first column uses half the width. Each tbody begins with a spanning group heading; record cells use 12px horizontal and 16px vertical padding. A wrapping footer follows after 24px.
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

┌──────────────────────────────────────────────────────────────┐
│Grouped record overview                                       │
│Record                           Status             Total     │
│Current period                                                │
│Item label                       Active             1,240     │
│Entry label                      Active               820     │
│Previous period                                               │
│Record label                     Archived             680     │
│Collection label                 Archived             430     │
│4 records across 2 groups              [Export 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 — Grouped table sections

Pattern notes

More in Data table

Data table — Audit log with date bands

Data table — Dense table with priority columns

Data table — Expandable rows