Skip to end of banner
Go to start of banner

Column Picker

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 8 Next »

See also: Data Tables

Lead:  Liav Nadler ONGOING 

Description

A column picker is a pattern allowing the user to select and reorder columns in a data table

Usage & Behaviour

General guidelines

  • The column picker appears inside a dialog box named Set Columns
  • It is triggered by clicking the Columns option on the column contextual menu
  • The dialog box contains two lists of items:
    • Selected Columns (on the right): a list of the currently displayed column of the data table
    • Available Columns (on the left): a list of all other available columns for that table
  • Between the two list there is a set of buttons, allowing the user to move items between lists (see below)
  • Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (see 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 a specific item
  • If the number of items in a list is large enough to exceed its container, a scroll bar appears

Order

  • The selected columns list shows the list columns in the same order as on the original table
  • The available columns list is ordered alphabetically

States

Interaction

  • Mouseover an item triggers hover state

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
  • Selecting items on a list deselects all the items on the other list

Moving items between lists

  • The user can move the selected items to the other list by clicking the right or left button between the lists
  • After the items were moved they remain selected until the user selects other items
  • Drag and drop?

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 drag and drop

Locking Items

  • The user can lock the first items on the selected columns list by clicking the lock icon on a specific item
  • Locking an item will lock all the items above it
  • Locked items cannot be reordered
  • The user can unlock an item by clicking the lock icon again

Best practices

<<e.g. Slider should display a .label its on>>

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

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

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

Contrast & size compliance

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

Design

Zeplin linkScreen thumbnail





Code

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

  • No labels