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