...
The dual list selector appears inside a workspace or in a dialog.
In data tables, it is triggered by clicking the Columns option in the action menu.
Structure
The column picker contains
...
Two checkbox lists:
Available Columns (on the left) - a list of all of the columns available in the table.
Chosen Columns (on the right) - a list of the currently chosen columns.
Each list shows a selected items indicator, next to a global checkbox, allowing users to select / deselect all items on that list.
Move buttons (right and left), shown between the two lists. These allow the user to move items between the lists.
Reorder buttons (up and down), shown underneath the Chosen Columns list. These allow the user the reorder the chosen items.
A “Up to X” indicator, shown next to the Chosen Columns header (optional - if a maximum number of chosen items was set).
A search bar above each list (optional). This allows the user to quickly locate specific items. The search bar is optional, depending on the number of items.
A vertical scrollbar, used where the list is too long to be displayed in its container.
A Restore defaults button (optional), shown in the bottom-left corner of the dialog box.
Done and Canceldialog buttons, shown in the bottom-right corner of the dialog box.
Order
The Selected Columns list shows the list of columns in the same order as they appear in the data table.
The Chosen Columns list is sorted alphanumerically.
States
The Move buttons (left and right) are disabled until the user has selected at least one item: selecting items in the right list enables the left button, and vice versa.
The Reorder buttons (up and down) are disabled until the user has selected at least one item in the Chosen Columns list:
Selecting the top item will only enable the down button.
Selecting the bottom item will only enable the up button.
Selecting any other item will enable both the up and down buttons.
If a column cannot be moved or reordered, its checkbox should be disabled.
Interaction
Selecting Items
In On either listlists, checking an item selects it. .
Some items on the Chosen Columns list may be defined as fixes (hard coded), so users cannot select them.
The user can select more than one item using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selectionall items on a list by checking the corresponding main checkbox.
Selecting items in on one list deselects all items in the other list.
...
The user can move selected items between lists using one of two methods:
clicking the right or left button between the lists.
using Drag and Drop.
Items moved to the Selected Chosen Columns list will appear at the bottom of the list.
Items moved to the Available Columns list will appear in their original locations, so the list is always sorted alphanumerically.
Items should remain selected after they were moved.
Moved items should always be visible. Where the target list is outside of the visible area, the list will scroll automatically.
Reordering Ordering items
In the Selected Chosen Columns list, the user can reorder items by selecting them and then clicking the up and down buttons underneath the list.
Reordering multiple items together will keep their relative locations (i.e. including the gaps between items, where they exist).
Items can also be reordered using Drag drag and Dropdrop. In this case, when reordering multiple items they will be clustered.
After the items are reordered they will remain selected until the user selects other items or deselects the corresponding global checkbox.
Restoring Defaults
Clicking the Restore Defaults button restores the both lists to their original states ('factory default').
Pinning columns (optional)
 |
The user Where defined, users can pin any column in on the Selected Chosen Columns list by clicking the pin icon, which is shown on hover. In this case:
the icon toggles from pinned to unpinned.
the item moves to the top of the list.
the item can be ordered only inside the group of pinned items.
within a Data Table data table, pinned columns are anchored to the left. Pinned columns can be reordered only inside the group of pinned columns.
The user can unpin the item by clicking the pin icon again.
...