Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive Datagrid #282

Closed
mantis opened this issue Feb 4, 2017 · 12 comments
Closed

Responsive Datagrid #282

mantis opened this issue Feb 4, 2017 · 12 comments

Comments

@mantis
Copy link
Contributor

mantis commented Feb 4, 2017

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

@fzaninotto
Copy link
Member

What do you mean by responsive datagrid?

@supermacro
Copy link

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.

screen shot 2017-02-17 at 12 05 24 am

@fzaninotto
Copy link
Member

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
Copy link
Contributor Author

mantis commented Feb 18, 2017

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
Copy link

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

@fzaninotto
Copy link
Member

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
Copy link

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
Copy link

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
Copy link

supermacro commented Feb 22, 2017

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
Copy link
Member

Nothing is started, it's all yours!

@mantis
Copy link
Contributor Author

mantis commented Feb 22, 2017

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

@fzaninotto
Copy link
Member

Fixed by #390

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants