Components Sortable table
<table class="govuk-table" data-module="moj-sortable-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">Elevation</th>
<th scope="col" class="govuk-table__header" aria-sort="none">Continent</th>
<th scope="col" class="govuk-table__header govuk-table__header--numeric" aria-sort="none">First summit</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">Aconcagua</td>
<td class="govuk-table__cell" data-sort-value="6961">6,961 meters</td>
<td class="govuk-table__cell">South America</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1897">1897</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Denali</td>
<td class="govuk-table__cell" data-sort-value="6194">6,194 meters</td>
<td class="govuk-table__cell">North America</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1913">1913</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Elbrus</td>
<td class="govuk-table__cell" data-sort-value="5642">5,642 meters</td>
<td class="govuk-table__cell">Europe</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1874">1874</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Everest</td>
<td class="govuk-table__cell" data-sort-value="8850">8,850 meters</td>
<td class="govuk-table__cell">Asia</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1953">1953</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Kilimanjaro</td>
<td class="govuk-table__cell" data-sort-value="5895">5,895 meters</td>
<td class="govuk-table__cell">Africa</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1889">1889</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Puncak Jaya</td>
<td class="govuk-table__cell" data-sort-value="4884">4,884 meters</td>
<td class="govuk-table__cell">Australia</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1962">1962</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Vinson</td>
<td class="govuk-table__cell" data-sort-value="4897">4,897 meters</td>
<td class="govuk-table__cell">Antarctica</td>
<td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1966">1966</td>
</tr>
</tbody>
</table>
{%- from "govuk/components/table/macro.njk" import govukTable -%}
{{ govukTable({
attributes: {
'data-module': 'moj-sortable-table'
},
head: [
{
text: "Name",
attributes: {
"aria-sort": "ascending"
}
},
{
text: "Elevation",
attributes: {
"aria-sort": "none"
}
},
{
text: "Continent",
attributes: {
"aria-sort": "none"
}
},
{
text: "First summit",
attributes: {
"aria-sort": "none"
},
format: "numeric"
}
],
rows: [
[
{
text: "Aconcagua"
},
{
text: "6,961 meters",
attributes: {
"data-sort-value": "6961"
}
},
{
text: "South America"
},
{
text: "1897",
format: "numeric",
attributes: {
"data-sort-value": "1897"
}
}
],
[
{
text: "Denali"
},
{
text: "6,194 meters",
attributes: {
"data-sort-value": "6194"
}
},
{
text: "North America"
},
{
text: "1913",
format: "numeric",
attributes: {
"data-sort-value": "1913"
}
}
],
[
{
text: "Elbrus"
},
{
text: "5,642 meters",
attributes: {
"data-sort-value": "5642"
}
},
{
text: "Europe"
},
{
text: "1874",
format: "numeric",
attributes: {
"data-sort-value": "1874"
}
}
],
[
{
text: "Everest"
},
{
text: "8,850 meters",
attributes: {
"data-sort-value": "8850"
}
},
{
text: "Asia"
},
{
text: "1953",
format: "numeric",
attributes: {
"data-sort-value": "1953"
}
}
],
[
{
text: "Kilimanjaro"
},
{
text: "5,895 meters",
attributes: {
"data-sort-value": "5895"
}
},
{
text: "Africa"
},
{
text: "1889",
format: "numeric",
attributes: {
"data-sort-value": "1889"
}
}
],
[
{
text: "Puncak Jaya"
},
{
text: "4,884 meters",
attributes: {
"data-sort-value": "4884"
}
},
{
text: "Australia"
},
{
text: "1962",
format: "numeric",
attributes: {
"data-sort-value": "1962"
}
}
],
[
{
text: "Vinson"
},
{
text: "4,897 meters",
attributes: {
"data-sort-value": "4897"
}
},
{
text: "Antarctica"
},
{
text: "1966",
format: "numeric",
attributes: {
"data-sort-value": "1966"
}
}
]
]
}) }}
This component is in the ‘Assets’ tab in the MoJ Figma Kit.
If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.
When to use
Use the sortable table component to let users sort columns in ascending or descending order.
Use this component 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 to use
If you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks table macro.
Get help and contribute
Get help
You can contact the MoJ Design System team for help or support using this component.
Help improve this component
The MoJ Design System team would like to hear:
- how you have used this component in your service
- any feedback you have about its usage, for example accessibility or ideas for improvement
Add these comments to the sortable table discussion on GitHub.