See also: Data Tables

Lead:  Liav Nadler 

Description

...

Because it is also the most complex, this page will describe the Customise Columns popup.

...

Usage & Behaviour

General guidelines

• The dual list selector appears in a dialog box titled Customise Columns

• It is triggered by clicking the Columns action in the column contextual menu

• The component contains two lists:

  • Selected Columns (on the right): a list of the currently displayed columns of the table

  • Available Columns (on the left): a list of all other columns available for that 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)

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

States

• The right and left buttons are disabled until the user selected at least one item: selecting items on the right enables the left button, and vice versa

• The up and down buttons are disabled until the user selected at least one item on the Selected Columns list:

  • Selecting the top item will enable only the down button

  • Selecting the bottom item will enable only the up button

  • Selecting any other item will enable both the up and down buttons

• If the table contain columns that cannot be removed or reordered, the relevant items on the selected columns list will show as disabled

Interaction

• Mouseover an item triggers hover state

• Clicking the Restore Defaults button restores the dialog box to its original state, before any changes were made to the columns list

Selecting Items

• Clicking an item selects it. The user can select more than one item on the list, using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection. Toggle buttons?

• Selecting items on a list deselects all the items on the other list

Moving items between lists

• The user can move selected items between lists using one of two ways:

  • Clicking the right or left button between the lists

  • Using drag and drop

• After the items were moved they remain selected until the user selects other items

Reordering items

• The user can reorder selected items on the selected columns list by 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

Locking columns (optional)

• The user can lock any column on the selected columns list by clicking the pin icon, shown on hover. In this case:

  • The icon changes from idle to selected

  • The item moves to the top of the list

  • The item can be ordered only inside the group of locked items

  • On the actual table the locked columns are anchored to the left. Locked items can be reordered only inside the group of locked items

• The user can unlock the column by clicking the lock icon again

...

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>>

...

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >> >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

...

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

<<a box containing the code - discuss with Femi>>