[data grid] Mobile responsiveness support for DataGrid

[liamlows]

Summary 💡

I am requesting that the data grid component for MUI-X have the option to reformat when it hits mobile or self defined breakpoints. The design would essentially create a table with 1 column, no header, and in each row the column header values would be used in a "key: value" manner. The toolbar and footer can remain in their respective locations above and below.

Here is a link to a CSS guide on how to achieve this with HTML and CSS: https://css-tricks.com/responsive-data-tables/

Examples 🌈

This would allow for something that roughly looks like this (pulled from link):

This is a good example of what we have now:

Motivation 🔦

The view for MUI Data Grids on mobile devices is really not the best. It requires a lot of scrolling and makes navigating them a pain. Regardless of design of the grid itself, they just don't (and probably will never) look great on mobile. This feature would help a ton in making it far easier for the end user to browse the data table as needed.

Benchmarks

• Material UI Table: https://github.com/mui/material-ui/issues/11374
• Syncfusion: https://ej2.syncfusion.com/react/documentation/grid/adaptive
• AG Grid https://github.com/ag-grid/ag-grid/issues/3137

[MBilalShafi]

hey @liamlows, we have a fairly good user experience on mobile devices with the introduction of horizontal/vertical scrolls which also allows leveraging more space for Toolbar actions like Filters and Columns Selection.

Here's a view of how it looks on Mobile devices

Can you let us know your exact requirement, do you want the customizability to transform Grid Views in a custom format like mentioned in the top screenshot?

[liamlows]

hey @liamlows, we have a fairly good user experience on mobile devices with the introduction of horizontal/vertical scrolls which also allows leveraging more space for Toolbar actions like Filters and Columns Selection.

Hey @MBilalShafi! Thanks for the quick response. I agree what y'all have now for navigating the form is nice and works fluidly, I just figured that having the option for the other type of view (to prevent the need for horizontal scrolling) could potentially be a better UX. That being said, it was just my opinion.

Can you let us know your exact requirement, do you want the customizability to transform Grid Views in a custom format like mentioned in the top screenshot?

This is exactly what I was hoping for. I just was curious if we could have that option available to us.

For our use case we have a table that shows several columns (around 7-8) regarding the status of an entity. On mobile we currently filter out several of those columns bringing it down to 3 so that you just get the info you want (using media queries and such to hide columns). We used to use mui-datatables which has the feature to collapse the columns into rows like seen in the screenshot above and below but we had a lot of bugs and issue so we moved away in favor of datagrid. The transformation can be seen below and at the codesandbox link https://codesandbox.io/s/muidatatables-custom-toolbar-forked-j002q?file=/index.js

Desktop:

Mobile:

Anyway, I was just curious if this is something that could be added.

[MBilalShafi]

@liamlows This seems like a worth-considering request, but we see some potential problems with this. Using this UX, we won't have column headers on mobile screens and therefore no access to per-column features like sorting, column pinning, grouping, etc.

@mui/xgrid Team, should we still keep it in the Backlog to see if we can refine and pick it up at some point?

[oliviertassinari]

This request is similar to https://github.com/mui/material-ui/issues/11374. It didn't have a lot of upvotes for all the years that it was open.

Personally, I feel that the UX with the columns that wrap is worse than using the desktop layout on mobile. I think that it only helps if there are very few columns, but it's a use case for which the Data Grid doesn't really optimize for. The <Table> optimizes for this use case, so it might be a better place to explore this direction.

👍 to not explore this path with the <DataGrid>. We can look for other options that can improve the UX of the data grid on mobile. I think that it would be great to benchmark for how companies solve this problem? For example, how do the Airtable/Notion mobile apps solve this problem? I would trust they this is an important problem for them, and that they had allocated resources to solve it. I had a quick look:

• Notion: does nothing
• Airtable: pin the first column above each row, and that's it.

to me, it sounds like we should do nothing for the implementation but we could improve the docs: adding a minimal demo close to https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6 is likely enough:

1. Reduce the number of columns on mobile
2. Add a full-screen modal when clicking on a record

[liamlows]

@oliviertassinari Makes sense, I forgot about column sorting/filtering and could see this as a potential issue. To combat the problem ourselves we simply render less columns on mobile viewports but allow the user to enable the columns through the table options UI should they wish to see all the data. Not sure what the best way to handle it is moving forward but for the time being what we have works and our UX is happy with it.

+1 for how other companies are handling such a situation and exploring it. Personally I'm pretty loaded at the moment with work but if I gain some free time I might try to research/experiment and report back but that won't be for some time. Thank you both for the discussion and help @oliviertassinari and @MBilalShafi, if needed this can be closed as there is a similar issue opened already or it can be left open, whatever y'all prefer 😄

[harvey56]

@liamlows I fully agree with your initial comment. The table should re-dimension to nicely fit the size of a mobile phone screen. Having to scroll horizontally is not compatible with being responsive. The answer above about contenting yourself with horizontal scrolling is lazy at best, and doesn't address your concern. We cannot assume the user will think straight away he has to scroll horizontally to see what he needs to see. Everything should just show on the user's viewport.

How many of your users would comment : "wow, I'm in love with that horizontal scrolling feature, please keep it" ?

What the guy behind mui-datables did (which may largely be the source of inspiration for MUI) was very good IMHO. It's what you showed on your first screenshot. (unfortunately, mui-datatables is no longer maintained, it seems)

