{# toolbar: <button class="ui-btn ui-dt-facet" data-variant="outline" data-size="sm" type="button">…</button> per facet, a ghost Reset, a View button. Headers: <th [aria-sort="ascending|descending"]><a class="ui-dt-sort" href="?sort=…">Name<svg…></a></th>; a selected row is <tr data-state="selected">. #}
<.data_table placeholder="Filter tasks…" params="sort=-status" page={1} pages={10} selected={1} total={100}>
<:toolbar>
<button class="ui-btn ui-dt-facet" data-variant="outline" data-size="sm" type="button"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>Status<span class="ui-sep" data-orientation="vertical"></span><span class="ui-badge" data-variant="secondary">2 selected</span></button>
<button class="ui-btn ui-dt-facet" data-variant="outline" data-size="sm" type="button"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>Priority</button>
<a class="ui-btn" data-variant="ghost" data-size="sm" href="?">Reset<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
<button class="ui-btn" data-variant="outline" data-size="sm" type="button" style="margin-left:auto"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>View</button>
</:toolbar>
<thead><tr><th><input class="ui-checkbox" type="checkbox" aria-label="Select all"></th>
<th><a class="ui-dt-sort" href="?sort=id">Task<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></svg></a></th>
<th><a class="ui-dt-sort" href="?sort=title">Title<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></svg></a></th>
<th aria-sort="descending"><a class="ui-dt-sort" href="?sort=status">Status<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg></a></th>
<th><a class="ui-dt-sort" href="?sort=priority">Priority<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></svg></a></th><th><span class="ui-sr-only">Actions</span></th></tr></thead>
<tbody>
<tr><td><input class="ui-checkbox" type="checkbox" name="ids[]" value="TASK-8782" aria-label="Select TASK-8782"></td><td style="font-weight:500">TASK-8782</td><td style="max-width:300px;overflow:hidden;text-overflow:ellipsis"><.badge variant="outline">Documentation</.badge> You can't compress the program without quantifying the open-source SSD pixel!</td><td><span class="ui-badge" data-variant="info" data-shape="pill">In progress</span></td><td>Medium</td><td style="width:40px"><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Actions for TASK-8782"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr>
<tr data-state="selected"><td><input class="ui-checkbox" type="checkbox" name="ids[]" value="TASK-7878" checked aria-label="Select TASK-7878"></td><td style="font-weight:500">TASK-7878</td><td style="max-width:300px;overflow:hidden;text-overflow:ellipsis"><.badge variant="outline">Bug</.badge> Try to calculate the EXE feed, maybe it will index the multi-byte pixel!</td><td><span class="ui-badge" data-variant="secondary" data-shape="pill">Backlog</span></td><td>Medium</td><td style="width:40px"><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Actions for TASK-7878"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr>
<tr><td><input class="ui-checkbox" type="checkbox" name="ids[]" value="TASK-7839" aria-label="Select TASK-7839"></td><td style="font-weight:500">TASK-7839</td><td style="max-width:300px;overflow:hidden;text-overflow:ellipsis"><.badge variant="outline">Bug</.badge> We need to bypass the neural TCP card!</td><td><span class="ui-badge" data-variant="outline" data-shape="pill">Todo</span></td><td>High</td><td style="width:40px"><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Actions for TASK-7839"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr>
<tr><td><input class="ui-checkbox" type="checkbox" name="ids[]" value="TASK-5562" aria-label="Select TASK-5562"></td><td style="font-weight:500">TASK-5562</td><td style="max-width:300px;overflow:hidden;text-overflow:ellipsis"><.badge variant="outline">Feature</.badge> The SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!</td><td><span class="ui-badge" data-variant="secondary" data-shape="pill">Backlog</span></td><td>Medium</td><td style="width:40px"><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Actions for TASK-5562"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr>
<tr><td><input class="ui-checkbox" type="checkbox" name="ids[]" value="TASK-8686" aria-label="Select TASK-8686"></td><td style="font-weight:500">TASK-8686</td><td style="max-width:300px;overflow:hidden;text-overflow:ellipsis"><.badge variant="outline">Feature</.badge> I'll parse the wireless SSL protocol, that should driver the API panel!</td><td><span class="ui-muted">Cancelled</span></td><td>Medium</td><td style="width:40px"><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Actions for TASK-8686"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr>
</tbody>
</.data_table>