Table

How to use tables

Use tables to make information easier to compare and scan for users.

When using tables:

Make your tables as easy to understand as possible
List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
Provide a caption to describe what the table is about
Header cells must be marked up with <th> and data cells with <td> to make tables accessible
Complex tables may require more explicit cell and header associations using scope, id, and headers attributes
Provide a summary for complex tables describing how the data is organised to help users understand and navigate the table

Types of tables

Standard

Interactive demo - Sainsbury's

<Table
  rowKey="orderedLine.sku"
  data={data}
  caption="Captions that have no significance to sighted users, can be toggled off and still be readable by screen readers."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

<Table
  rowKey="orderedLine.sku"
  data={data}
  caption="Captions that have no significance to sighted users, can be toggled off and still be readable by screen readers."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

Sortable

Use a sortable table when you want to give users the option to order content.

Interactive demo - Sainsbury's

<Table
  rowKey="orderedLine.sku"
  sortable
  data={data}
  caption="Use this variation when a comparison is not a priority and you want to give users the option to order content."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

<Table
  rowKey="orderedLine.sku"
  sortable
  data={data}
  caption="Use this variation when a comparison is not a priority and you want to give users the option to order content."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

Flexible

A flexible table adjusts on smaller screen sizes to display the content as stacked.

Interactive demo - Sainsbury's

Interactive demo - Sainsbury's

<Table
  rowKey="orderedLine.sku"
  responsive
  sortable
  data={data}
  caption="This responsive view can also be applied to sortable content."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

<Table
  rowKey="orderedLine.sku"
  responsive
  sortable
  data={data}
  caption="This responsive view can also be applied to sortable content."
  visuallyHiddenCaption
  columns={[
    {
      name: "Description",
      accessor: (rowData) => ({ value: rowData.orderedLine.description }),
      hideLabel: true,
      className: "customCol",
    },
    {
      name: "Quantity",
      accessor: (rowData) => ({
        value: rowData.orderedLine.orderedQuantity,
        uom: rowData.orderedLine.unitOfMeasure.toLowerCase(),
      }),
      sort: (accessor, ascending) => (a, b) => {
        const valueA = parseInt(accessor(a).value, 10)
        const valueB = parseInt(accessor(b).value, 10)

        if (valueA < valueB) {
          return ascending ? -1 : 1
        }
        if (valueA > valueB) {
          return ascending ? 1 : -1
        }
        return 0
      },
      className: {
        th: "customHead",
      },
      render: ({ value, uom }) => (
        <span>
          {value}
          {uom !== "each" && uom}
        </span>
      ),
    },
  ]}
/>

Copy guidelines

Headers should be informative and descriptive
Include unit of measurement symbols in the header so they aren’t repeated throughout the columns
Use decimals consistently
Start your headers with a capital letter
Don’t use commas or any punctuation at the end of each header
Don’t use more than three words per header

Was this page helpful?

Get in touch

Our team can answer any questions about using tables or give you a helping hand with your next project.

Email

Microsoft Teams

Slack

On this page