See also: Data Tables
Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
...
The dual list box appears in a dialog box titled Customise Columns
It is triggered by clicking the Columns action in the column contextual menu
Structure
The component contains two lists:
Selected Columns (on the right): a list of the currently displayed columns of the table
Available Columns (on the left): a list of all other columns available for that table
Between the two lists there is a set of buttons, allowing the user to move items between them (as described below)
Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (as described below)
Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items (e.g. 7/22)
At the top of each list there is a search bar, allowing the user to quickly locate specific items. The search bar is optional, depending on the number of items
If the list is too long to be displayed in its container, a vertical scroll bar appears
At the bottom-left corner of the dialog box a Restore Defaults button appears (see Interaction below)
...
The user can lock any column on the selected columns list by clicking the pin icon, shown on hover. In this case:
The icon changes from idle to selected
The item moves to the top of the list
The item can be ordered only inside the group of locked items
On the actual table the locked columns are anchored to the left. Locked items can be reordered only inside the group of locked items
The user can unlock the column by clicking the lock icon again
...
Validation and Errors
If the user removed all items from the selected list:
The reordering buttons will be hidden
A message will appear, guiding the user to select at least one item
...
In this case, clicking the Done button will:
Show an error
Switch the button to disabled state
...
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
...