Table
<table class="asp-table">
<thead class="asp-table__head">
<tr class="asp-table__row asp-table__row--head">
<th class="asp-table__header" scope="col">
Column 1
</th>
<th class="asp-table__header" scope="col">
Column 2
</th>
<th class="asp-table__header asp-table__header--numeric" scope="col">
Column 3 numeric: true
</th>
<th class="asp-table__header" scope="col">
Column 4
</th>
</tr>
</thead>
<tbody class="asp-table__body">
<tr class="asp-table__row">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
Row 1, cell 1
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 1, cell 2
</td>
<td class="asp-table__cell asp-table__cell--numeric">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3 numeric: true</span>
1
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 1, cell 4. Extra content to demo width
</td>
</tr>
<tr class="asp-table__row">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
Row 1, cell 1
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 1, cell 2
</td>
<td class="asp-table__cell asp-table__cell--numeric">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3 numeric: true</span>
2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 1, cell 4. Extra content to demo width
</td>
</tr>
</tbody>
</table>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
modifier | boolean | If 'equal' or true (boolean) column widths will be equal. Default values are 'equal', false (boolean), true (boolean) or null. |
head | array |
<th> ) within table thead row.
See head.
|
Required.
The table header cells (
rows | object |
<tr> ) within the table body component.
See rows.
|
Required.
The table body rows (
Options for head
Name | Type | Description |
---|---|---|
numeric | boolean | If true (boolean) column will be aligned right for numeric values. Default values are false (boolean), true (boolean) or null. |
text | array | text. | Required. The table head text. See
Options for text
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
Options for rows
Name | Type | Description |
---|---|---|
modifier | string or false (boolean) | Default values are 'unread', 'read' and 'processed', false (boolean) or null. |
href | string or false (boolean) | The URL that content within the first column will link to. Default values are false (boolean) or null. |
cells | array |
<td> ) within the table body row.
See cells.
|
Required.
The table cells (
Options for cells
Name | Type | Description |
---|---|---|
content | array | content. | Required. The table cell text. See
Options for content
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
number | number | Required. A number for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
{% from "table/macro.njk" import aspTable %}
{{ aspTable({
head: [
{ text: "Column 1" },
{ text: "Column 2" },
{ text: "Column 3 numeric: true",
numeric: true
},
{ text: "Column 4" }
],
rows: [
{
cells: [
{ text: "Row 1, cell 1" },
{ text: "Row 1, cell 2" },
{ number: 1 },
{ text: "Row 1, cell 4. Extra content to demo width" }
]
},
{
cells: [
{ text: "Row 1, cell 1" },
{ text: "Row 1, cell 2" },
{ number: 2 },
{ text: "Row 1, cell 4. Extra content to demo width" }
]
}
]
}) }}
When to use this component
Use the table component to let users compare information in rows and columns.
Use tables to present data or information that can be organised in a structured way. This could consist of numbers, text or statistics.
A table should make it easy to:
- understand the relationship between different types of data
- examine a range of possibilities at a glance
When not to use this component
Do not use tables for cosmetic reasons or when you can use normal page structure to present the information, for example headers or lists.
Never use the table component to layout content on a page. Instead, use the grid system.
Table with equal columns
<table class="asp-table asp-table--equal">
<thead class="asp-table__head">
<tr class="asp-table__row asp-table__row--head">
<th class="asp-table__header" scope="col">
Column 1 equal
</th>
<th class="asp-table__header" scope="col">
Column 2 equal
</th>
<th class="asp-table__header" scope="col">
Column 3 equal
</th>
<th class="asp-table__header" scope="col">
Column 4 equal
</th>
</tr>
</thead>
<tbody class="asp-table__body">
<tr class="asp-table__row asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1 equal</span>
<a class="asp-table__link" href="#">RAF-RUAYY-EXTRA-EXTRA-LONG-CONTENT</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2 equal</span>
John Smith
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3 equal</span>
13 June 2023 09:35
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4 equal</span>
11 June 2023
</td>
</tr>
<tr class="asp-table__row asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1 equal</span>
<a class="asp-table__link" href="#">RAF--EXTRA-EXTRA-LONG-CONTENT</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2 equal</span>
Ashley Kristy
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3 equal</span>
13 June 2023 18:37
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4 equal</span>
11 June 2023
</td>
</tr>
</tbody>
</table>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
modifier | boolean | If 'equal' or true (boolean) column widths will be equal. Default values are 'equal', false (boolean), true (boolean) or null. |
head | array |
<th> ) within table thead row.
See head.
|
Required.
The table header cells (
rows | object |
<tr> ) within the table body component.
See rows.
|
Required.
The table body rows (
Options for head
Name | Type | Description |
---|---|---|
numeric | boolean | If true (boolean) column will be aligned right for numeric values. Default values are false (boolean), true (boolean) or null. |
text | array | text. | Required. The table head text. See
Options for text
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
Options for rows
Name | Type | Description |
---|---|---|
modifier | string or false (boolean) | Default values are 'unread', 'read' and 'processed', false (boolean) or null. |
href | string or false (boolean) | The URL that content within the first column will link to. Default values are false (boolean) or null. |
cells | array |
<td> ) within the table body row.
See cells.
|
Required.
The table cells (
Options for cells
Name | Type | Description |
---|---|---|
content | array | content. | Required. The table cell text. See
Options for content
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
number | number | Required. A number for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
{% from "table/macro.njk" import aspTable %}
{{ aspTable({
modifier: "equal",
head: [
{ text: "Column 1 equal" },
{ text: "Column 2 equal" },
{ text: "Column 3 equal" },
{ text: "Column 4 equal" }
],
rows: [
{
href: "#",
cells: [
{ text: "RAF-RUAYY-EXTRA-EXTRA-LONG-CONTENT" },
{ text: "John Smith" },
{ text: "13 June 2023 09:35" },
{ number: "11 June 2023" }
]
},
{
href: "#",
cells: [
{ text: "RAF--EXTRA-EXTRA-LONG-CONTENT" },
{ text: "Ashley Kristy" },
{ text: "13 June 2023 18:37" },
{ number: "11 June 2023" }
]
}
]
}) }}
Table with links
<table class="asp-table">
<thead class="asp-table__head">
<tr class="asp-table__row asp-table__row--head">
<th class="asp-table__header" scope="col">
Column 1
</th>
<th class="asp-table__header" scope="col">
Column 2
</th>
<th class="asp-table__header" scope="col">
Column 3
</th>
<th class="asp-table__header" scope="col">
Column 4
</th>
</tr>
</thead>
<tbody class="asp-table__body">
<tr class="asp-table__row asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 1, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 1, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 1, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 1, cell 4
</td>
</tr>
<tr class="asp-table__row asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 2, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 2, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 2, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 2, cell 4
</td>
</tr>
</tbody>
</table>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
modifier | boolean | If 'equal' or true (boolean) column widths will be equal. Default values are 'equal', false (boolean), true (boolean) or null. |
head | array |
<th> ) within table thead row.
See head.
|
Required.
The table header cells (
rows | object |
<tr> ) within the table body component.
See rows.
|
Required.
The table body rows (
Options for head
Name | Type | Description |
---|---|---|
numeric | boolean | If true (boolean) column will be aligned right for numeric values. Default values are false (boolean), true (boolean) or null. |
text | array | text. | Required. The table head text. See
Options for text
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
Options for rows
Name | Type | Description |
---|---|---|
modifier | string or false (boolean) | Default values are 'unread', 'read' and 'processed', false (boolean) or null. |
href | string or false (boolean) | The URL that content within the first column will link to. Default values are false (boolean) or null. |
cells | array |
<td> ) within the table body row.
See cells.
|
Required.
The table cells (
Options for cells
Name | Type | Description |
---|---|---|
content | array | content. | Required. The table cell text. See
Options for content
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
number | number | Required. A number for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
{% from "table/macro.njk" import aspTable %}
{{ aspTable({
head: [
{ text: "Column 1" },
{ text: "Column 2" },
{ text: "Column 3" },
{ text: "Column 4" }
],
rows: [
{
href: "#",
cells: [
{ text: "Row 1, cell 1, link" },
{ text: "Row 1, cell 2" },
{ text: "Row 1, cell 3" },
{ text: "Row 1, cell 4" }
]
},
{
href: "#",
cells: [
{ text: "Row 2, cell 1, link" },
{ text: "Row 2, cell 2" },
{ text: "Row 2, cell 3" },
{ text: "Row 2, cell 4" }
]
}
]
}) }}
Unread Table
<table class="asp-table">
<thead class="asp-table__head">
<tr class="asp-table__row asp-table__row--head">
<th class="asp-table__header" scope="col">
Column 1
</th>
<th class="asp-table__header" scope="col">
Column 2
</th>
<th class="asp-table__header" scope="col">
Column 3
</th>
<th class="asp-table__header" scope="col">
Column 4
</th>
</tr>
</thead>
<tbody class="asp-table__body">
<tr class="asp-table__row asp-table__row--unread asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 1, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 1, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 1, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 1, cell 4
</td>
</tr>
<tr class="asp-table__row asp-table__row--unread asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 2, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 2, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 2, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 2, cell 4
</td>
</tr>
</tbody>
</table>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
modifier | boolean | If 'equal' or true (boolean) column widths will be equal. Default values are 'equal', false (boolean), true (boolean) or null. |
head | array |
<th> ) within table thead row.
See head.
|
Required.
The table header cells (
rows | object |
<tr> ) within the table body component.
See rows.
|
Required.
The table body rows (
Options for head
Name | Type | Description |
---|---|---|
numeric | boolean | If true (boolean) column will be aligned right for numeric values. Default values are false (boolean), true (boolean) or null. |
text | array | text. | Required. The table head text. See
Options for text
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
Options for rows
Name | Type | Description |
---|---|---|
modifier | string or false (boolean) | Default values are 'unread', 'read' and 'processed', false (boolean) or null. |
href | string or false (boolean) | The URL that content within the first column will link to. Default values are false (boolean) or null. |
cells | array |
<td> ) within the table body row.
See cells.
|
Required.
The table cells (
Options for cells
Name | Type | Description |
---|---|---|
content | array | content. | Required. The table cell text. See
Options for content
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
number | number | Required. A number for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
{% from "table/macro.njk" import aspTable %}
{{ aspTable({
head: [
{ text: "Column 1" },
{ text: "Column 2" },
{ text: "Column 3" },
{ text: "Column 4" }
],
rows: [
{
modifier: "unread",
href: "#",
cells: [
{ text: "Row 1, cell 1, link" },
{ text: "Row 1, cell 2" },
{ text: "Row 1, cell 3" },
{ text: "Row 1, cell 4" }
]
},
{
modifier: "unread",
href: "#",
cells: [
{ text: "Row 2, cell 1, link" },
{ text: "Row 2, cell 2" },
{ text: "Row 2, cell 3" },
{ text: "Row 2, cell 4" }
]
}
]
}) }}
Read Table
{{ aspTable({
head: [
{ text: "Column 1" },
{ text: "Column 2" },
{ text: "Column 3" },
{ text: "Column 4" }
],
rows: [
{
modifier: "read",
href: "#",
cells: [
{ text: "Row 1, cell 1, link" },
{ text: "Row 1, cell 2" },
{ text: "Row 1, cell 3" },
{ text: "Row 1, cell 4" }
]
},
{
modifier: "read",
href: "#",
cells: [
{ text: "Row 2, cell 1, link" },
{ text: "Row 2, cell 2" },
{ text: "Row 2, cell 3" },
{ text: "Row 2, cell 4" }
]
}
]
}) }}
Processed Table
<table class="asp-table">
<thead class="asp-table__head">
<tr class="asp-table__row asp-table__row--head">
<th class="asp-table__header" scope="col">
Column 1
</th>
<th class="asp-table__header" scope="col">
Column 2
</th>
<th class="asp-table__header" scope="col">
Column 3
</th>
<th class="asp-table__header" scope="col">
Column 4
</th>
</tr>
</thead>
<tbody class="asp-table__body">
<tr class="asp-table__row asp-table__row--processed asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 1, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 1, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 1, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 1, cell 4
</td>
</tr>
<tr class="asp-table__row asp-table__row--processed asp-table__row--link">
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 1</span>
<a class="asp-table__link" href="#">Row 2, cell 1, link</a>
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 2</span>
Row 2, cell 2
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 3</span>
Row 2, cell 3
</td>
<td class="asp-table__cell">
<span class="asp-table__responsive-heading" aria-hidden="true">Column 4</span>
Row 2, cell 4
</td>
</tr>
</tbody>
</table>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
modifier | boolean | If 'equal' or true (boolean) column widths will be equal. Default values are 'equal', false (boolean), true (boolean) or null. |
head | array |
<th> ) within table thead row.
See head.
|
Required.
The table header cells (
rows | object |
<tr> ) within the table body component.
See rows.
|
Required.
The table body rows (
Options for head
Name | Type | Description |
---|---|---|
numeric | boolean | If true (boolean) column will be aligned right for numeric values. Default values are false (boolean), true (boolean) or null. |
text | array | text. | Required. The table head text. See
Options for text
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table head text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
Options for rows
Name | Type | Description |
---|---|---|
modifier | string or false (boolean) | Default values are 'unread', 'read' and 'processed', false (boolean) or null. |
href | string or false (boolean) | The URL that content within the first column will link to. Default values are false (boolean) or null. |
cells | array |
<td> ) within the table body row.
See cells.
|
Required.
The table cells (
Options for cells
Name | Type | Description |
---|---|---|
content | array | content. | Required. The table cell text. See
Options for content
Name | Type | Description |
---|---|---|
html | string | Required. HTML for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
text | string | Required. Text for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
number | number | Required. A number for the table cell text. If 'html' is provided, the 'text' and 'number' parameter will be ignored. |
{% from "table/macro.njk" import aspTable %}
{{ aspTable({
head: [
{ text: "Column 1" },
{ text: "Column 2" },
{ text: "Column 3" },
{ text: "Column 4" }
],
rows: [
{
modifier: "processed",
href: "#",
cells: [
{ text: "Row 1, cell 1, link" },
{ text: "Row 1, cell 2" },
{ text: "Row 1, cell 3" },
{ text: "Row 1, cell 4" }
]
},
{
modifier: "processed",
href: "#",
cells: [
{ text: "Row 2, cell 1, link" },
{ text: "Row 2, cell 2" },
{ text: "Row 2, cell 3" },
{ text: "Row 2, cell 4" }
]
}
]
}) }}
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
Development criteria | Status |
---|---|
WCAG 2.2 compliant | Not started |
WCAG 2.1 compliant | Failing |
HTML / Nunjucks version | Complete |
Figma version | Not started |
M365 versions | Not started |
Documentation | In progress |
Published 3 May 2024
Last updated 13 September 2024