See also: Data Tables

Lead:  Liav Nadler 

Description

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

...

• The column picker appears inside a dialog box named Set Columns
• It is triggered by clicking the Columns option on in the column contextual menu
• The dialog box contains two lists of items:
  • Selected Columns (on the right): a list of the currently displayed column columns of the data table
  • Available Columns (on the left): a list of all other columns available columns for that table
• Between the two list lists there is a set of buttons, allowing the user to move items between lists 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 a specific itemitems
• If the number of items in a list is large enough to exceed too long to be displayed in its container, a scroll bar appears

Size

• The number of items shown on each list will not exceed 10

Order

• The selected columns Selected Columns list shows the list of columns in the same order as they appear on the original data table
• The available columns Available Columns list is ordered 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

...

• The user can move the selected items to the other list by clicking the right or left button between the lists
• After the items were moved they remain selected until the user selects other items
• Drag and drop? Is dragging limited to the marked area only?

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

...

• 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

Best practices

...

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

...