Alternative responsive table strategies

[iBobik]

Description

Currently only one responsive strategy is supported - horizontal scroll, but this is not best for all cases. It is possible to hack it by custom CSS or create multiple implementations switched by media query, but usually it means very tight reliance on table markup, so it is easy to break.

For most cases this strategies should be enough:

Horizontal scroll with first/last cell fixed

Currently only strategy implemented.
Good when user needs to focus only to some columns at a time

Prioritized columns

Good when only 1-2 columns are important. Rest can be manually shown. Can be combined with horizontal scroll.
Easy to implement in UI kit.

Row/cell flip and horizontal scroll

Good when user needs to focus only to single row or compare two/three following rows.
Easy to implement in UI kit.

Graphical chart

Good for numbers, but usually both table and chart is required.
Needs custom implementation.

Table heading next to each row

Very good when user needs to focus only to single row, but without confusion of horizontal scroll.
Easy to implement in UI kit.

Change rows to carts

Same like previos, better usability, but needs custom implementation.

Good demos of different approaches:
https://elvery.net/demo/responsive-tables/

It would be good if the selected strategy could be applied based on media query, because the breakpoint will depend on the use-case.

When not implemented as a feature it would be nice to just show example how to implement it from outside..

Additional context

No response