HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidelines
Anatomy of a customizable DataTable
An action to manage column visibility and order controls
Column visibility
Column order
Templates

DataTable Customization

Allows users to customize which columns are visible in a data table and in what order they appear.

Users

6 items
Name
Status
Role
Location
Hours available
Eric Soderberg
Online
Engineer
San Jose, CA
10
Taylor Seamans
Online
Engineer
San Jose, CA
30
Matthew Glissmann
Offline
Engineer
Fort Collins, CO
25
Greg Furuiye
Online
Designer
Fort Collins, CO
5
Vicky Avalos
Offline
Designer
San Jose, CA
25
Shimi Yacobi
Online
Engineer
Fort Collins, CO
12

Guidelines

For complex data tables with many columns, the user will need the ability to configure which columns they want to see and the order in which these columns appear.

This functionality is handled by a dropdown that contains two tabs: one for selecting which columns should appear in the DataTable and another for ordering the columns.

Anatomy of a customizable DataTable

An action to manage column visibility and order controls

Since we want to customize the data table itself, we have separate controls for changing which columns are shown in the data table and their order. Place a button with a Manage columns icon between the search and filter controls on the left. These view controls change what items are shown in the data table or how they are presented rather than changing the items themselves. The right aligned Actions menu is mainly for actions which modify items in the data table.

Column visibility

Clicking on the Manage columns button opens a dropdown which has two tabs. The first tab should be active and labeled "Select columns." The tab content should consist of a Search input and a CheckBoxGroup that lists all possible table columns.

When a column in the list is checked, it is visible in the data table. When it is unchecked, it is removed from the data table. Adjustments to the table data should occur immediately as the user checks or unchecks a column, as opposed to waiting until the dropdown closes.

The user can also search for a specific column by typing in the Search input.

loading...

Column order

The second tab of the dropdown should be labeled "Order columns." It contains a list of the selected columns from the "Select columns" tab. A user can reorder the columns either by dragging and dropping the column names in the list or by using the move up/move down buttons that are present next to each column name.

Similar to column selection, the reordering of the data table columns should take place immediately, as opposed to waiting until the dropdown closes.

loading...

Related

Related content you may find useful when using DataTable Customization.

HPE Tables Preview

DataTable

DataTable presents data in a column and row format.
HPE Lists Preview

Lists

Go-to patterns for displaying many services, devices, users, and more.
HPE Filtering Preview

Filtering

Allows users to create a focused data set by specifying data attributes and values of interest.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page