DataTable Customization

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.

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.

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.

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.