Component

Task list (sortable)

Published on

Description

A sortable task list adds a sort select, and an optional add link, above a Task list. The ds-task-sortable web component listens for changes on the select and reorders the rows by their data-sort-* attributes.

The first option must be the order the server already rendered. Without JavaScript the list still shows in that order, only the select does nothing.

Each option value names a sort key; prefix it with - for descending. Give rows machine values to sort by, such as epoch milliseconds or ordinals, rather than the localized text they display.

Example

Open in new tab
View HTML markup 
<div is="ds-task-sortable">
  <div class="task-sortable-controls"><a href="#">Add domain</a>
    <div><select class="chevron" aria-label="Sort by">
        <optgroup label="Sort by">
          <option value="name">Name (A to Z)</option>
          <option value="-name">Name (Z to A)</option>
          <option value="-updated">Recently updated</option>
        </optgroup>
      </select></div>
  </div>
  <ul>
    <li is="ds-task" id="task-alpha" data-sort-name="alpha.example.com" data-sort-updated="1767225600000"><a href="#">alpha.example.com</a> <strong><span>Complete</span></strong> </li>
    <li is="ds-task" id="task-charlie" data-sort-name="charlie.example.com" data-sort-updated="1772323200000"><a href="#">charlie.example.com</a> <strong class="inprogress"><span>In progress</span></strong> </li>
    <li is="ds-task" id="task-bravo" data-sort-name="bravo.example.com" data-sort-updated="1769904000000"><a href="#">bravo.example.com</a> <strong class="incomplete"><span>Not yet started</span></strong> </li>
  </ul>
</div>

Accessibility

  • The select has no visible label; aria-label names the collapsed control and the <optgroup> label repeats it when the list is open.
  • Reordering moves the existing <li> nodes, so focus and any state on a row are kept.
  • Each row keeps a single click target; the controls sit outside the list.

References

  • Task list — the same rows without sorting
  • Table — for sortable data with several columns

Variables

  • tasks — rows, as for Task list, with a sort object rendered as data-sort-*
  • sorts — the options, each with a value and a label
  • sortLabel — defaults to Sort by
  • addHref and addLabel — optional add link