Components Sortable table

Last updated: 8 January 2021

<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.