...
The dual list selector appears in a Dialog boxBox.
It is triggered by clicking the Columns option in the Action Menu.
...
The column picker contains two lists Lists:
Available Columns (on the left). A list of all of the columns available in the table, with a header.
Selected Columns (on the right). A list of the currently displayed columns, with a header.
Move buttons (right and left), shown between the two lists. These allow the user to move items between the columns.
Reorder buttons (up and down), shown underneath the Selected Columns list. These allow the user the reorder the selected items.
Selected items count, shown next to the Selected Columns header. It shows the number of selected items out of the total number of items, for example: 7/22.
(Optional) A Search bar above each list. 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, shown in the bottom-left corner of the dialog box.
Done and Cancel Dialog Buttons, shown in the bottom-right corner of the dialog box.
...
Zeplin link | Screen thumbnail |
|---|---|
  |
Code
...