Posted by & filed under Content Views, Table View.

Overview

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:

  1. the toolbar is detached from the table
  2. 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:

  1. icon button
  2. 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

Collapsed state

Column Visibility Component, collapsed

Expanded state

Column Visibility Component, expanded


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

column visibility, table view 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

column visibility table view 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

column visibility table view toolbar

Toolbar for card view

column visibility card view toolbar

One Response to “Table View: Show/Hide Columns – Conceptual Design”

  1. Serena Doyle

    Hi Jenn, the blog looks great!

    Do you think that in the next iteration of the design you could suggest a default tooltip for the new icon? If there is any way to get early access to the new icon, it would be really helpful as well.

    Thanks!

    Reply

Leave a Reply

(will not be published)