Table with selectable rows and also checkbox selection

[ARChilton]

Description

• Make the table component more interactive by providing selectable rows and hover styles when rows are selectable.
• Allow for checkbox selection on rows

I ended up building this out of the partial components of the current table, for a link to the repo contact me via NDS slack

[k9dh3zij]

Starting Design work on patterns for tables. Will include the requests above as well as features like banding, sorting, moving columns etc.

[k9dh3zij]

Thanks @ARChilton.

As discussed, I've designed two options to select a single or multiple rows, using existing DS components:

You can test/interact with both designs here: https://dtuds2.axshare.com/#id=d3y1e1&p=simple_designs_for_selectable_rows&g=1

Eventually, I'd love for us to redesign our tables altogether. There's a bit of inspiration here: https://dtuds2.axshare.com/#id=794j3f&p=inspiration&g=1

...but we'll need to prioritise resources appropriately.

I've noted the suggestion to enable downstream developers to add click, double click, hover functions to the rows in their typescript types. Allow the end user of the library to determine how they use the table without restriction.

My only concern is that without guidance, this can pave the way for solving similar problems in different ways. I'd like us to have some patterns/guidance in place, to provide a consistent user experience between applications before we do that.

[k9dh3zij]

On hold while we've paused development of new features.

[github-actions[bot]]

This issue has been marked as stale because it has been open for 60 days with no activity

[jpveooys]

Hi,

We currently have a multi-select table, similar to the last example on the first Axure link, in the design for our app. (Although the design could still change.)

Here are a couple of findings from trying to implement it with the current table component:

• The current component is typed to only allow strings in header cells (meaning a checkbox can't be added there without violating the types)
• Adding such checkboxes to a table requires a hidden label (either aria-label or visually hidden). However, the 'no-container' variant of the Checkbox component currently requires a (visible) label. Passing an empty string for the label causes problems with padding and the click area – there ends up being redundant padding to the right of the checkbox, and the top and bottom of the checkbox can't be clicked. (Seems like the height of the click area is implicitly coming from the label height.)

[markhigham]

Closing: Will be implemented in https://github.com/Royal-Navy/design-system/pull/3737