Data table: explorations

[Spark450]

Acceptance Criteria:

• To be worked on by @chrisolsen-goa
• Document spike in this format
• Consider how the data card may be implemented along side the data table (e.g. teams may want to display the same data in either the card or table depending on screen size)
• Decide if this is a new component or an extension of the current table component
• POC includes navigation using "data grid" (as referenced in design)
• 3 row heights implemented and can be included as property
• Zebra striping property
• Table header actions
• table row actions
  • button
  • button group
  • Icon button
  • Icon button with popover
• Horizontal scroll scroll property

Figma design

[Spark450]

@chrisolsen when you're ready to work on it, I have created a spike for the data table component.

[chrisolsen]

Since as by UI design the datatable item layouts can vary greatly (table style, card style with certain fields being static while others can be controls), there isn't a good way to make a component that is easy to use and can deliver the variety of designs that would be required by different teams.

Instead, identifying the common functionality amongst the designs and delivering it through the DataTable component would be the best solution.

The common functionality is

• Checkbox selection of items
• At the top level, being able to select/deselect all
• use arrows to move within cell elements to allow for a11y tools to read item content.

[Spark450]

I am closing since the base component issue is well underway #2609