Responsive Datagrid

[mantis]

From what I can tell, the datagrid component isn't 'responsive' out the box - are there any plans for this area?

[fzaninotto]

What do you mean by responsive datagrid?

[supermacro]

The data grid items react to changes in screen width, but once the browser reaches a certain width, the data-grid stops adjusting itself (looks like there's a max-width setting). The non-collapsable menu on the demo doesn't help with this either.

[fzaninotto]

For the datagrid, this is the behavior of HTML tables. What would you expect?
for the menu, there is already an issue for that (#258)

[mantis]

Good question, as I expect the answer would vary between use-cases. It would be nice if framework did something in the width case - obvious options would be to change how grid is rendered - e.g. columns that get pushed off appear on a 2nd row. Or allow columns on the grid to be marked as required/optional so that optional columns disappear if they don't fit.

Looking at datatables.net (which i was using on something) and http://sitesforprofit.com/responsive-table-plugins-and-patterns - I'm not sure an obvious suggestion comes to me ;)

[supermacro]

@mantis very interesting table projects. I had never heard of either. Thanks for sharing.

[fzaninotto]

This issue has already been debated on the matreial-ui repository.

Based on this discussion, I see two options for admin-on-rest:

• support a new hiddenWhenSmall attribute on fields, which will hide the entire column (header + data) on small screens. This way, we keep the table layout, and let the user decide how the table should work on small devices. That's what ng-admin does.
• switch to an inline layout for small screens, where each column becomes a line (kind of like a definition list). I don't like this one, as it makes VERY long pages, unpractical for the user.

But the real problem is that a table isn't a good UI for mobile. So I suggest a third solution:

• support a new listItem prop on <Datagrid>, axpecting a React element. On small screens, <Datadrid> will use a mui <List> instead of a <table>, and delegate the rendering of the list items to this component. That way, it's entirely in the hands of the developer!

What do you think?

[supermacro]

I do agree that option two is not practical.

From our use case: Our admins use iPads when not in the office (so hiding one or two columns, but still rendering the current table, would be useful). Therefore I'm biased to say that hiddenWhenSmall would be useful immediately for myself.

But new listItem prop does seem like the the better solution as it applies to more use cases.

[grangeway]

yea, option 2 isn't practical - could the ideas be merged? (and you'll have to excuse my knowledge here) - a "ActionOnBreakPoint" logic where you could specify 600 => Hide, 480 => ListItem.

I'm not sure here whether i'm suggest you'd have an array of different actions - or more just the ability to specify what "small" is, and whether to do a simple hide - or a more complex 'list'

[supermacro]

Is there any work being done on this already?

My colleague and I might be able to submit a PR by next week that implements "support a new listItem prop on <Datagrid>".

[fzaninotto]

Nothing is started, it's all yours!

[mantis]

... and i'm still learning so not in a position to work on things actively (yet) ;)

[fzaninotto]

Fixed by #390