Components Sortable table

Open this example in a new window

<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"
        }
      }
    ]
  ]
}) }}

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.