Summary table

Pain point

This pattern was developed in both the extract planning app and Minute. In both cases was a need to display a long list of "jobs" each with a link to further details page, quick actions both on individual jobs and for bulk actions.

Solution

The arrived at pattern was to develop a "summary" variant of the table component with checkboxes, full width item link and a action column.

Select	Title	Date	Actions
Select item 1	Item 1	12 Aug, 11:45	Rename Export
Select item 2	Item 2	11 Aug, 11:45	Rename Export

Show code

HTML
Astro
React
Svelte
Solid

<table class="govuk-table govuk-table--summary govuk-table--subtle">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Select</th>
      <th class="govuk-table__header" scope="col">Title</th>
      <th class="govuk-table__header" scope="col">Date</th>
      <th class="govuk-table__header" scope="col">Actions</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes govuk-checkboxes--small govuk-checkboxes--subtle" data-module="govuk-checkboxes">
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" type="checkbox" id="item-1" name="item-1" value="item-1">
            <label class="govuk-label govuk-checkboxes__label">
              <span class="govuk-visually-hidden">Select item 1</span>
            </label>
          </div>
        </div>
      </td>
      <td class="govuk-table__cell govuk-table__cell--stretch">
        <a class="govuk-link govuk-link--no-visited-state" href="#">Item 1</a>
      </td>
      <td class="govuk-table__cell govuk-table__cell--no-wrap govuk-table__cell--small">12 Aug, 11:45</td>
      <td class="govuk-table__cell govuk-table__cell--no-wrap">
        <div class="govuk-button-group">
          <a href="#" role="button" draggable="false" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Rename</a>
          <a href="#" role="button" draggable="false" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Export</a>
        </div>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes govuk-checkboxes--small govuk-checkboxes--subtle" data-module="govuk-checkboxes">
          <div class="govuk-checkboxes__item">
            <input class="govuk-checkboxes__input" type="checkbox" id="item-2" name="item-2" value="item-2">
            <label class="govuk-label govuk-checkboxes__label">
              <span class="govuk-visually-hidden">Select item 2</span>
            </label>
          </div>
        </div>
      </td>
      <td class="govuk-table__cell govuk-table__cell--stretch">
        <a class="govuk-link govuk-link--no-visited-state" href="#">Item 2</a>
      </td>
      <td class="govuk-table__cell govuk-table__cell--no-wrap govuk-table__cell--small">11 Aug, 11:45</td>
      <td class="govuk-table__cell govuk-table__cell--no-wrap">
        <div class="govuk-button-group">
          <a href="#" role="button" draggable="false" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Rename</a>
          <a href="#" role="button" draggable="false" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Export</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

---
import {
  Table,
  TableHead,
  TableRow,
  TableHeader,
  TableBody,
  TableCell,
  Link,
  Checkboxes,
  CheckboxItem,
  CheckboxInput,
  CheckboxLabel,
  ButtonGroup,
  Button,
} from "@i-dot-ai-npm/component-library-astro";
---

<Table summary subtle>
  <TableHead>
    <TableRow>
      <TableHeader>Select</TableHeader>
      <TableHeader>Title</TableHeader>
      <TableHeader>Date</TableHeader>
      <TableHeader>Actions</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        <Checkboxes small subtle>
          <CheckboxItem>
            <CheckboxInput id="item-1" name="item-1" value="item-1" />
            <CheckboxLabel>
              <span class="govuk-visually-hidden">Select item 1</span>
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </TableCell>
      <TableCell stretch>
        <Link href="#" noVisitedState>Item 1</Link>
      </TableCell>
      <TableCell noWrap small>12 Aug, 11:45</TableCell>
      <TableCell noWrap>
        <ButtonGroup>
          <Button small tertiary href="#">Rename</Button>
          <Button small tertiary href="#">Export</Button>
        </ButtonGroup>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <Checkboxes small subtle>
          <CheckboxItem>
            <CheckboxInput id="item-2" name="item-2" value="item-2" />
            <CheckboxLabel>
              <span class="govuk-visually-hidden">Select item 2</span>
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </TableCell>
      <TableCell stretch>
        <Link href="#" noVisitedState>Item 2</Link>
      </TableCell>
      <TableCell noWrap small>11 Aug, 11:45</TableCell>
      <TableCell noWrap>
        <ButtonGroup>
          <Button small tertiary href="#">Rename</Button>
          <Button small tertiary href="#">Export</Button>
        </ButtonGroup>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

