Lesson 3 of 8
Sortable table
- 15 min
- 6 checks
- 3 hints
- Go to task
Goal
A header that sorts the table on click and announces its state
01
Explanation
A sortable table needs three things: a column header you can click, a sort that reverses direction on the second click, and the aria-sort attribute to announce the sort state.
aria-sort takes ascending, descending or none, and only one column carries the sort state at any moment.
Sort the data itself, not the DOM elements: sort the array, then redraw the table from it. Code that rearranges rows in place ends up longer and breaks at the first change.
02
Your task
Make clicking a column header sort the table by that column, make a second click reverse the direction, and update aria-sort on every click.
Checks
6 checks- The table starts with three rows
- Sorts by score in ascending order
- A second click reverses the direction
- aria-sort announces the state
- Only one column carries the sort state
- Sorting by name works and the original array is unchanged