Ideal UI behaviour for tables on mobile
What is the recommended behavior for tables on a mobile UI?
5 Replies
What do you mean by tables behaviour?
I recommend using headless library like tanstack tables https://react-table-v7.tanstack.com/docs/overview and use responsive styling with tailwind
that
that's what Im doing
How should the UI change when the screen gets smaller
Use media queries to render different table layouts in different sizes.
Alternatively keep it the same size and let it overflow so the user scrolls sideways
Look at some examples. Perhaps see how Facebook ads or google ads manager do their tables on mobile
Agree. As much as we can shrink it, there is still not enough room if you have 5+ columns. Better make it horizontally scrollable on mobile.
I think there are 2 ways of doing things.
1. Table on larger screens and card and stacked data in smaller screens - One non-react example of this is something like https://johnpolacek.github.io/stacktable.js/ . I've never found a react based lib for this that I like but you can mimic the behavior with tailwind.
2. X Scrolling - You can just let the table have x direction scrolling as the screen gets smaller.
I went into great effort to try to do a hybrid of these for a project where we had kind of line item elements with cells in the left-most 50% of the table and so I just broke the row in half and stacked both halves as the screen got smaller. That was ok but it turned out to be a bit of a bitch to implement. Next time I'll just go with side scrolling and a typical table component with tailwind.
stacktable.js
The responsive tables jQuery plugin for stacking tables on small screens