I have the table below:
enter image description here

I want to show each table row using a Material card view.
Something like this:
enter image description here

Is this a good idea?
Is there any better approach?

Edit: i understand the table usage , but in some scenario its not suitable for show data.ex: what if product name is "White Mountain Puzzles Vintage Foods & Drinks - 1000 Piece Jigsaw Puzzle" and its necessary to show full name of product

  • I'm not sure I understand... Does the card view appear when clicking the row? Jun 11, 2018 at 12:58
  • @RobE no each row show as card! Jun 11, 2018 at 15:05

4 Answers 4


First thing, I would try to know is – what's the purpose of showing this data here? It looks like the data is about orders places, and relevant details. And it would be presented into the web-based Admin Panel of the system.

So here, showing it in the tabular format would be the best way according to me. Because with the tabular format, it's easy to see and find order numbers, quantity, price, etc.

With material design card view, a user would need to scroll down through a big space to find something relevant to the order, because card view occupies more space.

  • why not showing this way?? Jun 10, 2018 at 14:12
  • @MoshheghFaghdan Do you mean why should not we show it in Material Design card view? Jun 11, 2018 at 5:56
  • yes i mean why not display each row in one card? in card view i can show more date Jun 11, 2018 at 6:17
  • I answered based on what you have presented in two screenshots. It depends on what data you want to show, and what is the purpose of it. I feel the focus should be, making it simple, easy to check the data, and good use of space. As far as the long names concerned, you can show it on mouse hover of the table cell. It's just a thought. Jun 12, 2018 at 5:10

Whether it's good or bad depends on users' goals.

For sure, direct mapping the table rows into cards isn't a good decision.

Take step back from the UI to UX. Make some research on how users use the table, what are their's goals, etc.

Then having this in mind, you can explore and test solutions, striving to reach the users' goals in a best way. Usability metrics, like error rate and task speed will give you a solid ground to pick a winner.


No, it's not a good idea (but that's just my opinion)

Tables are a super useful way to display data with many properties. You remove the 2 dimensional way for people to triangulate the information they are looking for and put it in a one dimensional list. Unless you have a good filter and sort system above your cards, I don't think it's going to work well. You would also use more vertical space with cards, making it harder to find specific data. The sort order would be less easy to follow as the values are not all stacked in a column.

Maybe for a mobile view this would make sense as tables seldom work well on such small screens. Put a nice searchbox on top, could work.

  • table are useful for show many properties , but not for long width property Jun 11, 2018 at 7:02

As mentioned before, I'd suggest to understand the table usage cases first, and maybe hide or remove the columns which are not needed, maybe also group some of the elements (looks like the Order track number has several "children" — products).

Search bar is also a powerful addition to the UX improvement.

One addition to the UI: user will definitely benefit from the improved readability, that can be reached by aligning numbers and prices by the right side and text-based entries by left. Avoid centre-alignment. Here's the discussion on this topic.

Not the answer you're looking for? Browse other questions tagged or ask your own question.