See also: Data Tables

Lead:  Liav Nadler 

Description

A column picker dual list selector is a component allowing the user to select and reorder columns in a data tablemultiple items. It is especially useful when the number of available items is large.

A common application for a dual list selector is the "Customize Columns" popup used in data tables.

Because it is also the most complex, this page will describe the Customize Columns popup.

Usage & Behaviour

General guidelines

• The column picker dual list selector appears in a dialog box titled Customize Columns
• It is triggered by clicking the Columns action in the column contextual menu
• The dialog box component 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)

...