The Column Visibility control enables users to define what columns are visible within a table. Column visibility helps users consume data by allowing the user to hide any data that doesn’t assist the user in completing his task. The control is represented as an icon button, that when clicked, displays a dropdown menu with multi-selection enabled where the user can select which columns are visible.
There are currently two variations of the table design:
- the toolbar is detached from the table
- the toolbar is attached to the table
The goal of this design is to define a position in the toolbar for the Column Visibility icon, so that the positioning is logical within the toolbar and consistent between the two table variations.
Design – Column Visibility component
The Column Visibility component consists of the following elements:
- icon button
- dropdown menu with multi-selection, listing each column that can display in the table
When the user clicks the icon button, then the dropdown menu with multi-selection displays. The multi-selection is implemented as a list of checkboxes with column names for labels. The columns are listed in the same order that they appear in the table.
Example 1: Column Visibility component
Design – Toolbar with Column Visibility icon
Within the toolbar of variation 1, the first two groups of controls affect content display—filters affect what contents display, and sort affects how the contents are listed. Controlling what columns display is closely related to controlling how contents are sorted in that they both affect how contents are presented and organized. Therefore, the Sort and Column Visibility controls are included in the same toolbar group.
When Sort and Column Visibility are displayed in the toolbar, the Column Visibility selection does not affect the options that are available in the Sort Selector. This allows the user to sort by a column that is not visible in the table.
Example 2: Toolbar design of table design variation 1
In variation 2, where sort is controlled by clicking the column headers, the icon for controlling what columns display still displays in the same relative position in the toolbar. Except in this example, the icon is the only element it the toolbar group.
Example 3: Toolbar design of table design variation 2
For variation 1 of the table design, the user might also have the option to toggle how the data is presented, whether as a table, list or card view. Given that the column visibility icon is available for the table view, when the user switches to another view (list or card), then the column visibility icon will no longer display in the toolbar. The goal in removing the icon, as opposed to disabling it, is to avoid unnecessary clutter within the toolbar by not including anything that isn’t actionable.
Example 4: Comparison of toolbar design between table and card views.
Toolbar for table view
Toolbar for card view