Sortable table

When to use this component

Use the sortable table component to display tabular data that users can sort by column.

When to not use this component

The sortable table component allows users to sort data by column. Before using this component, consider whether users actually need to sort the data.

If users need to filter the data, consider using a different solution, such as a search component or combining with radios.

How it works

The sortable table allows users to sort data by clicking on column headers.

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.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

Sortable table example

Sortable table example

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 page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

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

{% endblock %}

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.