{{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3 numeric: true\&quot;,<br />
      numeric: true<br />
    },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { number: 1 },<br />
        { text: \&quot;Row 1, cell 4. Extra content to demo width\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { number: 2 },<br />
        { text: \&quot;Row 1, cell 4. Extra content to demo width\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a92fd59d3c8&quot; }) }}


<h2 class="wp-block-heading" id="when-to-use-this-component">When to use this component</h2>



<p>Use the table component to let users compare information in rows and columns.<br><br>Use tables to present data or information that can be organised in a structured way. This could consist of numbers, text or statistics.</p>



<p>A table should make it easy to:</p>



<ul class="wp-block-list">
<li>understand the relationship between different types of data</li>



<li>examine a range of possibilities at a glance</li>
</ul>



<h2 class="wp-block-heading" id="when-not-to-use-this-component">When not to use this component</h2>



<p>Do not use tables for cosmetic reasons or when you can use normal page structure to present the information, for example headers or lists.</p>



<p>Never use the table component to layout content on a page. Instead, use the&nbsp;grid system.</p>



<h2 class="wp-block-heading">Table with equal columns</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  modifier: \&quot;equal\&quot;,<br />
  head: [<br />
    { text: \&quot;Column 1 equal\&quot; },<br />
    { text: \&quot;Column 2 equal\&quot; },<br />
    { text: \&quot;Column 3 equal\&quot; },<br />
    { text: \&quot;Column 4 equal\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;RAF-RUAYY-EXTRA-EXTRA-LONG-CONTENT\&quot; },<br />
        { text: \&quot;John Smith\&quot; },<br />
        { text: \&quot;13 June 2023 09:35\&quot; },<br />
        { number: \&quot;11 June 2023\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;RAF&#8211;EXTRA-EXTRA-LONG-CONTENT\&quot; },<br />
        { text: \&quot;Ashley Kristy\&quot; },<br />
        { text: \&quot;13 June 2023 18:37\&quot; },<br />
        { number: \&quot;11 June 2023\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;6659cfaa4c7cd&quot; }) }}


<h2 class="wp-block-heading">Table with links</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;6659cfaa4c83c&quot; }) }}


<h2 class="wp-block-heading">Unread Table</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;unread\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;unread\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a92fd59d469&quot; }) }}


<h2 class="wp-block-heading">Read Table</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;read\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;read\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a92fd59d4d3&quot; }) }}


<h2 class="wp-block-heading">Processed Table</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspTable({<br />
  head: [<br />
    { text: \&quot;Column 1\&quot; },<br />
    { text: \&quot;Column 2\&quot; },<br />
    { text: \&quot;Column 3\&quot; },<br />
    { text: \&quot;Column 4\&quot; }<br />
  ],<br />
  rows: [<br />
    {<br />
      modifier: \&quot;processed\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 1, cell 1, link\&quot; },<br />
        { text: \&quot;Row 1, cell 2\&quot; },<br />
        { text: \&quot;Row 1, cell 3\&quot; },<br />
        { text: \&quot;Row 1, cell 4\&quot; }<br />
      ]<br />
    },<br />
    {<br />
      modifier: \&quot;processed\&quot;,<br />
      href: \&quot;#\&quot;,<br />
      cells: [<br />
        { text: \&quot;Row 2, cell 1, link\&quot; },<br />
        { text: \&quot;Row 2, cell 2\&quot; },<br />
        { text: \&quot;Row 2, cell 3\&quot; },<br />
        { text: \&quot;Row 2, cell 4\&quot; }<br />
      ]<br />
    }<br />
  ]<br />
}) }}&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a92fd59d57e&quot; }) }}


<h2 class="wp-block-heading">Table ordering</h2>


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


<h2 class="wp-block-heading">Status of development</h2>



<p>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.</p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;red&quot;&gt;Failing&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Complete&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />