Description
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