See also: Data Tables

Lead:  Liav Nadler 

Description

...

• The column picker appears inside a dialog box named Set Columns
• The dialog box contains two lists of items:
  • Selected Columns (on the right): a list of the currently displayed column in the data table
  • Available Columns (on the left): a list of all other available columns for that table
• Between the two list there is a set of buttons, allowing the user to move items between lists
• Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items
• Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items 
• Each list will contain contains a search bar
• If the number of items on a list is large enough to exceed its container, a scroll bar will appear

Order

• The selected columns list will show the list of currently displayed columns in the same order as the original table
• The available columns list will be ordered alphabetically alphabetically

States

Interaction

• Mouseover an item will switch to triggers hover state

Selecting Items

• Clicking an item will select itThe selects it. The user can select more than one item on each the list, using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection
• Selecting items in a list deselects all items on the other list

Moving items between lists

• 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

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

Locking Items

Best practices

<<e.g. Slider should display a .label its on>>

...