Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Table

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: table

Copy code: 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" 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.

Open this example in a new tab: table

Copy code: table

<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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" 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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: table

Copy code: 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--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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" 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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: table

Copy code: 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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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__icon asp-table__icon--unread"></span>
        <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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" 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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: table

Copy code: 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--read asp-table__row--link">
      <td class="asp-table__cell">
          <span class="asp-table__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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--read asp-table__row--link">
      <td class="asp-table__cell">
          <span class="asp-table__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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__icon asp-table__icon--read"></span>
        <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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/table/macro.njk" import aspTable %}

{{ 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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" import aspTable %}

{{ 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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: table

Copy code: 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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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__icon asp-table__icon--processed"></span>
        <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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "components/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" }
      ]
    }
  ]
}) }}

Twig 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	Required. The table header cells (`<th>`) within table thead row. See head.
rows	object	Required. The table body rows (`<tr>`) within the table body component. See 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	Required. The table head text. See text.

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	Required. The table cells (`<td>`) within the table body row. See cells.

Options for cells

Name	Type	Description
content	array	Required. The table cell text. See content.

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 "@asp-frontend/components/table/macro.twig" 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" }
      ]
    }
  ]
}) }}

Table ordering

Preview
HTML

Open this example in a new tab: table

Copy code: table

<form action="#results">  
          <div class="form-table-order">  
            <div class="form__group">  
              <label class="form__label" for="asp-js-select">Order by:</label>  
              <select class="form__input asp-js-select" id="asp-js-select" name="order">  
                <option value="value-1">SmartSTORM reference ascending</option>  
                <option value="value-2" selected>SmartSTORM reference descending</option>  
                <option value="value-3">Incident type ascending</option>  
                <option value="value-4">Incident type descending</option>  
                <option value="value-5">Source ascending</option>  
                <option value="value-6">Source descending</option>  
                <option value="value-7">Response grading ascending</option>  
                <option value="value-8">Response grading descending</option>  
                <option value="value-9">Date and time ascending</option>  
                <option value="value-10">Date and time descending</option>  
                <option value="value-11">Call length ascending</option>  
                <option value="value-12">Call length descending</option>  
              </select>  
            </div>  
            <noscript>  
              <!-- should go to #results -->  
              <button class="asp-button asp-button--start asp-button--table-order" type="submit">Apply order</button>  
            </noscript>  
          </div>  
          <table class="asp-table" id="results">  
            <thead class="asp-table__head">  
              <tr class="asp-table__row asp-table__row--head">  
                <th class="asp-table__header asp-table__header--order asp-table__header--order-unread">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-1" data-order="asc">  
                    SmartSTORM reference  
                    <span class="sr-only"> order by ascending</span>  
                  </button>  
                </th>  
                <th class="asp-table__header asp-table__header--order">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-3" data-order="both">  
                    Incident type  
                    <span class="sr-only"> order by ascending</span>  
                  </button>  
                </th>  
                <th class="asp-table__header asp-table__header--order">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-5" data-order="both">  
                    Source  
                    <span class="sr-only"> order by ascending</span>  
                  </button>  
                </th>  
                <th class="asp-table__header asp-table__header--order">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-7" data-order="both">  
                    Response grading  
                    <span class="sr-only"> order by ascending</span>  
                  </button>  
                </th>  
                <th class="asp-table__header asp-table__header--order">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-10" data-order="both">  
                    Date and time  
                    <span class="sr-only"> order by descending</span>  
                  </button>  
                </th>  
                <th class="asp-table__header asp-table__header--numeric asp-table__header--order">  
                  <button class="asp-link--plain asp-table__button" name="order-table" value="value-12" data-order="both">  
                    Call length  
                    <span class="sr-only"> order by descending</span>  
                  </button>  
                </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__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>PUBLIC ORDER</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>999</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Routine</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>20 November 2024 17:30</td>  
                <td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>11:18</td>  
              </tr>  
              <tr class="asp-table__row asp-table__row--unread asp-table__row--link">  
                <td class="asp-table__cell"><span class="asp-table__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>CONCERN FOR WELFARE</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>999</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Res without deploy</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>20 November 2024 15:20</td>  
                <td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>09:57</td>  
              </tr>  
              <tr class="asp-table__row asp-table__row--unread asp-table__row--link">  
                <td class="asp-table__cell"><span class="asp-table__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>THEFT FROM VEHICLE</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>101</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Res without deploy</td>  
                <td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>10 November 2024 08:25</td>  
                <td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>08:46</td>  
              </tr>  
            </tbody>  
          </table>  
        </form>

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

Submit a request

Request a change or addition to the design system: this form.

Published 3 May 2024
Last updated 19 February 2025