Sortable table

Skip to HTML example

When to use this component

Use the sortable table component to let users sort columns in ascending or descending order.

Use a sortable table when:

users need to compare data across rows
the order of data matters and users may want to reorder it
you have multiple columns that users might want to sort by

When not to use this component

Do not use a sortable table:

for simple data that doesn't need sorting
when the table has very few rows (under 5)
if the data is already in a logical order that users expect

How it works

The sortable table component extends the standard GOV.UK table with sorting functionality. Users can click column headers to sort the table data in ascending or descending order.

Each sortable column header contains a button with sort indicators. The aria-sort attribute indicates the current sort state:

aria-sort="none" - column is sortable but not currently sorted
aria-sort="ascending" - sorted A to Z or lowest to highest
aria-sort="descending" - sorted Z to A or highest to lowest

HTML example

Copy the HTML from this page directly into your web template. Refer to the layouts section for further guidance on structuring your web template.

You will need to add JavaScript to handle the sorting functionality when users click the column headers.

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" data-module="dfe-sortable-table">
  <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header" aria-sort="ascending">Date</th>
      <th scope="col" class="govuk-table__header" aria-sort="none">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" data-sort-value="109.80">£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" data-sort-value="109.80">£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" data-sort-value="4282.20">£4,282.20</td>
    </tr>
  </tbody>
</table>
<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden"></div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<table class="govuk-table" data-module="dfe-sortable-table">
  <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header" aria-sort="ascending">Date</th>
      <th scope="col" class="govuk-table__header" aria-sort="none">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" data-sort-value="109.80">£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" data-sort-value="109.80">£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" data-sort-value="4282.20">£4,282.20</td>
    </tr>
  </tbody>
</table>
<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden"></div>

{% endblock %}

If you would like any additional advice or guidance with using this example on Power Pages, please contact the Solutions Delivery Team.