The UX section of the style guide must be viewed in Google Chrome.
Sortable Table
A sortable table stimulus allows test takers to sort data presented in a stimulus table.
Sortable tables are currently used only in SBTs.
The following demo presents a sortable table that can be sorted by ascending and descending order via pressing the column headers.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
When selected, each column header will reorder the table’s rows based on the data in the column, starting with ascending order. With successive selections, the table sort order will toggle between descending and ascending order.
Sortable tables have the same styling as static stimulus tables, except for the column header cells, which have the following states.
Default. Visible when the header cell isn’t controlling the table’s sort order. The sort-default icon is displayed at the header cell’s right side.
Sort Ascending. Displayed when the table is sorted such that the values in the associated column are in ascending order. The sort-ascending icon is displayed.
Sort Descending. Displayed when the table is sorted such that the values in the associated column are in descending order. The sort-descending icon is displayed.
Hover. Visible when the cursor is over the header cell. The cell background darkens, and the pointer cursor is shown.
Disabled. Visible when the header cell is inactive (e.g., when a modal system tool like Scratchwork is enabled). The icon opacity reduces to 30%.
Sortable tables are currently used only in SBTs.
The following demo presents a sortable table that can be sorted by ascending and descending order via pressing the column headers.
To view alternative presentations and styling, use the Change Theme
and Read Aloud 
buttons in the upper-right of the screen.
When selected, each column header will reorder the table’s rows based on the data in the column, starting with ascending order. With successive selections, the table sort order will toggle between descending and ascending order.
Sortable tables have the same styling as static stimulus tables, except for the column header cells, which have the following states.
sort-defaulticon is displayed at the header cell’s right side.sort-ascendingicon is displayed.sort-descendingicon is displayed.pointercursor is shown.