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.

The example shown applies a tracking attribute specifically for use by Google Tag Manager in Content Publisher.

Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the track click script.

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