How to make data grid element mobile responsive?

Hey! I have a data grid element that looks nice on desktop / tablet but not on mobile.

It looks like that currently:

Is there anyway I can get it to look nicer? Ideally, to have everything not squished together. I tried toggling the widths from auto to 100% but doesn’t make a difference.

If set the width of the data grid to be fixed width, i can’t scroll left and right, and if I change the overflow to “scroll” or “auto”, the table is no longer mobile responsive:


Also, how do I wrap the text for a particular column? Right now it cuts off the text even on desktop.

There is not a single answer for mobile grid/table view.
Aurelie talks about this here.
This blog post is a very interesting read on the subject.

1 Like