...

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.

  • If only some of the items are selected, the global checkbox will switch to a partially selected state (see Check Box).

• 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.

• Apply and Canceldialog buttons, shown in the bottom-right corner of the dialog box.

...

Ordering

• 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.

...

• 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.

Grouping

• Instead of a checkbox list, the Available Columns area can display a multiple selection tree list, allowing the user to quickly select and choose groups of items.

• In this case, an icon button will appear next to the global checkbox, allowing users to quickly collapse and expand the list.

Interaction

Selecting Items

...

• Where defined, users can pin any column on the 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, 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.

Validation and Errors

...

Removing all items

...

If the user removes all items from the Chosen Columns list:

• the search bar, reordering buttons and the Apply will be are disabled.

• a message will appear inside the containerappears within the chosen columns area, advising the user to select at least one item.

...

Exceeding the maximum number of columns

• It is recommended to limit the number of items which can be selected, depending on common usage and system performance.

• In this case, the maximum Users can move any number of items should be shown with the count above the Selected Columns list, regardless of the number of available columns.

  If the user reaches the maximum number of items:

• the right arrow button will be disabled.

• dragging items from the Available Columns list will be disabled.

a relevant message will appear

to the Chosen Columns area, but if the number of items in that area exceeds the maximum number:

• The apply button is disabled.

• An error message appears at the bottom of the popup.

...