When using the Table component on a small screen or mobile, the table width often exceeds the screen width, as you would expect in many cases with several columns. It isn’t practical to scroll horizontally to reach the action, particularly given that the first column isn’t sticky and disappears as you scroll over, potentially losing track of the row.
One enhancement I’d love to see, is whenever the table width exceeds the screen width, the ellipsis (dots) should float above the rest of the row data on the RHS of the screen.
This UX issue is stopping me from upgrading from the OG table to the new table in some cases (i.e. staff working both on desktop in the office and on mobile in the field).
A current workaround is probably to use the Screen Width device data in a visibility condition, and show the new table on large screens, and a list component on small screens. The problem still stands that this isn’t a simple solution, as if you are using auto column widths, the exact toggle width is hard to define.
Below is the change I would like to see for the Table component.
There are two additional columns off screen.
