Widget: Sortable Table

Example

Details

Implementing This Widget

Implement the Sortable Table widget when you need an accessible table in which the rows may be sorted by each column, and further, that the sort order of a column may be reversed from ascending to descending or vice versa.

Prerequisites:

None

To implement the Sortable Table widget:

  • Invoke deque.createSortableTable with the following two arguments:
    1. An array containing column headers, each represented as a string.
    2. An array of rows, where each row is an array with the same length as the header array.

Expected Operation and Accessibility Features

Each column has a button that can be clicked to sort by that column. Clicking it again will reverse the order. This scenario must be communicated properly to screen reader users, and it must be possible to complete by using only a keyboard.

Validation and Developer Notes

In order to validate this control, you must test it manually with a screen reader and keyboard.

Notes for the Developer:

The values in the row cells should be formatted for display on the screen, so strings and numbers and booleans are fine but any complex objects should either have well-formulated output from .toString() or should be preprocessed into strings prior to invoking.

Example Implementation Reference

To view an implementation of this widget, see Sortable Table widget example.