See also: Data Tables

Lead:  Liav Nadler 

Description

...

• The component contains two lists:

  • Selected Available Columns (on the rightleft): a list of the currently displayed columns of the all other columns available for that table

  • Available Selected Columns  (on the leftright): a list of all other columns available for that the currently displayed columns of the table

• Between the two lists there is a set of buttons, allowing the user to move items between them (as described below)

• Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (as described below)

• Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items (e.g. 7/22)

• At the top of each list there is a search bar, allowing the user to quickly locate specific items. The search bar is optional, depending on the number of items

• If 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 a Restore Defaults button appears (see Interaction below)

...

• In this case, clicking the Done button:

  • Shows an error message

  • Disables the Done button

...

• 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

• If the user reached the maximum number of items:

  • The right arrow button will be disabled

  • A relevant message will appear at the bottom of the popup

...

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

...