For complex data tables with many columns, is it important for the user to be able 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.
What makes up the customizable DataTable?
An action to display column visibility and order controls
Place a button with an
Edit icon next to the
Actions menu for the data table on the
right side above the data table. The
Actions menu is mainly for actions which modify
items in the data table. Controls like the search and filter controls change what items
are shown in the data table or how they are presented rather than changing the items
themselves. Since we want to customize the data table itself, we have a separate controls
for changing which columns are shown in the data table and their order.
Clicking on the
Edit 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.
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.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.