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 5 Next »

See also: Data Tables

Lead:  Liav Nadler ONGOING 

Description

A column picker is a component 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
  • The dialog box contains two lists of items:
    • Selected Columns (on the right): a list of the currently displayed column in 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
  • Under the selected columns list there is a set of buttons, allowing the user the reorder the 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 
  • Each list will contain a search bar
  • If the number of items on a list is large enough to exceed its container, a scroll bar will appear

Order

  • The selected columns list will show the list of currently displayed columns in the same order as the original table
  • The available columns list will be ordered alphabetically 

Interaction

  • Mouseover an item will switch to hover state
  • Clicking an item will select it
  • The user can select more than one item on each list, using the Ctrl (or Command) key for discrete selection or the Shift key for a block selection
  • Selecting items in a list deselects all items on the other list

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