Table
Default
Svelte code
<script>
import { Table } from '@danboscaro/govuk-svelte'
</script>
<Table {...{
rows: [
[
{
text: "January"
},
{
text: "£85",
format: "numeric"
},
{
text: "£95",
format: "numeric"
}
],
[
{
text: "February"
},
{
text: "£75",
format: "numeric"
},
{
text: "£55",
format: "numeric"
}
],
[
{
text: "March"
},
{
text: "£165",
format: "numeric"
},
{
text: "£125",
format: "numeric"
}
]
]
}} />
Table with head
Svelte code
<script>
import { Table } from '@danboscaro/govuk-svelte'
</script>
<Table {...{
head: [
{
text: "Month you apply"
},
{
text: "Rate for bicycles",
format: "numeric"
},
{
text: "Rate for vehicles",
format: "numeric"
}
],
rows: [
[
{
text: "January"
},
{
text: "£85",
format: "numeric"
},
{
text: "£95",
format: "numeric"
}
],
[
{
text: "February"
},
{
text: "£75",
format: "numeric"
},
{
text: "£55",
format: "numeric"
}
],
[
{
text: "March"
},
{
text: "£165",
format: "numeric"
},
{
text: "£125",
format: "numeric"
}
]
]
}} />
Table with head and caption
Svelte code
<script>
import { Table } from '@danboscaro/govuk-svelte'
</script>
<Table {...{
caption: "Caption 1: Months and rates",
captionClasses: "govuk-heading-m",
firstCellIsHeader: true,
head: [
{
text: "Month you apply"
},
{
text: "Rate for bicycles",
format: "numeric"
},
{
text: "Rate for vehicles",
format: "numeric"
}
],
rows: [
[
{
text: "January"
},
{
text: "£85",
format: "numeric"
},
{
text: "£95",
format: "numeric"
}
],
[
{
text: "February"
},
{
text: "£75",
format: "numeric"
},
{
text: "£55",
format: "numeric"
}
],
[
{
text: "March"
},
{
text: "£165",
format: "numeric"
},
{
text: "£125",
format: "numeric"
}
]
]
}} />