DataTable Customization
Allows users to customize which columns are visible in a data table and in what order they appear.
Users
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...
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.