What is the best practice for displaying a data grid on a mobile device?

Question

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!

Answer 1

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:

1. 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.

2. 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 overflow="auto" wrapper.

3. Collapse by rows: Split each row into its own single column mini-table on small screens. Switching display:table into display:block will cause this with normal table markup.

4. 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 <tr> wrappers lock it in. We either have to change the markup or start manipulating with JavaScript.

Answer 2

There are many approaches to do it, however some solutions may apply best for your situations based on your project needs.

From NNGroup:https://www.nngroup.com/articles/mobile-tables/

1. Columns Large Enough to Be Legible
2. Rotating the Phone Is a Last Resort
3. Stick Column Headers in Place
4. Clearly Indicate if Horizontal Scrolling Is Needed
5. Stick the Left Column in Place
6. Let Users Select the Data to View
7. Accordions for Groups of Data

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.