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