Filter a table
{{ aspExample({ code: "<form action=\"#filter-list\">
<button class=\"asp-button asp-button–toggle asp-button–toggleable asp-js-toggle-button\" type=\"button\" aria-expanded=\"false\" data-toggle-element=\".asp-toggle-content\" style=\"display:none\">
<span class=\"asp-button–toggle__function\">Filter options</span>
<span aria-hidden=\"true\">
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–hide\">Hide </span>
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–show\">Show </span>
</span>
</button>
<div class=\"asp-toggle-content\">
<noscript>
<h2>Filter by:</h2>
</noscript>
<div class=\"asp-table__order-by form__group\">
<label class=\"form__label\" for=\"incidentType-select\">Incident type:</label>
<select class=\"form__input\" id=\"incidentType-select\" name=\"incidentType\">
<option value=\"select\">Filter by incident type</option>
<option value=\"value-1\">Public Order</option>
<option value=\"value-2\">Concern for welfare</option>
<option value=\"value-3\">Theft from vehicle</option>
</select>
</div>
<fieldset class=\"form__group\">
<legend class=\"form__label\">Source (select all that apply)</legend>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-1\" type=\"checkbox\" name=\"source\" value=\"value-1\">
<label class=\"form__label-choices\" for=\"source-value-1\">999</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-2\" type=\"checkbox\" name=\"source\" value=\"value-2\">
<label class=\"form__label-choices\" for=\"source-value-2\">101</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-3\" type=\"checkbox\" name=\"source\" value=\"value-3\">
<label class=\"form__label-choices\" for=\"source-value-3\">callback</label>
</div>
</fieldset>
<div class=\"asp-grid asp-button-container\">
<!– should go to #filter-options if filters blank –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–start\" type=\"submit\">Apply filters</button>
<!– should go to #filter-options –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–secondary\" type=\"reset\">Reset filters</button>
</div>
</div>
</form>
<table class=\"asp-table\" id=\"filter-list\">
<thead class=\"asp-table__head\">
<tr class=\"asp-table__row asp-table__row–head\">
<th class=\"asp-table__header\">
SmartSTORM reference
</th>
<th class=\"asp-table__header\">
Incident type
</th>
<th class=\"asp-table__header\">
Source
</th>
<th class=\"asp-table__header\">
Response grading
</th>
<th class=\"asp-table__header\">
Date and time
</th>
<th class=\"asp-table__header asp-table__header–numeric\">
Call length
</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__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–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–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>", nunjucks: "", json: "", title: "", example: "", id: "679350efe011b" }) }}
Filter with no results
WIP – After filtering the named anchor should be results table, if no results are returned there should be a message in place of the table, that reads “0 results available. Adjust or reset the filters to see available results.” Results can be substituted for a more specific term.
{{ aspExample({ code: "<form action=\"#filter-list\">
<button class=\"asp-button asp-button–toggle asp-button–toggleable asp-js-toggle-button\" type=\"button\" aria-expanded=\"false\" data-toggle-element=\".asp-toggle-content\" style=\"display:none\">
<span class=\"asp-button–toggle__function\">Filter options</span>
<span aria-hidden=\"true\">
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–hide\">Hide </span>
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–show\">Show </span>
</span>
</button>
<div class=\"asp-toggle-content\">
<noscript>
<h2>Filter by:</h2>
</noscript>
<div class=\"asp-table__order-by form__group\">
<label class=\"form__label\" for=\"incidentType-select\">Incident type:</label>
<select class=\"form__input\" id=\"incidentType-select\" name=\"incidentType\">
<option value=\"select\">Filter by incident type</option>
<option value=\"value-1\">Public Order</option>
<option value=\"value-2\">Concern for welfare</option>
<option value=\"value-3\">Theft from vehicle</option>
</select>
</div>
<fieldset class=\"form__group\">
<legend class=\"form__label\">Source (select all that apply)</legend>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-1\" type=\"checkbox\" name=\"source\" value=\"value-1\">
<label class=\"form__label-choices\" for=\"source-value-1\">999</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-2\" type=\"checkbox\" name=\"source\" value=\"value-2\">
<label class=\"form__label-choices\" for=\"source-value-2\">101</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-3\" type=\"checkbox\" name=\"source\" value=\"value-3\">
<label class=\"form__label-choices\" for=\"source-value-3\">callback</label>
</div>
</fieldset>
<div class=\"asp-grid asp-button-container\">
<!– should go to #filter-options if filters blank –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–start\" type=\"submit\">Apply filters</button>
<!– should go to #filter-options –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–secondary\" type=\"reset\">Reset filters</button>
</div>
</div>
</form>
<p>0 results. Adjust or reset the filters to see results.</p>", nunjucks: "", json: "", title: "", example: "", id: "67936ae339af8" }) }}