1. Component Guide
  2. Table
  3. With sortable head
Table example

With sortable head

This option allows links to be added to the table headers for sorting. Sorting must be handled server side, it is not done by the component.

How it looks (preview)

Month you apply Rate for bicycles Rate for vehicles
January Not set £95
February £75 £55
March £125 £60
April £135 £62
May £150 £80

How to call this example

<%= render "govuk_publishing_components/components/table", {
  sortable: true,
  head: [
    {
      text: "Month you apply"
    },
    {
      text: "Rate for bicycles",
      format: "numeric",
      sort_direction: "descending",
      href: "/?sort_direction=desc",
      data_attributes: {
        tracking: "UTM-123A"
      }
    },
    {
      text: "Rate for vehicles",
      format: "numeric",
      href: "/?sort_direction=desc",
      data_attributes: {
        tracking: "UTM-123B"
      }
    }
  ],
  rows: [
    [
      {
        text: "January"
      },
      {
        text: null,
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£125",
        format: "numeric"
      },
      {
        text: "£60",
        format: "numeric"
      }
    ],
    [
      {
        text: "April"
      },
      {
        text: "£135",
        format: "numeric"
      },
      {
        text: "£62",
        format: "numeric"
      }
    ],
    [
      {
        text: "May"
      },
      {
        text: "£150",
        format: "numeric"
      },
      {
        text: "£80",
        format: "numeric"
      }
    ]
  ]
} %>