See also: Data Tables

Lead:  Liav Nadler 

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 in a dialog box titled Customize Columns
• It is triggered by clicking the Columns 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 (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 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 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

...

• The user can lock the first column by clicking the lock icon, shown on the first item of the selected columns list. In this case:
  • The icon changes from idle to selected state
  • The item cannot be moved or dragged: drag indicator disappears and arrow buttons are disabled
  • On the actual table the locked column is anchored to the left, and can not be moved
• The user can unlock the column by clicking the 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

Code

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