Components Sortable table

experimental

Use the Sortable Table component to let users sort table cells in ascending or descending order.

<table class="govuk-table">

<thead class="govuk-table__head">
<tr class="govuk-table__row">

  <th scope="col" class="govuk-table__header" aria-sort="ascending">Name</th>

  <th scope="col" class="govuk-table__header" aria-sort="none">Date</th>

  <th scope="col" class="govuk-table__header govuk-table__header--numeric" aria-sort="none">Amount</th>

</tr>
</thead>

<tbody class="govuk-table__body">

<tr class="govuk-table__row">

  <td class="govuk-table__cell">Adam Smith</td>

  <td class="govuk-table__cell" data-sort-value="1568847600000">19 September 2019</td>

  <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="59">£59</td>

</tr>

<tr class="govuk-table__row">

  <td class="govuk-table__cell">Benjamin Franklin</td>

  <td class="govuk-table__cell" data-sort-value="1516233600000">18 January 2018</td>

  <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="45">£45</td>

</tr>

<tr class="govuk-table__row">

  <td class="govuk-table__cell">Jane Benn</td>

  <td class="govuk-table__cell" data-sort-value="1004572800000">1 November 2001</td>

  <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="2000">£2000</td>

</tr>

</tbody>
</table> 
{% from "table/macro.njk" import govukTable %}

{{ govukTable({
head: [
{
  text: "Name",
  attributes: {
    "aria-sort": "ascending"
  }
},
{
  text: "Date",
  attributes: {
    "aria-sort": "none"
  }
},
{
  text: "Amount",
  attributes: {
    "aria-sort": "none"
  },
  format: "numeric"
}
],
rows: [
[
  {
    text: "Adam Smith"
  },
  {
    text: "19 September 2019",
    attributes: {
      "data-sort-value": "1568847600000"
    }
  },
  {
    text: "£59",
    format: "numeric",
    attributes: {
      "data-sort-value": "59"
    }
  }
],
[
  {
    text: "Benjamin Franklin"
  },
  {
    text: "18 January 2018",
    attributes: {
      "data-sort-value": "1516233600000"
    }
  },
  {
    text: "£45",
    format: "numeric",
    attributes: {
      "data-sort-value": "45"
    }
  }
],
[
  {
    text: "Jane Benn"
  },
  {
    text: "1 November 2001",
    attributes: {
      "data-sort-value": "1004572800000"
    }
  },
  {
    text: "£2000",
    format: "numeric",
    attributes: {
      "data-sort-value": "2000"
    }
  }
]
]
}) }} 

You can configure this component using the Nunjucks macro arguments

When to use this component

Use this when sorting is needed to help find data within a large table of data. This might be useful in combination with the filter pattern.

How it works

There are 2 ways to use the add another component. You can use HTML or, if you’re using Nunjucks, you can use the Nunjucks macro.

Research on this component

To be added.

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system channel on Slack or email the Design System team on design-sytem@hmcts.net