See also: Data Tables

Lead:  Liav Nadler 

Description

...

• The column picker appears inside a dialog box named Set Columns, including Ok and Cancel buttons
• The dialog box contains two lists of items: Available
  • Selected Columns
   
  • (on the
  left) and Selected Columns
  • right): a list of the currently displayed column in the data table
  • Available Columns (on the
  right)
  • 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 a search bar
• If the number of items on a list is large enough to exceed its container, a scroll bar will appear

...

• 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 

Interaction

<<for example, how to change a value – type, arrows, use slider>>

...

• Mouseover an item will switch to hover state
• Clicking an item will select it
• The user can select more than one item on each 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

Best practices

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

...