{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92fd59d3c8" }) }}


<p class="wp-block-paragraph">WIP &#8211; Column widths are calculated by the browser based on the available space and the content within each column. The exact distribution of widths is determined by the browser&#8217;s table layout algorithm and is therefore not directly controllable.</p>



<p class="wp-block-paragraph">The only way to enforce consistent column widths is to assign fixed or equal widths to the columns. However, this can still result in wrapping where the available width is insufficient and, in many cases, may increase the amount of wrapping rather than reduce it. For this reason, fixed column widths are generally only used where the content is predictable and of a consistent length, or where a specific column is known to contain short, uniform values that can reliably fit on a single line.</p>



<p class="wp-block-paragraph">When designing tables, aim to minimise the amount of data displayed in a single view. Where practical, consider splitting large datasets across multiple tables, pages, or views. This improves readability, reduces the likelihood of excessive wrapping, and allows the browser greater flexibility in allocating column widths.</p>



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



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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 id="when-not-to-use-this-component" class="wp-block-heading">When not to use this component</h2>



<p class="wp-block-paragraph">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 class="wp-block-paragraph">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;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;equal-columns&quot;, id: &quot;6659cfaa4c7cd&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;linked-rows&quot;, id: &quot;6659cfaa4c83c&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;blue&quot;, id: &quot;65a92fd59d469&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;amber&quot;, id: &quot;65a92fd59d4d3&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;green&quot;, id: &quot;65a92fd59d57e&quot; }) }}


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



<p class="wp-block-paragraph">WIP &#8211; There is a visually hidden span which is read out by screenreaders that states the sorting order that will be applied when the button is next clicked. This can be either descending or ascending.</p>



<p class="wp-block-paragraph">The form should submit with params, so the page can be reloaded/shared with the current state, also history can be preserved per pageload.</p>


 {{ 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 descending&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">Numeric only</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;numeric-only&quot;, id: &quot;6a43d6c933e9f&quot; }) }}


<h2 class="wp-block-heading">First column as a header</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;first-column-header&quot;, id: &quot;6a43d6c933ed9&quot; }) }}

 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;blank-cell&quot;, id: &quot;6a4420665c597&quot; }) }}


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



<p class="wp-block-paragraph">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>



  

<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">
                Development criteria
              </th>
                              <th class="asp-table__header" scope="col">
                Status
              </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">Development criteria </span>
                                                                      WCAG 2.2 compliant
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status">Not started</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      WCAG 2.1 compliant
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--red">Failing</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      HTML / Nunjucks version
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--green">Complete</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      Figma version
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status">Not started</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      M365 versions
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status">Not started</span>
                        </td>
          </tr>
                    <tr class="asp-table__row">
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Development criteria </span>
                                                                      Documentation
                        </td>
                                                                    <td class="asp-table__cell">
        <span class="asp-table__responsive-heading" aria-hidden="true">Status </span>
                                                                      <span class="status status--yellow">In progress</span>
                        </td>
          </tr>
      </tbody>
</table>

<hr class="asp-hr"><h2>Make a change to the Design System</h2><p>Suggest an edit to this system, or any of the components in it, by submitting a <a href="https://forms.office.com/Pages/ResponsePage.aspx?id=bIFyLR9-wEGpSEeohw_zOlGCZNx8mwNDtJBjimlBuXZUODEzT0NIUlQwTUkyUzRRU0hRR1lMOUtFMSQlQCN0PWcu">Design System change request</a>.</p><hr class="asp-hr">