Components

Table

Use the table component to make information easier to compare and scan for users.

Dates and amounts
Date	Amount
First 6 weeks	£109.80 per week
Next 33 weeks	£109.80 per week
Total estimated pay	£4,282.20

HTML
React

<table class="govuk-table">
  <caption class="govuk-table__caption">
    Dates and amounts
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">
        Date
      </th>
      <th scope="col" class="govuk-table__header">
        Amount
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        First 6 weeks
      </th>
      <td class="govuk-table__cell">
        £109.80 per week
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Next 33 weeks
      </th>
      <td class="govuk-table__cell">
        £109.80 per week
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Total estimated pay
      </th>
      <td class="govuk-table__cell">£4,282.20</td>
    </tr>
  </tbody>
</table>

<Table
  caption="Dates and amounts"
  keys={["date", "amount"]}
  headings={{
    amount: "Amount",
    date: "Date",
  }}
  data={[
    {
      amount: "£109.80 per week",
      date: "First 6 weeks",
    },
    {
      amount: "£109.80 per week",
      date: "Next 33 weeks",
    },
    {
      amount: "£4,282.20",
      date: "Total estimated pay",
    },
  ]}
/>

Props

Name	Type	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	Extra classes to apply to the base HTML element
caption	other
data	other
headings	other
keys	other

When to use this component

Use the table component to let users compare information in rows and columns.

When not to use this component

Never use the table component to layout content on a page. Instead, use the grid system.

How it works

Table captions

Use the <caption> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.

Stories

Standard

A standard Table.

Date	Amount
First 6 weeks	£109.80 per week
Next 33 weeks	£109.80 per week
Total estimated pay	£4,282.20

HTML
React

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">
        Date
      </th>
      <th scope="col" class="govuk-table__header">
        Amount
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        First 6 weeks
      </th>
      <td class="govuk-table__cell">
        £109.80 per week
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Next 33 weeks
      </th>
      <td class="govuk-table__cell">
        £109.80 per week
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Total estimated pay
      </th>
      <td class="govuk-table__cell">£4,282.20</td>
    </tr>
  </tbody>
</table>

<Table
  keys={["date", "amount"]}
  headings={{
    amount: "Amount",
    date: "Date",
  }}
  data={[
    {
      amount: "£109.80 per week",
      date: "First 6 weeks",
    },
    {
      amount: "£109.80 per week",
      date: "Next 33 weeks",
    },
    {
      amount: "£4,282.20",
      date: "Total estimated pay",
    },
  ]}
/>

Numbers in a table

IMPLEMENT ME.

Custom column widths

IMPLEMENT ME.