See also: Data Tables
Lead: Liav Nadler
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
...
The component contains two lists:
Available Columns (on the left): a list of all columns available for the table
Selected Columns (on the right): a list of the currently displayed columns
Between the two lists there is a set of buttons, allowing the user to move items between them
Under the selected columns list there is a set of buttons, allowing the user the reorder selected items
Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items (for example: 7/22)
At the top of each list a search bar may appear, allowing the user to quickly locate specific items. The search bar is optional, depending on the number of items
In case the list is too long to be displayed in its container, a vertical scroll bar appears
At the bottom-left corner of the dialog box there is a button titled Restore Defaults
The Available Columns area may contain a tree list. In this case, button for collapsing and expanding the tree may appear:
...
Order
The Selected Columns list shows the list of columns in the same order as they appear on the data table
The Available Columns list is sorted alphanumerically
...
The user can move selected items between lists using one of two methods:
Clicking the right or left button between the lists
Using Drag drag and Drop
Items that were moved to the Selected Columns list appears at the bottom of the list
Items that were moved to the Available Columns list appear at their original locations, so the list is always sorted
Items that were moved remain selected
In addition, moved items should be visible. In case the target area is outside of the visible area of the list, it will scroll automatically
...
On the Selected Columns list, the user can reorder items by selecting them and then clicking the up or down buttons under the list
After the items were ordered they remain selected until the user selects other items
The user can also reorder items using /wiki/spaces/~347593403/pages/918783940
Reordering multiple items will keep their relative locations
If the first item reached the top of the list, the up button will be disabled
If the last item reached the bottom of the list, the down button will be disabled
(including gaps between items, if exists)
Restoring Defaults
Clicking the Restore Defaults button restores the dialog box to its original state (“factory default”)
After clicking the button the user can confirm the action by clicking the Done button, or to cancel
...
If the user removed all items from the selected Selected Columns list:
The search bar and reordering buttons are get disabled
A message appears inside the container, guiding the user to select at least one item
...
In this case, clicking the Done button:
Shows an error message at the bottom of the dialog
Disables the button
...
Limiting the Number of Items
It is recommended to limit the number of selected items. For example, If the number of available columns is 30 items or more, the user will be able to select no more than 30 items, depending on common usage and system performance
In this case, the maximum number of items will be presented within the indicator at the top of the Selected Columns list, regardless of the number of available columns
If the user reached the maximum number of items:
The right arrow button will be disabled
Dragging items from the Available Columns list will be disabled
A relevant message will appear at the bottom of the popup
...