Description

A column picker is a component allowing the user to select and reorder columns in a data table

Usage & Behaviour

General guidelines

The column picker appears inside a dialog box named Set Columns
It is triggered by clicking the Columns option 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 below)
Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (see 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 is optional, depending on the number of items
If the list is too long to be displayed in its container, a scroll bar appears

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

States

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

Interaction

Mouseover an item triggers hover state

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

Moving items between lists

The user can move selected items between lists using one of two methods:
- Clicking the right or left button between the lists
- Using drag and drop
After the items were moved they remain selected until the user selects other items

Reordering items

The user can reorder selected items on the selected columns list by clicking the up or down buttons under the list
After the items were ordered they remain selected until the user selects other items
The user can also reorder items using drag and drop

Locking Items

The user can lock the first items on the selected columns list by clicking the lock icon on a specific item
Locking columns means that on the data table these columns will be anchored to the left side of the table, and could not be moved
Locking an item will lock all the items above it
Locked items on the list cannot be reordered
The user can unlock an item by clicking the relevant lock icon again

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>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Zeplin link	Screen thumbnail

Code

<<a box containing the code - discuss with Femi>>

Column Picker