Ask HN: 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.
10 comments
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...
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.
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.
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/...
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
Bremser (2019) suggests that long beats wide (Maxim 19).
Bremser (2019) https://support.sas.com/resources/papers/proceedings19/3062-...
Bremser (2019) https://support.sas.com/resources/papers/proceedings19/3062-...
Have repeated table header rows <tr><th>…</tr> in between the table data rows to always have the column headers nearby. Amazingly, this just works when dumped into <tbody>.
In my own experience it keeps both me and others from getting lost too easily.
In my own experience it keeps both me and others from getting lost too easily.
I'm developing a web app that makes it easier to view Google sheets (and forms) on mobile. My solution is:
- Expandable rows
- Optional custom row summary
- By default, the row summary is just as much of the row that fits.
- Some data in the row summary is shortened (like a timestamp is reduced to just a date or relative date)
- Sticky header row (with the column titles)
Live demos:
- Custom summary rows: https://veneer.leftium.com/base/g.chwbD7sLmAoLe65Z8/list
- Sticky header rows: https://veneer-nd4fdlulz-leftium.vercel.app/v/s.1mJ_jtZuqL40...
Source code: https://github.com/Leftium/veneer
- Expandable rows
- Optional custom row summary
- By default, the row summary is just as much of the row that fits.
- Some data in the row summary is shortened (like a timestamp is reduced to just a date or relative date)
- Sticky header row (with the column titles)
Live demos:
- Custom summary rows: https://veneer.leftium.com/base/g.chwbD7sLmAoLe65Z8/list
- Sticky header rows: https://veneer-nd4fdlulz-leftium.vercel.app/v/s.1mJ_jtZuqL40...
Source code: https://github.com/Leftium/veneer