I can't find resources, guidelines or best practices for natively displaying a data grid on an enterprise mobile app?
Any help is appreciated. Thanks!
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
I think, this is a pretty good overview of your options: https://css-tricks.com/accessible-simple-responsive-tables/
It's talking about tables and CSS, but I think it can easily be applied to DataGrids on mobile too.
Let's think about the different ways a table could behave responsively:
Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the layout needs to be a valid option.
Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right. This is trivial in CSS with an
Collapse by rows: Split each row into its own single column mini-table on small screens. Switching
display:blockwill cause this with normal table markup.
Collapse by columns: This is where things get tricky. You can't do this with normal table markup in pure CSS because the code order is by rows and the
There are many approaches to do it, however some solutions may apply best for your situations based on your project needs.
Specific to product comparisons: http://www.foolproof.co.uk/thinking/making-product-comparison-work-on-mobile/
It really depends on what the user is trying to accomplish on your particular case. Are they comparing data across rows and columns? What the the nature of your data and what space constrains does it impose? How much data do you have? Do you need to show it all? Is a table the right solution? etc.