In the case @oliviertassinari mentioned, where there would be too many columns in the table, the problem no longer really has to do with how MUI designs their tables, but more about how many columns are really needed in the table (The table in your screenshot contains 10 columns). A wider table may need to be split into more tables, or whatever other design decision.

[Amsvartner]

With the horizontal scroll it is not usable as you get no good overview of the data if you have to scroll back and forth. I have not been able to use data grids for any of my professional projects because of it.

Sorting could be achieved by adding some sort of select box at the top. Adding/removing "columns" via a button + menu.

I have no good suggestions for how to present the actual data though; I think that the initial suggestion takes up too much space, which again makes it unusable for getting a good overview.

You could hide the headers and wrap the data, you should be able to fit two "columns" of data on a mobile screen, effectively making each row take up half the space of the solution present above. We've done so in the project I'm currently working at.

Another solution could be to be able to mark columns to be hidden in "mobile view" through a property.

[liamlows]

I mean i think it may be worthwhile to simply create another component called <DataGridResponsive ... /> or something which would embody some of the features we talked about.

Upon further reflection, @oliviertassinari is the column issue not something that could be simply solved by adding a configuration flag on whether to render that column in mobile view? We could also add a flag to display/not display the column header within the row view (similar to what @Amsvartner said). Furthermore the existing table menu items could address a lot of the "potential" lost features from wrapping the view (maintain filtering, toggle column views, ect.).

Curious to see what people think about this, I still think it would be a nice value add for the end user that may not know they can even scroll horizontally on the table on mobile.

(Also @Amsvartner what library are you using to render the table in your screenshot? It looks really nice!)

[Amsvartner]

I found this article on the subject, which gives some great suggestions on possible ways to address the pain points of showing tables on mobile devices.

(@liamlows - thank you! It's custom built using MUI components.. looks table-ish but it's all grids, papers and custom styling)

[oliviertassinari]

Upon further reflection, @oliviertassinari is the column issue not something that could be simply solved by adding a configuration flag on whether to render that column in mobile view?

@liamlows I don't see the use case for a new API because I would imagine that developers can use useMediaQuery to get this outcome. We could have a mobile demo however that uses it 👍. I have updated https://github.com/mui/mui-x/issues/6460#issuecomment-1284191783 to reflect the idea.

[bryanjtc]

With the horizontal scroll it is not usable as you get no good overview of the data if you have to scroll back and forth. I have not been able to use data grids for any of my professional projects because of it.

Sorting could be achieved by adding some sort of select box at the top. Adding/removing "columns" via a button + menu.

I have no good suggestions for how to present the actual data though; I think that the initial suggestion takes up too much space, which again makes it unusable for getting a good overview.

You could hide the headers and wrap the data, you should be able to fit two "columns" of data on a mobile screen, effectively making each row take up half the space of the solution present above. We've done so in the project I'm currently working at.

Another solution could be to be able to mark columns to be hidden in "mobile view" through a property.

Can you share your example or create a small reproduction with codesandbox?

[mauro-ni]

@Amsvartner I like your implementation. Would it be possible to have a working example in codesandbox? Many thanks in advance.

Mauro

[Ishadir]

From what I see, @Amsvartner will not share any practical example as you guys requested, I am in the same situation, even completely hiding the datagrid for mobile mode gives this error (which seems impossible to escape, I have already tried many things)

useGridLoggerFactory.js:22 MUI: useResizeContainer - The parent DOM element of the data grid has an empty width.
Please make sure that this element has an intrinsic width.
The grid displays with a width of 0px.

More details: https://mui.com/r/x-data-grid-no-dimensions.

I mean, I'm also new to git, could someone tell me what the status of this ticket is? is progress being made? or not? I'm in a real production project and I can't wait long to see what to do with the datagrid, will we have or is there a solution for mobile mode? ty since now

[cherniavskii]

Hey @liamlows There are no updates on mobile mode for the Data Grid for now.

Regarding the useResizeContainer error - it seems like you're using display: none on the grid parent to hide it. If so, consider conditional rendering instead. If you believe there's an issue with the Data Grid - please open a new issue with a minimal reproduction example. Thanks!

[hiran-amtek]

Hi @cherniavskii,

Any update on this ticket ? Is this feature included in the latest MUI library version ?

Can we use the mobile resopnsive MUI DataGrid like a card list ?

eg:

[rfsmart-rgeddings]

I'm curious about the status of this issue. It doesn't appear that it is currently seeking community feedback because it doesn't have the label: waiting for 👍 . I'm currently exploring to see if I can find any circumstances where a team is using an adaptive layout with a datagrid component in the landscape view and a card style component in the portrait mobile view. Ideally my team would prefer the ability to work in a purely responsive environment and not have conditional adaptive components to solve this problem.

[mauro-ni]

Good morning, I really like the DataGrid component and thank you for that. From my point of view, the solution proposed for mobile user interfaces is not optimal. I believe it is better to represent records using Cards rather than having to scroll.

Example (book):

Id        1
Title     The Lord of the Rings
Author    J. R. R. Tolkien

I agree with @rfsmart-rgeddings that it is better work in a purely responsive environment instead of having conditional adaptive components.

Hope to see a solution soon. Mauro

[cherniavskii]

Hi, Unfortunately, we do not plan to explore a mobile responsive view for the Data Grid in the foreseeable future as we currently focus on preparing DataGrid v7 and features with higher priority. I've added the waiting for 👍🏻 label, you're welcome to upvote the issue.