https://tailwindcss.com/plus/ui-blocks/application-ui/lists/...
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...
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.
In my own experience it keeps both me and others from getting lost too easily.
Bremser (2019) https://support.sas.com/resources/papers/proceedings19/3062-...
- 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
stop50•4mo ago