Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

...

...

Status
colourBlue
titledone

Table of Contents

Description

An extended rows Extended Rows table is a type of data table, Data Table where each row contains , under the set of values, a line of text (for example, a quote from an interaction)

...

underneath the set of values.

...

Usage &

...

Behavior

An extended rows table is similar to basic tablea standard Data Table, with the these exceptions described below::

  • In addition to the regular content, each row will contain a block of text, running across the columns.

  • The maximum number of visible rows in the block will be predefined.

  • If the text is longer than the width of the columntable, the text it will be truncated, showing the an ellipsis sign after the last word.

  • In this case, hovering the text will show a tooltip Tooltip with the entire text.

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

Keyboard Operation

<<Explore and describe conventions>>

Best Practices

Use when there is a need to show item-level information, relevant across all columns.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link

Screen thumbnail

<<Zeplin Link>>

<<Screen with 200 width>>

Code

...

Code

...