Unofficial
Internal
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 
<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 Default Description
id string 'id' attribute to place on the base HTML element
classBlock string Block name override in BEM style classes applied to all elements
classModifiers other BEM style modifiers to apply to the base HTML element
className string Extra classes to apply to the base HTML element
caption string
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 
<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.