import {
  Table,
  TableHead,
  TableRow,
  TableHeader,
  TableBody,
  TableCell,
  Link,
  Checkboxes,
  CheckboxItem,
  CheckboxInput,
  CheckboxLabel,
  ButtonGroup,
  Button,
} from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Table summary subtle>
      <TableHead>
        <TableRow>
          <TableHeader>Select</TableHeader>
          <TableHeader>Title</TableHeader>
          <TableHeader>Date</TableHeader>
          <TableHeader>Actions</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>
            <Checkboxes small subtle>
              <CheckboxItem>
                <CheckboxInput id="item-1" name="item-1" value="item-1" />
                <CheckboxLabel>
                  <span className="govuk-visually-hidden">Select item 1</span>
                </CheckboxLabel>
              </CheckboxItem>
            </Checkboxes>
          </TableCell>
          <TableCell stretch>
            <Link href="#" noVisitedState>Item 1</Link>
          </TableCell>
          <TableCell noWrap small>12 Aug, 11:45</TableCell>
          <TableCell noWrap>
            <ButtonGroup>
              <Button small tertiary href="#">Rename</Button>
              <Button small tertiary href="#">Export</Button>
            </ButtonGroup>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Checkboxes small subtle>
              <CheckboxItem>
                <CheckboxInput id="item-2" name="item-2" value="item-2" />
                <CheckboxLabel>
                  <span className="govuk-visually-hidden">Select item 2</span>
                </CheckboxLabel>
              </CheckboxItem>
            </Checkboxes>
          </TableCell>
          <TableCell stretch>
            <Link href="#" noVisitedState>Item 2</Link>
          </TableCell>
          <TableCell noWrap small>11 Aug, 11:45</TableCell>
          <TableCell noWrap>
            <ButtonGroup>
              <Button small tertiary href="#">Rename</Button>
              <Button small tertiary href="#">Export</Button>
            </ButtonGroup>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

<script>
  import {
    Table,
    TableHead,
    TableRow,
    TableHeader,
    TableBody,
    TableCell,
    Link,
    Checkboxes,
    CheckboxItem,
    CheckboxInput,
    CheckboxLabel,
    ButtonGroup,
    Button,
  } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Table summary subtle>
  <TableHead>
    <TableRow>
      <TableHeader>Select</TableHeader>
      <TableHeader>Title</TableHeader>
      <TableHeader>Date</TableHeader>
      <TableHeader>Actions</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        <Checkboxes small subtle>
          <CheckboxItem>
            <CheckboxInput id="item-1" name="item-1" value="item-1" />
            <CheckboxLabel>
              <span class="govuk-visually-hidden">Select item 1</span>
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </TableCell>
      <TableCell stretch>
        <Link href="#" noVisitedState>Item 1</Link>
      </TableCell>
      <TableCell noWrap small>12 Aug, 11:45</TableCell>
      <TableCell noWrap>
        <ButtonGroup>
          <Button small tertiary href="#">Rename</Button>
          <Button small tertiary href="#">Export</Button>
        </ButtonGroup>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <Checkboxes small subtle>
          <CheckboxItem>
            <CheckboxInput id="item-2" name="item-2" value="item-2" />
            <CheckboxLabel>
              <span class="govuk-visually-hidden">Select item 2</span>
            </CheckboxLabel>
          </CheckboxItem>
        </Checkboxes>
      </TableCell>
      <TableCell stretch>
        <Link href="#" noVisitedState>Item 2</Link>
      </TableCell>
      <TableCell noWrap small>11 Aug, 11:45</TableCell>
      <TableCell noWrap>
        <ButtonGroup>
          <Button small tertiary href="#">Rename</Button>
          <Button small tertiary href="#">Export</Button>
        </ButtonGroup>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

import {
  Table,
  TableHead,
  TableRow,
  TableHeader,
  TableBody,
  TableCell,
  Link,
  Checkboxes,
  CheckboxItem,
  CheckboxInput,
  CheckboxLabel,
  ButtonGroup,
  Button,
} from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Table summary subtle>
      <TableHead>
        <TableRow>
          <TableHeader>Select</TableHeader>
          <TableHeader>Title</TableHeader>
          <TableHeader>Date</TableHeader>
          <TableHeader>Actions</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>
            <Checkboxes small subtle>
              <CheckboxItem>
                <CheckboxInput id="item-1" name="item-1" value="item-1" />
                <CheckboxLabel>
                  <span class="govuk-visually-hidden">Select item 1</span>
                </CheckboxLabel>
              </CheckboxItem>
            </Checkboxes>
          </TableCell>
          <TableCell stretch>
            <Link href="#" noVisitedState>Item 1</Link>
          </TableCell>
          <TableCell noWrap small>12 Aug, 11:45</TableCell>
          <TableCell noWrap>
            <ButtonGroup>
              <Button small tertiary href="#">Rename</Button>
              <Button small tertiary href="#">Export</Button>
            </ButtonGroup>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Checkboxes small subtle>
              <CheckboxItem>
                <CheckboxInput id="item-2" name="item-2" value="item-2" />
                <CheckboxLabel>
                  <span class="govuk-visually-hidden">Select item 2</span>
                </CheckboxLabel>
              </CheckboxItem>
            </Checkboxes>
          </TableCell>
          <TableCell stretch>
            <Link href="#" noVisitedState>Item 2</Link>
          </TableCell>
          <TableCell noWrap small>11 Aug, 11:45</TableCell>
          <TableCell noWrap>
            <ButtonGroup>
              <Button small tertiary href="#">Rename</Button>
              <Button small tertiary href="#">Export</Button>
            </ButtonGroup>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

When to use this pattern

Use a summary table when:

users need to scan a list of items and act on individual rows
each item has a small, consistent set of actions (for example rename or export)
users may need to select one or more items to act on them together

How it works

The table uses the summary and subtle variants for a lighter, denser layout suited to internal tools.
Each row starts with a small, subtle checkbox for selection. The label is visually hidden but still read out to screen readers.
The title column uses stretch so it takes the remaining width, while the date and actions columns use noWrap so they stay on one line.
Row actions use a ButtonGroup of small, tertiary buttons to keep them unobtrusive.

When not to use this pattern

Do not use a summary table for presenting a single record's details — use a summary list instead. For simple tabular data with no actions, use the standard table.