Do you want to know how to make data tables look great on mobile screens? You cannot force the same table layout into a mobile viewport. Instead, you need to adapt your table to this specific card layout. Watch the video to see what it looks like.
Discussion about this post
No posts
Great video, thanks for sharing!
One big problem I see with this design is that it makes comparing data very hard. The card layout looks nice and shows everything in one place, but it’s not good when users want to compare one detail across many records. Most of the other information in each card becomes noise and gets in the way.
So, I think this layout only works well if the user doesn’t need to compare records. Also, things like sorting and filtering become less useful with this type of layout.
Another point: if each record has, say, 20 data points, the card gets too big. It stops being a small summary and starts looking like a full screen. At that point, it doesn’t really help anymore, especially since the data was first meant to be shown in a table.
There are other better options too such as using a landscape view.