Widget: Collapsing Table

Example 1

No Label Function
First Name Last Name Age Favorite Color Select
Alice Egghead 33 blue
Bob Smith 43 purple
Charlie Jones 23 yellow
Denise Brown 53 green
Eloise Humperdink 83 red

Example 2

Two-Column Label Function
First Name Last Name Age Favorite Color Select
Alice Egghead 33 blue
Bob Smith 43 purple
Charlie Jones 23 yellow
Denise Brown 53 green
Eloise Humperdink 83 red

Example 3

Row Summed Up Into Label
First Name Last Name Age Favorite Color Select
Alice Egghead 33 blue
Bob Smith 43 purple
Charlie Jones 23 yellow
Denise Brown 53 green
Eloise Humperdink 83 red

Details

Implementing This Widget

Implementing the Collapsing Table widget is done when you want to have a keyboard-focusable, responsive table that is automatically rendered as a list when a browser width threshold is reached.

Prerequisites:

In order to use the Collapsing Table widget, you must first get a reference to a given table in your DOM to use it as the argument into the deque.makeTableResponsive call.

To implement the Collapsing Table widget:

  1. Get a reference to the desired table in your DOM, then use it as the argument into deque.makeTableResponsive.

    Note: From now on, when the browser falls below a default setting of 300px wide, the table will be rendered as a list; when it's wider than that threshold, it'll be rendered as a table.

  2. Optionally, use either of the following two additional arguments as desired:
    • labelDetails: An object with two fields, labelColumns and labelFunction. labelColumns is an array of column indexes (0-based) specifying which columns should be extracted per row and used as a label. You must then provide a labelFunction, which takes the cells in those columns as arguments and must return a string of HTML to serve as the label for that row in the ensuing list.

      So for instance, if column 1 is first name, and column 2 is last name, you can specify { labelColumns: [0, 1], labelFunction: function(firstName, lastName) { return firstName + ' ' + lastName; }} as your labelDetails payload. These two columns will be extracted and formatted as you can see above. Any unselected columns will simply be added to a nested internal list.

      One special feature of this approach is that, if you select all columns as label columns as in the third example above, you can represent your entire table as a list of human-readable strings. For certain use cases this may be preferable to nesting lists.

      Note that non-string elements are supported, as you can see from the select buttons in the examples. In fact, as long as a valid unique ID is present on your focusable items, focus will even be maintained through mode transition!

    • Threshold Value: The third and final argument is the threshold value. This defaults to 300px, but provide any integer as a third argument if you want the list/table transition to happen at a different threshold.

Expected Operation and Accessibility Features

The expected operation differs depending on the combination of arguments in the example you implement (No Label Function, Two-Column Label Function, or Row Summed Up Into Label).

Validation and Developer Notes

In order to validate this control, you can generally resize the browser to a size above or below the set width threshold to test whether the table is rendered as a list. Additionally, you can ensure certain columns are not selected to verify they are added to a nested, internal list.

Notes for the Developer:

As long as a valid, unique ID is present on your focusable items, focus will even be maintained through mode transition!

Example Implementation Reference

To view an implementation of this widget, see Collapsing Table widget examples.