[Modification] - Table

[JamesMYA]

Modification

Table Component

The MYA team would love an option to keep the 'desktop' styling for a two column table on smaller breakpoints.

We have a scenario in MYA where we have an input table (2 column, text and input) which can potentially have 15 rows. Some of the text (users names) could be long and wrap over two lines and the current mobile styling in Canopy results in elements being unaligned and a lot of repetition of labels.

The standard two column (desktop) layout works very well and has been user tested.

Notes from developer.
Propose a flag to override the default behaviour (so it's not a breaking change) and use that to set a class that can be used to modify the css.

[alexcanning]

Thanks for the request. I think the point to note here (aside from not introducing a breaking change) is that the layout we have for mobile was designed to make tables accessible on smaller screen sizes, and the behaviour is desirable. However, for tables like the one in your example, the desktop layout is more appropriate.

The developer approach has been agreed with @paul-request so looks good to go.

There has also been a bug raised for the text alignment on the responsive table - #1190.

[alexcanning]

@owensgit reminded me that it is already possible to display the desktop table variant at smaller breakpoints by using the showColumnsAt input of LgTableComponent - https://legal-and-general.github.io/canopy/?path=/docs/components-table-guide--page#inputs, therefore resolving this request.