Component

Table

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

Search for usage of this component on GitHub

How it looks (preview) (preview all)

January	£85	£95
February	£75	£55
March	£165	£125

How to call this component

<%= render "govuk_publishing_components/components/table", {
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
} %>

Accessibility acceptance criteria

Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users. Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations is needed using scope attributes.

Links in the component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text

Other examples

With head (preview)

Month you apply	Rate for bicycles	Rate for vehicles
January	£85	£95
February	£75	£55
March	£165	£125

<%= render "govuk_publishing_components/components/table", {
  head: [
    {
      text: "Month you apply"
    },
    {
      text: "Rate for bicycles",
      format: "numeric"
    },
    {
      text: "Rate for vehicles",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
} %>

With head and caption (preview)

Caption 1: Months and rates

Month you apply	Rate for bicycles	Rate for vehicles
January	£85	£95
February	£75	£55
March	£165	£125

<%= render "govuk_publishing_components/components/table", {
  caption: "Caption 1: Months and rates",
  caption_classes: "govuk-heading-m",
  first_cell_is_header: true,
  head: [
    {
      text: "Month you apply"
    },
    {
      text: "Rate for bicycles",
      format: "numeric"
    },
    {
      text: "Rate for vehicles",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
} %>

With sortable head (preview)

This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.

Month you apply	Rate for bicycles	Rate for vehicles
January	Not set	£95
February	£75	£55
March	£125	£60
April	£135	£62
May	£150	£80

<%= render "govuk_publishing_components/components/table", {
  sortable: true,
  head: [
    {
      text: "Month you apply"
    },
    {
      text: "Rate for bicycles",
      format: "numeric",
      sort_direction: "descending",
      href: "/?sort_direction=desc",
      data_attributes: {
        tracking: "UTM-123A"
      }
    },
    {
      text: "Rate for vehicles",
      format: "numeric",
      href: "/?sort_direction=desc",
      data_attributes: {
        tracking: "UTM-123B"
      }
    }
  ],
  rows: [
    [
      {
        text: "January"
      },
      {
        text: null,
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£125",
        format: "numeric"
      },
      {
        text: "£60",
        format: "numeric"
      }
    ],
    [
      {
        text: "April"
      },
      {
        text: "£135",
        format: "numeric"
      },
      {
        text: "£62",
        format: "numeric"
      }
    ],
    [
      {
        text: "May"
      },
      {
        text: "£150",
        format: "numeric"
      },
      {
        text: "£80",
        format: "numeric"
      }
    ]
  ]
} %>