ComponentTables
140 of 140 upstream examples match.
Razor component: <NhsukTables>
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
]
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"striped": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true,
"striped": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"responsive": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true,
"responsive": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"responsive": true,
"striped": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"variant": "reverse"
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
Default
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
Scrolling
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
]
}) }}
Scrolling
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"striped": true
}) }}
Scrolling
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"variant": "reverse"
}) }}
Scrolling as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left"
},
{
"text": "MenB",
"format": "numeric",
"align": "left"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
]
}) }}
Scrolling as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left"
},
{
"text": "MenB",
"format": "numeric",
"align": "left"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
],
"striped": true
}) }}
Scrolling as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left"
},
{
"text": "MenB",
"format": "numeric",
"align": "left"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
],
"responsive": true
}) }}
Scrolling (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
]
}) }}
Scrolling (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"striped": true
}) }}
Scrolling (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation"
},
{
"text": "2013 to 2014",
"format": "numeric"
},
{
"text": "2014 to 2015",
"format": "numeric"
},
{
"text": "2015 to 2016",
"format": "numeric"
},
{
"text": "2016 to 2017",
"format": "numeric"
},
{
"text": "2017 to 2018",
"format": "numeric"
},
{
"text": "2018 to 2019",
"format": "numeric"
},
{
"text": "2019 to 2020",
"format": "numeric"
},
{
"text": "2020 to 2021",
"format": "numeric"
},
{
"text": "2021 to 2022",
"format": "numeric"
},
{
"text": "2022 to 2023",
"format": "numeric"
},
{
"text": "2023 to 2024",
"format": "numeric"
},
{
"text": "2024 to 2025",
"format": "numeric"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"variant": "reverse"
}) }}
Scrolling sortable
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
]
}) }}
Scrolling sortable
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"striped": true
}) }}
Scrolling sortable
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"variant": "reverse"
}) }}
Scrolling sortable as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "MenB",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
]
}) }}
Scrolling sortable as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "MenB",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
],
"striped": true
}) }}
Scrolling sortable as a card
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
last-row-border="false"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Leeds",
Size = "m",
},
Actions = new CardActionsOptions
{
Items = [
new CardActionsItemsItem
{
Text = "Edit",
Href = "#/view/leeds",
},
],
},
})"
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-card-caption",
Text = "Vaccine types (12 months)",
Size = "s",
})"
LastRowBorder="false"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Location",
},
new TablesHeadItem
{
Text = "6‑in‑1",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "MenB",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Pneumococcal",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "Rotavirus",
Format = "numeric",
Align = "left",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "91.30%",
},
new TablesRowsItem
{
Text = "91.00%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "88.80%",
},
],
[
new TablesRowsItem
{
Text = "Yorkshire",
},
new TablesRowsItem
{
Text = "91.90%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "94.20%",
},
new TablesRowsItem
{
Text = "89.20%",
},
],
[
new TablesRowsItem
{
Text = "Leeds",
},
new TablesRowsItem
{
Text = "88.40%",
},
new TablesRowsItem
{
Text = "88.50%",
},
new TablesRowsItem
{
Text = "92.20%",
},
new TablesRowsItem
{
Text = "85.60%",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Leeds",
"size": "m"
},
"actions": {
"items": [
{
"text": "Edit",
"href": "#/view/leeds"
}
]
}
},
"caption": {
"id": "scrolling-card-caption",
"text": "Vaccine types (12 months)",
"size": "s"
},
"lastRowBorder": false,
"scroll": true,
"head": [
{
"text": "Location"
},
{
"text": "6‑in‑1",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "MenB",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Pneumococcal",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
},
{
"text": "Rotavirus",
"format": "numeric",
"align": "left",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "91.30%"
},
{
"text": "91.00%"
},
{
"text": "93.10%"
},
{
"text": "88.80%"
}
],
[
{
"text": "Yorkshire"
},
{
"text": "91.90%"
},
{
"text": "91.80%"
},
{
"text": "94.20%"
},
{
"text": "89.20%"
}
],
[
{
"text": "Leeds"
},
{
"text": "88.40%"
},
{
"text": "88.50%"
},
{
"text": "92.20%"
},
{
"text": "85.60%"
}
]
],
"responsive": true
}) }}
Scrolling sortable (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
]
}) }}
Scrolling sortable (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"striped": true
}) }}
Scrolling sortable (full width)
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
first-cell-is-header="true"
scroll="true"
head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Id = "scrolling-sortable-full-width-caption",
Text = "Childhood vaccination coverage by nation",
Size = "m",
})"
FirstCellIsHeader="true"
Scroll="true"
Head="@([
new TablesHeadItem
{
Text = "Nation",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "2013 to 2014",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2014 to 2015",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2015 to 2016",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2016 to 2017",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2017 to 2018",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2018 to 2019",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2019 to 2020",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2020 to 2021",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2021 to 2022",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2022 to 2023",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2023 to 2024",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "2024 to 2025",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "England",
},
new TablesRowsItem
{
Text = "94.34%",
},
new TablesRowsItem
{
Text = "94.23%",
},
new TablesRowsItem
{
Text = "93.56%",
},
new TablesRowsItem
{
Text = "93.41%",
},
new TablesRowsItem
{
Text = "93.12%",
},
new TablesRowsItem
{
Text = "92.09%",
},
new TablesRowsItem
{
Text = "92.57%",
},
new TablesRowsItem
{
Text = "92.04%",
},
new TablesRowsItem
{
Text = "91.84%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.22%",
},
new TablesRowsItem
{
Text = "91.30%",
},
],
[
new TablesRowsItem
{
Text = "Northern Ireland",
},
new TablesRowsItem
{
Text = "97.48%",
},
new TablesRowsItem
{
Text = "96.84%",
},
new TablesRowsItem
{
Text = "97.22%",
},
new TablesRowsItem
{
Text = "97.04%",
},
new TablesRowsItem
{
Text = "96.20%",
},
new TablesRowsItem
{
Text = "94.52%",
},
new TablesRowsItem
{
Text = "94.45%",
},
new TablesRowsItem
{
Text = "94.53%",
},
new TablesRowsItem
{
Text = "93.52%",
},
new TablesRowsItem
{
Text = "93.10%",
},
new TablesRowsItem
{
Text = "91.80%",
},
new TablesRowsItem
{
Text = "91.00%",
},
],
[
new TablesRowsItem
{
Text = "Scotland",
},
new TablesRowsItem
{
Text = "97.51%",
},
new TablesRowsItem
{
Text = "97.39%",
},
new TablesRowsItem
{
Text = "97.15%",
},
new TablesRowsItem
{
Text = "96.77%",
},
new TablesRowsItem
{
Text = "96.51%",
},
new TablesRowsItem
{
Text = "95.80%",
},
new TablesRowsItem
{
Text = "96.23%",
},
new TablesRowsItem
{
Text = "96.54%",
},
new TablesRowsItem
{
Text = "96.32%",
},
new TablesRowsItem
{
Text = "95.55%",
},
new TablesRowsItem
{
Text = "94.84%",
},
new TablesRowsItem
{
Text = "94.50%",
},
],
[
new TablesRowsItem
{
Text = "Wales",
},
new TablesRowsItem
{
Text = "96.70%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.57%",
},
new TablesRowsItem
{
Text = "96.34%",
},
new TablesRowsItem
{
Text = "95.92%",
},
new TablesRowsItem
{
Text = "95.42%",
},
new TablesRowsItem
{
Text = "95.77%",
},
new TablesRowsItem
{
Text = "95.56%",
},
new TablesRowsItem
{
Text = "95.18%",
},
new TablesRowsItem
{
Text = "94.47%",
},
new TablesRowsItem
{
Text = "94.19%",
},
new TablesRowsItem
{
Text = "94.10%",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"id": "scrolling-sortable-full-width-caption",
"text": "Childhood vaccination coverage by nation",
"size": "m"
},
"firstCellIsHeader": true,
"scroll": true,
"head": [
{
"text": "Nation",
"sort": "ascending"
},
{
"text": "2013 to 2014",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2014 to 2015",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2015 to 2016",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2016 to 2017",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2017 to 2018",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2018 to 2019",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2019 to 2020",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2020 to 2021",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2021 to 2022",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2022 to 2023",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2023 to 2024",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "2024 to 2025",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "England"
},
{
"text": "94.34%"
},
{
"text": "94.23%"
},
{
"text": "93.56%"
},
{
"text": "93.41%"
},
{
"text": "93.12%"
},
{
"text": "92.09%"
},
{
"text": "92.57%"
},
{
"text": "92.04%"
},
{
"text": "91.84%"
},
{
"text": "91.80%"
},
{
"text": "91.22%"
},
{
"text": "91.30%"
}
],
[
{
"text": "Northern\u00A0Ireland"
},
{
"text": "97.48%"
},
{
"text": "96.84%"
},
{
"text": "97.22%"
},
{
"text": "97.04%"
},
{
"text": "96.20%"
},
{
"text": "94.52%"
},
{
"text": "94.45%"
},
{
"text": "94.53%"
},
{
"text": "93.52%"
},
{
"text": "93.10%"
},
{
"text": "91.80%"
},
{
"text": "91.00%"
}
],
[
{
"text": "Scotland"
},
{
"text": "97.51%"
},
{
"text": "97.39%"
},
{
"text": "97.15%"
},
{
"text": "96.77%"
},
{
"text": "96.51%"
},
{
"text": "95.80%"
},
{
"text": "96.23%"
},
{
"text": "96.54%"
},
{
"text": "96.32%"
},
{
"text": "95.55%"
},
{
"text": "94.84%"
},
{
"text": "94.50%"
}
],
[
{
"text": "Wales"
},
{
"text": "96.70%"
},
{
"text": "96.57%"
},
{
"text": "96.57%"
},
{
"text": "96.34%"
},
{
"text": "95.92%"
},
{
"text": "95.42%"
},
{
"text": "95.77%"
},
{
"text": "95.56%"
},
{
"text": "95.18%"
},
{
"text": "94.47%"
},
{
"text": "94.19%"
},
{
"text": "94.10%"
}
]
],
"variant": "reverse"
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
]
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"striped": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true,
"striped": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| NameLaura Stone | Date of birth4 January 1986 |
| NameEmma Katie-Brown | Date of birth7 February 1976 |
| NameDavid Chen | Date of birth19 March 1981 |
| NameMichael Thompson | Date of birth6 December 1964 |
| NameJuan Martinez | Date of birth18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"responsive": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| NameLaura Stone | Date of birth4 January 1986 |
| NameEmma Katie-Brown | Date of birth7 February 1976 |
| NameDavid Chen | Date of birth19 March 1981 |
| NameMichael Thompson | Date of birth6 December 1964 |
| NameJuan Martinez | Date of birth18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true,
"responsive": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| NameLaura Stone | Date of birth4 January 1986 |
| NameEmma Katie-Brown | Date of birth7 February 1976 |
| NameDavid Chen | Date of birth19 March 1981 |
| NameMichael Thompson | Date of birth6 December 1964 |
| NameJuan Martinez | Date of birth18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"responsive": true,
"striped": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| NameLaura Stone | Date of birth4 January 1986 |
| NameEmma Katie-Brown | Date of birth7 February 1976 |
| NameDavid Chen | Date of birth19 March 1981 |
| NameMichael Thompson | Date of birth6 December 1964 |
| NameJuan Martinez | Date of birth18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"variant": "reverse"
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
Sortable
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
},
new TablesRowsItem
{
Text = "4 January 1986",
},
],
[
new TablesRowsItem
{
Text = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
},
new TablesRowsItem
{
Text = "7 February 1976",
},
],
[
new TablesRowsItem
{
Text = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
},
new TablesRowsItem
{
Text = "19 March 1981",
},
],
[
new TablesRowsItem
{
Text = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
},
new TablesRowsItem
{
Text = "6 December 1964",
},
],
[
new TablesRowsItem
{
Text = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
},
new TablesRowsItem
{
Text = "18 April 1975",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
{
"text": "11:00"
},
{
"text": "Laura Stone"
},
{
"text": "4 January 1986"
}
],
[
{
"text": "11:30"
},
{
"text": "Emma Katie-Brown"
},
{
"text": "7 February 1976"
}
],
[
{
"text": "13:10"
},
{
"text": "David Chen"
},
{
"text": "19 March 1981"
}
],
[
{
"text": "13:40"
},
{
"text": "Michael Thompson"
},
{
"text": "6 December 1964"
}
],
[
{
"text": "14:20"
},
{
"text": "Juan Martinez"
},
{
"text": "18 April 1975"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
]
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"striped": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true,
"striped": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"responsive": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true,
"responsive": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"responsive": true,
"striped": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"variant": "reverse"
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
Sortable server-side
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
Href = "#",
Sort = "descending",
Width = "one-half",
},
new TablesHeadItem
{
Text = "Last log in",
Href = "#",
Sort = "true",
Align = "right",
Width = "one-third",
Classes = "nhsuk-u-nowrap",
},
new TablesHeadItem
{
VisuallyHiddenText = "Action",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Zadie Munroe",
},
new TablesRowsItem
{
Text = "7 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Zadie Munroe",
},
],
[
new TablesRowsItem
{
Text = "Yolanda Pierce",
},
new TablesRowsItem
{
Text = "13 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Yolanda Pierce",
},
],
[
new TablesRowsItem
{
Text = "Xanthe Beaumont",
},
new TablesRowsItem
{
Text = "19 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Xanthe Beaumont",
},
],
[
new TablesRowsItem
{
Text = "Wendell Shaw",
},
new TablesRowsItem
{
Text = "25 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Wendell Shaw",
},
],
[
new TablesRowsItem
{
Text = "Val Cruz",
},
new TablesRowsItem
{
Text = "1 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Val Cruz",
},
],
[
new TablesRowsItem
{
Text = "Uta Brennan",
},
new TablesRowsItem
{
Text = "7 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Uta Brennan",
},
],
[
new TablesRowsItem
{
Text = "Tamsin Foley-Whitworth",
},
new TablesRowsItem
{
Text = "14 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Tamsin Foley-Whitworth",
},
],
[
new TablesRowsItem
{
Text = "Stellan Park",
},
new TablesRowsItem
{
Text = "20 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Stellan Park",
},
],
[
new TablesRowsItem
{
Text = "Ro Nkosi",
},
new TablesRowsItem
{
Text = "28 June 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Ro Nkosi",
},
],
[
new TablesRowsItem
{
Text = "Reuben Tate",
},
new TablesRowsItem
{
Text = "1 May 2026",
},
new TablesRowsItem
{
Href = "#",
Text = "Change",
VisuallyHiddenText = "details for Reuben Tate",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Name",
"href": "#",
"sort": "descending",
"width": "one-half"
},
{
"text": "Last log in",
"href": "#",
"sort": true,
"align": "right",
"width": "one-third",
"classes": "nhsuk-u-nowrap"
},
{
"visuallyHiddenText": "Action"
}
],
"rows": [
[
{
"text": "Zadie Munroe"
},
{
"text": "7 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Zadie Munroe"
}
],
[
{
"text": "Yolanda Pierce"
},
{
"text": "13 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Yolanda Pierce"
}
],
[
{
"text": "Xanthe Beaumont"
},
{
"text": "19 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Xanthe Beaumont"
}
],
[
{
"text": "Wendell Shaw"
},
{
"text": "25 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Wendell Shaw"
}
],
[
{
"text": "Val Cruz"
},
{
"text": "1 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Val Cruz"
}
],
[
{
"text": "Uta Brennan"
},
{
"text": "7 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Uta Brennan"
}
],
[
{
"text": "Tamsin Foley-Whitworth"
},
{
"text": "14 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Tamsin Foley-Whitworth"
}
],
[
{
"text": "Stellan Park"
},
{
"text": "20 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Stellan Park"
}
],
[
{
"text": "Ro Nkosi"
},
{
"text": "28 June 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Ro Nkosi"
}
],
[
{
"text": "Reuben Tate"
},
{
"text": "1 May 2026"
},
{
"href": "#",
"text": "Change",
"visuallyHiddenText": "details for Reuben Tate"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
Sortable with numeric format
Prescription prepayment certificate (PPC) charges(Column headers are sortable)|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "New charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
]
}) }}
Sortable with numeric format
Prescription prepayment certificate (PPC) charges(Column headers are sortable)|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "New charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true
}) }}
Sortable with numeric format and missing data
Prescription prepayment certificate (PPC) charges(Column headers are sortable)|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "New charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
]
}) }}
Sortable with numeric format and missing data
Prescription prepayment certificate (PPC) charges(Column headers are sortable)|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "New charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true
}) }}
Sortable with numeric format and sort values
Prescription prepayment certificate (PPC) charges(Column headers are sortable)|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
SortValue = "3",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
SortValue = "31.25",
},
new TablesRowsItem
{
Text = "£32.05",
SortValue = "32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
SortValue = "12",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
SortValue = "111.60",
},
new TablesRowsItem
{
Text = "£114.50",
SortValue = "114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
SortValue = "100",
},
new TablesRowsItem
{
Text = "£19.30",
SortValue = "19.30",
},
new TablesRowsItem
{
Text = "£19.80",
SortValue = "19.80",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
SortValue = "3",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
SortValue = "31.25",
},
new TablesRowsItem
{
Text = "£32.05",
SortValue = "32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
SortValue = "12",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
SortValue = "111.60",
},
new TablesRowsItem
{
Text = "£114.50",
SortValue = "114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
SortValue = "100",
},
new TablesRowsItem
{
Text = "£19.30",
SortValue = "19.30",
},
new TablesRowsItem
{
Text = "£19.80",
SortValue = "19.80",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item",
"sort": "ascending"
},
{
"text": "Current charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
},
{
"text": "New charge",
"format": "numeric",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "3-month",
"sortValue": "3",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25",
"sortValue": "31.25"
},
{
"text": "£32.05",
"sortValue": "32.05"
}
],
[
{
"text": "12-month",
"sortValue": "12",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60",
"sortValue": "111.60"
},
{
"text": "£114.50",
"sortValue": "114.50"
}
],
[
{
"text": "HRT",
"sortValue": "100"
},
{
"text": "£19.30",
"sortValue": "19.30"
},
{
"text": "£19.80",
"sortValue": "19.80"
}
]
]
}) }}
Sortable with sort values
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Sort = "true",
SortNext = "descending",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "11:00am",
SortValue = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
SortValue = "Stone, Laura",
},
new TablesRowsItem
{
Text = "4 January 1986",
SortValue = "1986-01-04",
},
],
[
new TablesRowsItem
{
Text = "11:30am",
SortValue = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
SortValue = "Katie-Brown, Emma",
},
new TablesRowsItem
{
Text = "7 February 1976",
SortValue = "1976-02-07",
},
],
[
new TablesRowsItem
{
Text = "1:10pm",
SortValue = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
SortValue = "Chen, David",
},
new TablesRowsItem
{
Text = "19 March 1981",
SortValue = "1981-03-19",
},
],
[
new TablesRowsItem
{
Text = "1:40pm",
SortValue = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
SortValue = "Thompson, Michael",
},
new TablesRowsItem
{
Text = "6 December 1964",
SortValue = "1964-12-06",
},
],
[
new TablesRowsItem
{
Text = "2:20pm",
SortValue = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
SortValue = "Martinez, Juan",
},
new TablesRowsItem
{
Text = "18 April 1975",
SortValue = "1975-04-18",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Sort = "true",
SortNext = "descending",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "11:00am",
SortValue = "11:00",
},
new TablesRowsItem
{
Text = "Laura Stone",
SortValue = "Stone, Laura",
},
new TablesRowsItem
{
Text = "4 January 1986",
SortValue = "1986-01-04",
},
],
[
new TablesRowsItem
{
Text = "11:30am",
SortValue = "11:30",
},
new TablesRowsItem
{
Text = "Emma Katie-Brown",
SortValue = "Katie-Brown, Emma",
},
new TablesRowsItem
{
Text = "7 February 1976",
SortValue = "1976-02-07",
},
],
[
new TablesRowsItem
{
Text = "1:10pm",
SortValue = "13:10",
},
new TablesRowsItem
{
Text = "David Chen",
SortValue = "Chen, David",
},
new TablesRowsItem
{
Text = "19 March 1981",
SortValue = "1981-03-19",
},
],
[
new TablesRowsItem
{
Text = "1:40pm",
SortValue = "13:40",
},
new TablesRowsItem
{
Text = "Michael Thompson",
SortValue = "Thompson, Michael",
},
new TablesRowsItem
{
Text = "6 December 1964",
SortValue = "1964-12-06",
},
],
[
new TablesRowsItem
{
Text = "2:20pm",
SortValue = "14:20",
},
new TablesRowsItem
{
Text = "Juan Martinez",
SortValue = "Martinez, Juan",
},
new TablesRowsItem
{
Text = "18 April 1975",
SortValue = "1975-04-18",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"sort": true,
"sortNext": "descending"
}
],
"rows": [
[
{
"text": "11:00am",
"sortValue": "11:00"
},
{
"text": "Laura Stone",
"sortValue": "Stone, Laura"
},
{
"text": "4 January 1986",
"sortValue": "1986-01-04"
}
],
[
{
"text": "11:30am",
"sortValue": "11:30"
},
{
"text": "Emma Katie-Brown",
"sortValue": "Katie-Brown, Emma"
},
{
"text": "7 February 1976",
"sortValue": "1976-02-07"
}
],
[
{
"text": "1:10pm",
"sortValue": "13:10"
},
{
"text": "David Chen",
"sortValue": "Chen, David"
},
{
"text": "19 March 1981",
"sortValue": "1981-03-19"
}
],
[
{
"text": "1:40pm",
"sortValue": "13:40"
},
{
"text": "Michael Thompson",
"sortValue": "Thompson, Michael"
},
{
"text": "6 December 1964",
"sortValue": "1964-12-06"
}
],
[
{
"text": "2:20pm",
"sortValue": "14:20"
},
{
"text": "Juan Martinez",
"sortValue": "Martinez, Juan"
},
{
"text": "18 April 1975",
"sortValue": "1975-04-18"
}
]
]
}) }}
Sortable with string items
Appointments(Column headers are sortable)|
| Laura Stone | 4 January 1986 |
| Emma Katie-Brown | 7 February 1976 |
| David Chen | 19 March 1981 |
| Michael Thompson | 6 December 1964 |
| Juan Martinez | 18 April 1975 |
Razor Pages and MVC
<nhsuk-tables
caption="Appointments"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
rows="@([
[
"11:00",
"Laura Stone",
"4 January 1986",
],
[
"11:30",
"Emma Katie-Brown",
"7 February 1976",
],
[
"13:10",
"David Chen",
"19 March 1981",
],
[
"13:40",
"Michael Thompson",
"6 December 1964",
],
[
"14:20",
"Juan Martinez",
"18 April 1975",
],
])"
/>
Blazor
<NhsukTables
Caption="@("Appointments")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Time",
Sort = "ascending",
},
new TablesHeadItem
{
Text = "Name",
Sort = "true",
},
new TablesHeadItem
{
Text = "Date of birth",
Classes = "nhsuk-u-nowrap",
},
])"
Rows="@([
[
"11:00",
"Laura Stone",
"4 January 1986",
],
[
"11:30",
"Emma Katie-Brown",
"7 February 1976",
],
[
"13:10",
"David Chen",
"19 March 1981",
],
[
"13:40",
"Michael Thompson",
"6 December 1964",
],
[
"14:20",
"Juan Martinez",
"18 April 1975",
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Appointments",
"firstCellIsHeader": true,
"head": [
{
"text": "Time",
"sort": "ascending"
},
{
"text": "Name",
"sort": true
},
{
"text": "Date of birth",
"classes": "nhsuk-u-nowrap"
}
],
"rows": [
[
"11:00",
"Laura Stone",
"4 January 1986"
],
[
"11:30",
"Emma Katie-Brown",
"7 February 1976"
],
[
"13:10",
"David Chen",
"19 March 1981"
],
[
"13:40",
"Michael Thompson",
"6 December 1964"
],
[
"14:20",
"Juan Martinez",
"18 April 1975"
]
]
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
]
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"striped": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true,
"striped": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| How much?2.5ml (50mg) | How often?Max 3 times in 24 hours |
| How much?2.5ml (50mg) | How often?Max 3 to 4 times in 24 hours |
| How much?5ml (100mg) | How often?Max 3 times in 24 hours |
| How much?7.5ml (150mg) | How often?Max 3 times in 24 hours |
| How much?10ml (200mg) | How often?Max 3 times in 24 hours |
| How much?15ml (300mg) | How often?Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"responsive": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| How much?2.5ml (50mg) | How often?Max 3 times in 24 hours |
| How much?2.5ml (50mg) | How often?Max 3 to 4 times in 24 hours |
| How much?5ml (100mg) | How often?Max 3 times in 24 hours |
| How much?7.5ml (150mg) | How often?Max 3 times in 24 hours |
| How much?10ml (200mg) | How often?Max 3 times in 24 hours |
| How much?15ml (300mg) | How often?Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true,
"responsive": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| How much?2.5ml (50mg) | How often?Max 3 times in 24 hours |
| How much?2.5ml (50mg) | How often?Max 3 to 4 times in 24 hours |
| How much?5ml (100mg) | How often?Max 3 times in 24 hours |
| How much?7.5ml (150mg) | How often?Max 3 times in 24 hours |
| How much?10ml (200mg) | How often?Max 3 times in 24 hours |
| How much?15ml (300mg) | How often?Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"responsive": true,
"striped": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| How much?2.5ml (50mg) | How often?Max 3 times in 24 hours |
| How much?2.5ml (50mg) | How often?Max 3 to 4 times in 24 hours |
| How much?5ml (100mg) | How often?Max 3 times in 24 hours |
| How much?7.5ml (150mg) | How often?Max 3 times in 24 hours |
| How much?10ml (200mg) | How often?Max 3 times in 24 hours |
| How much?15ml (300mg) | How often?Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"variant": "reverse"
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
With column widths
Ibuprofen 100mg/5ml liquid dosages for children by age|
| 2.5ml (50mg) | Max 3 times in 24 hours |
| 2.5ml (50mg) | Max 3 to 4 times in 24 hours |
| 5ml (100mg) | Max 3 times in 24 hours |
| 7.5ml (150mg) | Max 3 times in 24 hours |
| 10ml (200mg) | Max 3 times in 24 hours |
| 15ml (300mg) | Max 3 times in 24 hours |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Ibuprofen 100mg/5ml liquid dosages for children by age",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Age",
Width = "one-third",
},
new TablesHeadItem
{
Text = "How much?",
Width = "one-quarter",
},
new TablesHeadItem
{
Text = "How often?",
},
])"
Rows="@([
[
new TablesRowsItem
{
Html = "3 to 5 months (weighing more than 5kg)",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "6 to 11 months",
},
new TablesRowsItem
{
Text = "2.5ml (50mg)",
},
new TablesRowsItem
{
Text = "Max 3 to 4 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "1 to 3 years",
},
new TablesRowsItem
{
Text = "5ml (100mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "4 to 6 years",
},
new TablesRowsItem
{
Text = "7.5ml (150mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "7 to 9 years",
},
new TablesRowsItem
{
Text = "10ml (200mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
[
new TablesRowsItem
{
Text = "10 to 11 years",
},
new TablesRowsItem
{
Text = "15ml (300mg)",
},
new TablesRowsItem
{
Text = "Max 3 times in 24 hours",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Ibuprofen 100mg/5ml liquid dosages for children by age",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Age",
"width": "one-third"
},
{
"text": "How much?",
"width": "one-quarter"
},
{
"text": "How often?"
}
],
"rows": [
[
{
"html": "3 to 5 months (weighing more than\u00A05kg)"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "6 to 11 months"
},
{
"text": "2.5ml (50mg)"
},
{
"text": "Max 3 to 4 times in 24 hours"
}
],
[
{
"text": "1 to 3 years"
},
{
"text": "5ml (100mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "4 to 6 years"
},
{
"text": "7.5ml (150mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "7 to 9 years"
},
{
"text": "10ml (200mg)"
},
{
"text": "Max 3 times in 24 hours"
}
],
[
{
"text": "10 to 11 years"
},
{
"text": "15ml (300mg)"
},
{
"text": "Max 3 times in 24 hours"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
With custom HTML
Nunjucks macro options|
| string | The ID of the table. |
| array | Required. The rows within the table component.
See macro options for rows. |
| array | Can be used to add a row of table header cells (<th>) at the top of the table component.
See macro options for head. |
| string | Caption text. |
| string | Classes for caption text size. Classes should correspond to the available typography heading classes. |
| string | If set to true, the first cell in each row will be a table header (<th>). |
| string | Classes to add to the table container. |
| object | HTML attributes (for example data attributes) to add to the table container. |
Razor Pages and MVC
<nhsuk-tables
caption="Nunjucks macro options"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
},
new TablesHeadItem
{
Text = "Type",
},
new TablesHeadItem
{
Text = "Description",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "id",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "The ID of the table.",
},
],
[
new TablesRowsItem
{
Text = "rows",
},
new TablesRowsItem
{
Text = "array",
},
new TablesRowsItem
{
Html = @"<strong>Required.</strong> The rows within the table component.
<a href=""#/macro-options"">See macro options for rows</a>.",
},
],
[
new TablesRowsItem
{
Text = "head",
},
new TablesRowsItem
{
Text = "array",
},
new TablesRowsItem
{
Html = @"Can be used to add a row of table header cells (<code><th></code>) at the top of the table component.
<a href=""#/macro-options"">See macro options for head</a>.",
},
],
[
new TablesRowsItem
{
Text = "caption",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Caption text.",
},
],
[
new TablesRowsItem
{
Text = "captionClasses",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Classes for caption text size. Classes should correspond to the available typography heading classes.",
},
],
[
new TablesRowsItem
{
Text = "firstCellIsHeader",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Html = "If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>).",
},
],
[
new TablesRowsItem
{
Text = "classes",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Classes to add to the table container.",
},
],
[
new TablesRowsItem
{
Text = "attributes",
},
new TablesRowsItem
{
Text = "object",
},
new TablesRowsItem
{
Text = " HTML attributes (for example data attributes) to add to the table container.",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Nunjucks macro options")"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
},
new TablesHeadItem
{
Text = "Type",
},
new TablesHeadItem
{
Text = "Description",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "id",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "The ID of the table.",
},
],
[
new TablesRowsItem
{
Text = "rows",
},
new TablesRowsItem
{
Text = "array",
},
new TablesRowsItem
{
Html = @"<strong>Required.</strong> The rows within the table component.
<a href=""#/macro-options"">See macro options for rows</a>.",
},
],
[
new TablesRowsItem
{
Text = "head",
},
new TablesRowsItem
{
Text = "array",
},
new TablesRowsItem
{
Html = @"Can be used to add a row of table header cells (<code><th></code>) at the top of the table component.
<a href=""#/macro-options"">See macro options for head</a>.",
},
],
[
new TablesRowsItem
{
Text = "caption",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Caption text.",
},
],
[
new TablesRowsItem
{
Text = "captionClasses",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Classes for caption text size. Classes should correspond to the available typography heading classes.",
},
],
[
new TablesRowsItem
{
Text = "firstCellIsHeader",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Html = "If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>).",
},
],
[
new TablesRowsItem
{
Text = "classes",
},
new TablesRowsItem
{
Text = "string",
},
new TablesRowsItem
{
Text = "Classes to add to the table container.",
},
],
[
new TablesRowsItem
{
Text = "attributes",
},
new TablesRowsItem
{
Text = "object",
},
new TablesRowsItem
{
Text = " HTML attributes (for example data attributes) to add to the table container.",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Nunjucks macro options",
"firstCellIsHeader": true,
"head": [
{
"text": "Name"
},
{
"text": "Type"
},
{
"text": "Description"
}
],
"rows": [
[
{
"text": "id"
},
{
"text": "string"
},
{
"text": "The ID of the table."
}
],
[
{
"text": "rows"
},
{
"text": "array"
},
{
"html": "<strong>Required.</strong> The rows within the table component.\n<a href=\"#/macro-options\">See macro options for rows</a>."
}
],
[
{
"text": "head"
},
{
"text": "array"
},
{
"html": "Can be used to add a row of table header cells (<code><th></code>) at the top of the table component.\n<a href=\"#/macro-options\">See macro options for head</a>."
}
],
[
{
"text": "caption"
},
{
"text": "string"
},
{
"text": "Caption text."
}
],
[
{
"text": "captionClasses"
},
{
"text": "string"
},
{
"text": "Classes for caption text size. Classes should correspond to the available typography heading classes."
}
],
[
{
"text": "firstCellIsHeader"
},
{
"text": "string"
},
{
"html": "If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>)."
}
],
[
{
"text": "classes"
},
{
"text": "string"
},
{
"text": "Classes to add to the table container."
}
],
[
{
"text": "attributes"
},
{
"text": "object"
},
{
"text": "\tHTML attributes (for example data attributes) to add to the table container."
}
]
]
}) }}
With empty items
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Date",
},
new TablesHeadItem
{
Text = "Vaccine",
},
null,
])"
rows="@([
[
new TablesRowsItem
{
Text = "10 July 2024",
},
new TablesRowsItem
{
Text = "RSV",
},
null,
],
[
null,
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Date",
},
new TablesHeadItem
{
Text = "Vaccine",
},
null,
])"
Rows="@([
[
new TablesRowsItem
{
Text = "10 July 2024",
},
new TablesRowsItem
{
Text = "RSV",
},
null,
],
[
null,
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Vaccinations given",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Date"
},
{
"text": "Vaccine"
},
false
],
"rows": [
[
{
"text": "10 July 2024"
},
{
"text": "RSV"
},
false
],
false
]
}) }}
With empty items and string items
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
first-cell-is-header="true"
head="@([
"Date",
"Vaccine",
null,
])"
rows="@([
[
"10 July 2024",
"RSV",
null,
],
[
null,
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
"Date",
"Vaccine",
null,
])"
Rows="@([
[
"10 July 2024",
"RSV",
null,
],
[
null,
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Vaccinations given",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
"Date",
"Vaccine",
false
],
"rows": [
[
"10 July 2024",
"RSV",
false
],
false
]
}) }}
With first cell as header
|
| 9am to 6pm |
| 9am to 6pm |
| 9am to 6pm |
| 9am to 6pm |
| 9am to 6pm |
| 9am to 1pm |
| Closed |
Razor Pages and MVC
<nhsuk-tables
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Day of the week",
},
new TablesHeadItem
{
Text = "Opening hours",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Monday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Tuesday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Wednesday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Thursday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Friday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Saturday",
},
new TablesRowsItem
{
Text = "9am to 1pm",
},
],
[
new TablesRowsItem
{
Text = "Sunday",
},
new TablesRowsItem
{
Text = "Closed",
},
],
])"
/>
Blazor
<NhsukTables
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Day of the week",
},
new TablesHeadItem
{
Text = "Opening hours",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Monday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Tuesday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Wednesday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Thursday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Friday",
},
new TablesRowsItem
{
Text = "9am to 6pm",
},
],
[
new TablesRowsItem
{
Text = "Saturday",
},
new TablesRowsItem
{
Text = "9am to 1pm",
},
],
[
new TablesRowsItem
{
Text = "Sunday",
},
new TablesRowsItem
{
Text = "Closed",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Day of the week"
},
{
"text": "Opening hours"
}
],
"rows": [
[
{
"text": "Monday"
},
{
"text": "9am to 6pm"
}
],
[
{
"text": "Tuesday"
},
{
"text": "9am to 6pm"
}
],
[
{
"text": "Wednesday"
},
{
"text": "9am to 6pm"
}
],
[
{
"text": "Thursday"
},
{
"text": "9am to 6pm"
}
],
[
{
"text": "Friday"
},
{
"text": "9am to 6pm"
}
],
[
{
"text": "Saturday"
},
{
"text": "9am to 1pm"
}
],
[
{
"text": "Sunday"
},
{
"text": "Closed"
}
]
]
}) }}
With missing data
Vaccinations given|
| RSV | Abrysvo |
| Flu | No data |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Date",
},
new TablesHeadItem
{
Text = "Vaccine",
},
new TablesHeadItem
{
Text = "Product",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "10 July 2024",
},
new TablesRowsItem
{
Text = "RSV",
},
new TablesRowsItem
{
Text = "Abrysvo",
},
],
[
new TablesRowsItem
{
Text = "6 September 2023",
},
new TablesRowsItem
{
Text = "Flu",
},
new TablesRowsItem
{
Text = "No data",
Classes = "nhsuk-u-secondary-text-colour",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Vaccinations given",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Date",
},
new TablesHeadItem
{
Text = "Vaccine",
},
new TablesHeadItem
{
Text = "Product",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "10 July 2024",
},
new TablesRowsItem
{
Text = "RSV",
},
new TablesRowsItem
{
Text = "Abrysvo",
},
],
[
new TablesRowsItem
{
Text = "6 September 2023",
},
new TablesRowsItem
{
Text = "Flu",
},
new TablesRowsItem
{
Text = "No data",
Classes = "nhsuk-u-secondary-text-colour",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Vaccinations given",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Date"
},
{
"text": "Vaccine"
},
{
"text": "Product"
}
],
"rows": [
[
{
"text": "10 July 2024"
},
{
"text": "RSV"
},
{
"text": "Abrysvo"
}
],
[
{
"text": "6 September 2023"
},
{
"text": "Flu"
},
{
"text": "No data",
"classes": "nhsuk-u-secondary-text-colour"
}
]
]
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
]
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"striped": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New charge£114.50 |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"responsive": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New charge£114.50 |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"responsive": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New charge£114.50 |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"responsive": true,
"striped": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New charge£114.50 |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"variant": "reverse"
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
With numeric format
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | £114.50 |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "£114.50",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "£114.50"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
]
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"striped": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New chargeNo data |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"responsive": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New chargeNo data |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"responsive": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New chargeNo data |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"responsive": true,
"striped": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| Current charge£31.25 | New charge£32.05 |
| Current charge£111.60 | New chargeNo data |
| Current charge£19.30 | New charge£19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"variant": "reverse"
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
With numeric format and missing data
Prescription prepayment certificate (PPC) charges|
| £31.25 | £32.05 |
| £111.60 | No data |
| £19.30 | £19.80 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Prescription prepayment certificate (PPC) charges",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Item",
},
new TablesHeadItem
{
Text = "Current charge",
Format = "numeric",
},
new TablesHeadItem
{
Text = "New charge",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "3-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£31.25",
},
new TablesRowsItem
{
Text = "£32.05",
},
],
[
new TablesRowsItem
{
Text = "12-month",
Classes = "nhsuk-u-nowrap",
},
new TablesRowsItem
{
Text = "£111.60",
},
new TablesRowsItem
{
Text = "No data",
Format = "string",
Classes = "nhsuk-u-secondary-text-colour",
},
],
[
new TablesRowsItem
{
Text = "HRT",
},
new TablesRowsItem
{
Text = "£19.30",
},
new TablesRowsItem
{
Text = "£19.80",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Prescription prepayment certificate (PPC) charges",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Item"
},
{
"text": "Current charge",
"format": "numeric"
},
{
"text": "New charge",
"format": "numeric"
}
],
"rows": [
[
{
"text": "3-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£31.25"
},
{
"text": "£32.05"
}
],
[
{
"text": "12-month",
"classes": "nhsuk-u-nowrap"
},
{
"text": "£111.60"
},
{
"text": "No data",
"format": "string",
"classes": "nhsuk-u-secondary-text-colour"
}
],
[
{
"text": "HRT"
},
{
"text": "£19.30"
},
{
"text": "£19.80"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
With numeric format (full width, past day)
Past day|
| David Francis | 3 | 0 |
| Paul Farmer | 1 | 0 |
| Rita Patel | 2 | 0 |
Razor Pages and MVC
<nhsuk-tables
caption="Past day"
head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "3",
},
new TablesRowsItem
{
Text = "0",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1",
},
new TablesRowsItem
{
Text = "0",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "2",
},
new TablesRowsItem
{
Text = "0",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Past day")"
Head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "3",
},
new TablesRowsItem
{
Text = "0",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1",
},
new TablesRowsItem
{
Text = "0",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "2",
},
new TablesRowsItem
{
Text = "0",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Past day",
"head": [
{
"text": "Case manager"
},
{
"text": "Cases opened",
"format": "numeric"
},
{
"text": "Cases closed",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "3"
},
{
"text": "0"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1"
},
{
"text": "0"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "2"
},
{
"text": "0"
}
]
]
}) }}
With numeric format (full width, past month)
Past month|
| David Francis | 98 | 95 |
| Paul Farmer | 122 | 131 |
| Rita Patel | 126 | 142 |
Razor Pages and MVC
<nhsuk-tables
caption="Past month"
head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "98",
},
new TablesRowsItem
{
Text = "95",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "122",
},
new TablesRowsItem
{
Text = "131",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "126",
},
new TablesRowsItem
{
Text = "142",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Past month")"
Head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "98",
},
new TablesRowsItem
{
Text = "95",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "122",
},
new TablesRowsItem
{
Text = "131",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "126",
},
new TablesRowsItem
{
Text = "142",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Past month",
"head": [
{
"text": "Case manager"
},
{
"text": "Cases opened",
"format": "numeric"
},
{
"text": "Cases closed",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "98"
},
{
"text": "95"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "122"
},
{
"text": "131"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "126"
},
{
"text": "142"
}
]
]
}) }}
With numeric format (full width, past week)
Past week|
| David Francis | 24 | 18 |
| Paul Farmer | 16 | 20 |
| Rita Patel | 24 | 27 |
Razor Pages and MVC
<nhsuk-tables
caption="Past week"
head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "24",
},
new TablesRowsItem
{
Text = "18",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "16",
},
new TablesRowsItem
{
Text = "20",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
new TablesRowsItem
{
Text = "27",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Past week")"
Head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "24",
},
new TablesRowsItem
{
Text = "18",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "16",
},
new TablesRowsItem
{
Text = "20",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
new TablesRowsItem
{
Text = "27",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Past week",
"head": [
{
"text": "Case manager"
},
{
"text": "Cases opened",
"format": "numeric"
},
{
"text": "Cases closed",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "24"
},
{
"text": "18"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "16"
},
{
"text": "20"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
},
{
"text": "27"
}
]
]
}) }}
With numeric format (full width, past year)
Past year|
| David Francis | 1380 | 1472 |
| Paul Farmer | 1129 | 1083 |
| Rita Patel | 1539 | 1265 |
Razor Pages and MVC
<nhsuk-tables
caption="Past year"
head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
new TablesRowsItem
{
Text = "1472",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
new TablesRowsItem
{
Text = "1083",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "1539",
},
new TablesRowsItem
{
Text = "1265",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Past year")"
Head="@([
new TablesHeadItem
{
Text = "Case manager",
},
new TablesHeadItem
{
Text = "Cases opened",
Format = "numeric",
},
new TablesHeadItem
{
Text = "Cases closed",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
new TablesRowsItem
{
Text = "1472",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
new TablesRowsItem
{
Text = "1083",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "1539",
},
new TablesRowsItem
{
Text = "1265",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Past year",
"head": [
{
"text": "Case manager"
},
{
"text": "Cases opened",
"format": "numeric"
},
{
"text": "Cases closed",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
},
{
"text": "1472"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
},
{
"text": "1083"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "1539"
},
{
"text": "1265"
}
]
]
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
]
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"striped": true
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"striped": true
}) }}
Without border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"responsive": true
}) }}
Without border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"responsive": true
}) }}
Without border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"responsive": true,
"striped": true
}) }}
Without border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"variant": "reverse"
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
Without border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
Border="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"border": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
]
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"striped": true
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"striped": true
}) }}
Without last row border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"responsive": true
}) }}
Without last row border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
responsive="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"responsive": true
}) }}
Without last row border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"responsive": true,
"striped": true
}) }}
Without last row border
Cases per manager|
| ManagerDavid Francis | Cases1380 |
| ManagerPaul Farmer | Cases1129 |
| ManagerRita Patel | Cases24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
responsive="true"
striped="true"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Responsive="true"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"responsive": true,
"striped": true
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"variant": "reverse"
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"variant": "reverse"
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"striped": true,
"variant": "reverse"
}) }}
Without last row border
Cases per manager|
| David Francis | 1380 |
| Paul Farmer | 1129 |
| Rita Patel | 24 |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
compact="true"
striped="true"
variant="reverse"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Cases per manager",
Classes = "nhsuk-u-visually-hidden",
})"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Manager",
},
new TablesHeadItem
{
Text = "Cases",
Format = "numeric",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "David Francis",
},
new TablesRowsItem
{
Text = "1380",
},
],
[
new TablesRowsItem
{
Text = "Paul Farmer",
},
new TablesRowsItem
{
Text = "1129",
},
],
[
new TablesRowsItem
{
Text = "Rita Patel",
},
new TablesRowsItem
{
Text = "24",
},
],
])"
Compact="true"
Striped="true"
Variant="reverse"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Cases per manager",
"classes": "nhsuk-u-visually-hidden"
},
"lastRowBorder": false,
"head": [
{
"text": "Manager"
},
{
"text": "Cases",
"format": "numeric"
}
],
"rows": [
[
{
"text": "David Francis"
},
{
"text": "1380"
}
],
[
{
"text": "Paul Farmer"
},
{
"text": "1129"
}
],
[
{
"text": "Rita Patel"
},
{
"text": "24"
}
]
],
"compact": true,
"striped": true,
"variant": "reverse"
}) }}
With string items
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
head="@([
"Skin symptoms",
"Possible cause",
])"
rows="@([
[
"Blisters on lips or around the mouth",
"Cold sores",
],
[
"Itchy, dry, cracked, sore",
"Eczema",
],
[
"Itchy blisters",
"Shingles, chickenpox",
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
"Skin symptoms",
"Possible cause",
])"
Rows="@([
[
"Blisters on lips or around the mouth",
"Cold sores",
],
[
"Itchy, dry, cracked, sore",
"Eczema",
],
[
"Itchy blisters",
"Shingles, chickenpox",
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
"Skin symptoms",
"Possible cause"
],
"rows": [
[
"Blisters on lips or around the mouth",
"Cold sores"
],
[
"Itchy, dry, cracked, sore",
"Eczema"
],
[
"Itchy blisters",
"Shingles, chickenpox"
]
]
}) }}
With tags
Tags|
| None |
Default
|
| red |
Rejected
|
| blue |
Pending
|
| green |
New
|
Razor Pages and MVC
<nhsuk-tables
caption="Tags"
first-cell-is-header="true"
head="@([
"Name",
"Colour",
"Tag",
])"
rows="@([
[
"Default",
"None",
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag"">
Default
</strong>
",
},
],
[
"Red",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">red</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--red"">
Rejected
</strong>
",
},
],
[
"Blue",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">blue</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--blue"">
Pending
</strong>
",
},
],
[
"Green",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">green</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--green"">
New
</strong>
",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@("Tags")"
FirstCellIsHeader="true"
Head="@([
"Name",
"Colour",
"Tag",
])"
Rows="@([
[
"Default",
"None",
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag"">
Default
</strong>
",
},
],
[
"Red",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">red</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--red"">
Rejected
</strong>
",
},
],
[
"Blue",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">blue</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--blue"">
Pending
</strong>
",
},
],
[
"Green",
new TablesRowsItem
{
Html = "<var class=\"nhsuk-body-s\">green</var>",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--green"">
New
</strong>
",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": "Tags",
"firstCellIsHeader": true,
"head": [
"Name",
"Colour",
"Tag"
],
"rows": [
[
"Default",
"None",
{
"html": "<strong class=\"nhsuk-tag\">\n Default\n</strong>\n"
}
],
[
"Red",
{
"html": "<var class=\"nhsuk-body-s\">red</var>"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--red\">\n Rejected\n</strong>\n"
}
],
[
"Blue",
{
"html": "<var class=\"nhsuk-body-s\">blue</var>"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--blue\">\n Pending\n</strong>\n"
}
],
[
"Green",
{
"html": "<var class=\"nhsuk-body-s\">green</var>"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--green\">\n New\n</strong>\n"
}
]
]
}) }}
With word breaks
Users|
| stephanie.meyer9@test.com |
Active
|
| aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com |
Inactive
|
| karen.francis@example.com |
Thisisaverylongwaytosaythatsomethingisincomplete
|
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Users",
Size = "m",
})"
first-cell-is-header="true"
head="@([
new TablesHeadItem
{
Text = "Name",
},
new TablesHeadItem
{
Text = "Email address",
},
new TablesHeadItem
{
Text = "Status",
},
new TablesHeadItem
{
VisuallyHiddenText = "Actions",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Stephanie Meyer",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "stephanie.meyer9@test.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--green"">
Active
</strong>
",
},
],
[
new TablesRowsItem
{
Text = "Aleksandrina Featherstonehaugh-Whitehead",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--grey"">
Inactive
</strong>
",
},
],
[
new TablesRowsItem
{
Text = "Karen Francis",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "karen.francis@example.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--blue"">
Thisisaverylongwaytosaythatsomethingisincomplete
</strong>
",
},
],
])"
/>
Blazor
<NhsukTables
Caption="@(new TablesCaptionOptions
{
Text = "Users",
Size = "m",
})"
FirstCellIsHeader="true"
Head="@([
new TablesHeadItem
{
Text = "Name",
},
new TablesHeadItem
{
Text = "Email address",
},
new TablesHeadItem
{
Text = "Status",
},
new TablesHeadItem
{
VisuallyHiddenText = "Actions",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Stephanie Meyer",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "stephanie.meyer9@test.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--green"">
Active
</strong>
",
},
],
[
new TablesRowsItem
{
Text = "Aleksandrina Featherstonehaugh-Whitehead",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--grey"">
Inactive
</strong>
",
},
],
[
new TablesRowsItem
{
Text = "Karen Francis",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Text = "karen.francis@example.com",
Classes = "nhsuk-u-text-break-word",
},
new TablesRowsItem
{
Html = @"<strong class=""nhsuk-tag nhsuk-tag--blue"">
Thisisaverylongwaytosaythatsomethingisincomplete
</strong>
",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"caption": {
"text": "Users",
"size": "m"
},
"firstCellIsHeader": true,
"head": [
{
"text": "Name"
},
{
"text": "Email address"
},
{
"text": "Status"
},
{
"visuallyHiddenText": "Actions"
}
],
"rows": [
[
{
"text": "Stephanie Meyer",
"classes": "nhsuk-u-text-break-word"
},
{
"text": "stephanie.meyer9@test.com",
"classes": "nhsuk-u-text-break-word"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--green\">\n Active\n</strong>\n"
}
],
[
{
"text": "Aleksandrina Featherstonehaugh-Whitehead",
"classes": "nhsuk-u-text-break-word"
},
{
"text": "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
"classes": "nhsuk-u-text-break-word"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--grey\">\n Inactive\n</strong>\n"
}
],
[
{
"text": "Karen Francis",
"classes": "nhsuk-u-text-break-word"
},
{
"text": "karen.francis@example.com",
"classes": "nhsuk-u-text-break-word"
},
{
"html": "<strong class=\"nhsuk-tag nhsuk-tag--blue\">\n Thisisaverylongwaytosaythatsomethingisincomplete\n</strong>\n"
}
]
]
}) }}
As a card
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(true)"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Blazor
<NhsukTables
Card="@(true)"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": true,
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
]
}) }}
As a card
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(true)"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Card="@(true)"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": true,
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"striped": true
}) }}
As a card
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(true)"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Card="@(true)"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "m",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": true,
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "m"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"responsive": true
}) }}
As a card (feature)
Other conditions like impetigo
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Other conditions like impetigo",
"size": "m"
},
"variant": "feature"
},
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "s"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
]
}) }}
As a card (feature)
Other conditions like impetigo
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
striped="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Striped="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Other conditions like impetigo",
"size": "m"
},
"variant": "feature"
},
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "s"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"striped": true
}) }}
As a card (feature)
Other conditions like impetigo
Impetigo can look similar to other skin conditions|
| Possible causeCold sores |
| Possible causeEczema |
| Possible causeShingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
responsive="true"
/>
Blazor
<NhsukTables
Card="@(new CardOptions
{
Heading = new CardHeadingOptions
{
Text = "Other conditions like impetigo",
Size = "m",
},
Variant = "feature",
})"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
Responsive="true"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"card": {
"heading": {
"text": "Other conditions like impetigo",
"size": "m"
},
"variant": "feature"
},
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "s"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
],
"responsive": true
}) }}
As a card (feature) with deprecated options
Other conditions like impetigo
Impetigo can look similar to other skin conditions|
| Cold sores |
| Eczema |
| Shingles, chickenpox |
Razor Pages and MVC
<nhsuk-tables
caption-options="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
first-cell-is-header="true"
last-row-border="false"
head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
options="@(new TablesOptions
{
Heading = "Other conditions like impetigo",
HeadingLevel = 3,
Panel = true,
})"
/>
Blazor
<NhsukTables
Heading="Other conditions like impetigo"
HeadingLevel="3"
Caption="@(new TablesCaptionOptions
{
Text = "Impetigo can look similar to other skin conditions",
Size = "s",
})"
FirstCellIsHeader="true"
LastRowBorder="false"
Panel="true"
Head="@([
new TablesHeadItem
{
Text = "Skin symptoms",
},
new TablesHeadItem
{
Text = "Possible cause",
},
])"
Rows="@([
[
new TablesRowsItem
{
Text = "Blisters on lips or around the mouth",
},
new TablesRowsItem
{
Text = "Cold sores",
},
],
[
new TablesRowsItem
{
Text = "Itchy, dry, cracked, sore",
},
new TablesRowsItem
{
Text = "Eczema",
},
],
[
new TablesRowsItem
{
Text = "Itchy blisters",
},
new TablesRowsItem
{
Text = "Shingles, chickenpox",
},
],
])"
/>
Nunjucks (upstream)
{% from "nhsuk/components/tables/macro.njk" import tables %}
{{ tables({
"heading": "Other conditions like impetigo",
"headingLevel": 3,
"caption": {
"text": "Impetigo can look similar to other skin conditions",
"size": "s"
},
"firstCellIsHeader": true,
"lastRowBorder": false,
"panel": true,
"head": [
{
"text": "Skin symptoms"
},
{
"text": "Possible cause"
}
],
"rows": [
[
{
"text": "Blisters on lips or around the mouth"
},
{
"text": "Cold sores"
}
],
[
{
"text": "Itchy, dry, cracked, sore"
},
{
"text": "Eczema"
}
],
[
{
"text": "Itchy blisters"
},
{
"text": "Shingles, chickenpox"
}
]
]
}) }}