Table mobile design (large amount of field)
Hello. I have a working table displaying information about transactions done on blockchains.
It got a large number of field about values like dates, cost price sales price slippage.. 13 field in total. pluss actions like checkbox selection and icon for opening menu where you can interact with the field like setting manual prices.
This is a MUI data grid table.
One nice feature that may be of help design wise is I have a button to render a detail panel for the transaction where you can see more information really.
Now to my question, does anyone have any good examples of large tables being shown on small screen (tablets, smart phones) ? I can't seem to find a nice solution to it. I may be able to remove a few field based on screen size but that only 1 or two I would be willing to hide on smaller screens.
5 Replies
We kinda had the same problem. We opted for a grid/card list hybrid where every gridrow is a expandable card. That way you keep the selectboxes / select all functionality, and you see the most important info from the item in the row, but when you expand you see all the data in a cardstyle inside the row
It's not ideal, but it is very hard to put lots of data on a small screen while still having lots of functionality
right thanks! I agree that seems to be the best option possible.
I don't know if it's the best option, but it was the best we could come up with.
agree to that, I've closed in on implementing it. hiding columns based on width and wrapping some all the way down. and the details panel showing cards take the full information when opened
We did something like this. (I replaced the actual data with some default text in figma, so it's not 100% like it actually looks)
