What's the best approach for displaying data tables on mobile?
I’m working on a web app with some fairly data-heavy tables (think product inventories, user lists, analytics dashboards, etc.) and the mobile experience is pretty rough. On desktop everything looks fine, but on phones it’s a mess. I’ve tried just letting tables scroll horizontally but it feels clunky. I’ve seen some apps convert tables to card-style layouts, others use expandable rows, and some just hide columns. What patterns have you found actually work well in production? Any libraries or examples you’d recommend checking out? Bonus points if you’ve done user testing on this and have data on what users actually prefer.
Even if you don’t use tailwind the tailwind UI page has some nice example options. It’s nice in that they’re all on a single page so can quickly compare what UX might work for your use case.
https://tailwindcss.com/plus/ui-blocks/application-ui/lists/...
It depends on the data, but the best implemented some sort of column selector so that unnessesary data isn't even displayed
If you’re looking for reliable verified accounts, I’ve had a great experience with buyinstapva.com. They provide Google Voice, Instagram, and Gmail PVAs — all are active and secure for long-term use. Just message them directly from their website for fast delivery.
A couple suggestions:
1. Pay attention to the first 2-3 columns, the ones the user immediately sees. E.g. short or hidden id, short but readable name, useful next column (e.g. sales or views or whatever is the most useful data).
2. Put columns that need to be evaluated together close to each other. On desktop it's easy to see 2 numbers even if there's a column in the middle, on mobile it may require scrolling horizontally.
In summary, just focus on what people want to see at a glance and make it easier for them.
I'm just a user suffering the pain, this is an example of a table I need/want to monitor and it's very poorly done, I need total revenue = sum of column 5 + 7, on mobile it's a very bad experience due to column 6 in the middle, unnecessary width of some columns with repeated text, etc. https://app.vx.tools/income/BfgMdL4FaNHp5zZpD7WMYG5sZUrCWQPE...
What are the users trying to accomplish? "Look at data in a table" is rarely actually the reason someone is looking at a table. They are trying to gain information in order to... what? Don't let a prior implementation choice lock down your thinking. Ask why are they looking at the data. What are they trying to learn? What next action does the data drive?
Your best UX is going to depend on how those questions are answered. Like you said -- cards are one option to step away from tables. There may be others. But take a step back and understand the underlying problem that the table solves, then see if there is an alternative approach.
Bremser (2019) suggests that long beats wide (Maxim 19).
Bremser (2019) https://support.sas.com/resources/papers/proceedings19/3062-...