Sortable table

When to use this component

Use the sortable table component to let users sort columns in ascending or descending order. This may be useful to help find data within a large table of data.

When to not use this component

The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.

Asking questions means you're less likely to need to use the select component, and can consider using a different solution, such as radios.

How it works

If you use the select component for settings, you can make an option pre-selected by default when users first see it.

If you use the select component for questions, you should not pre-select any of the options in case it influences users' answers.

Copy and amend the HTML examples

Choose the appropriate example from this page and copy the HTML directly into your web template. Read about layouts for more information about how to structure your web template.

If the component needs to submit to a field in CRM, replace the highlighted schema-name text in the example HTML with the target field schema name. Do not remove any prepended or appended text to the schema name. For example, if the id attribute is displayed as schema-name-error in the example, the value should still contain -error after the schema name has been replaced (dfe_field-error).

This step is essential for the custom portal helper framework to validate and submit data to CRM. Read about data validation and submitting data to CRM.

Sortable table component

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 layout and does not include additional liquid items which are common place on a CRM Portal, for example, authenticated user, web role, or parameter checks 
      
{% extends 'DfE/Layout/2ColumnWideLeft' %}

{% block main %}

  ## HTML content goes here ##

{% endblock %}