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.
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.
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.
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-...
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.
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
Sticky first column, and sticky headers.