See also: Data Tables
Lead: Liav Nadler Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
A column picker is a component allowing the user to select and reorder columns in a data table
Usage & Behaviour
...
- The column picker appears inside in a dialog box named Set titled Customize Columns
- It is triggered by clicking the Columns option action in the column contextual menu
- The dialog box 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 (see as described below)
- Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (see 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. This 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)
Order
- The Selected Columns list shows the list of columns in the same order as they appear on the data table
- The Available Columns list is sorted alphabetically
...
- The right and left buttons are disabled until the user selected at least one item: selecting items on the right enables the left button, and vice versa
- The up and down buttons are disabled until the user selected at least one item on the Selected Columns list:
- Selecting the top item will enable only the down button, and vice versa
- Selecting other items will enable both the up and down buttons
- If the table contain columns that are mandatory, the equivalent items on the selected columns list will be shown as disabled. The user will not be able to select or move these items (see interaction Interaction below)
Interaction
- Mouseover an item triggers hover state
- Clicking the Restore Defaults button restores the dialog box to its original state, before any changes were made to the columns list
Selecting Items
- Clicking an item selects it. The user can select more than one item on the list, using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection
- Selecting items on a list deselects all the items on the other list
...