Data tables in mobile/Tablet - material design

Question

I have gone through this new design specifications regarding representing data as row-column (table).

1. Table of data
2. Should be able to scroll vertical and horizontal
3. Should be able to edit inline

https://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

The official document says that "Data tables usually appear in desktop enterprise products." But I am curious about the implementation in Mobile/Tablet.

Is this a good practice to show this much data as table in Mobile/Tablet?

Answer 1

Showing over 3 columns of data on a mobile device is usually not the best approach. The data will start to overlap, sometimes go out of its container, and be pushed together too tightly.

One solution I use and am happy with is the responsive extension for datatables.

You can check it out here https://www.datatables.net/extensions/responsive .

This extension gives you full control over breakpoints and lets you show collapsed information in child rows.

Answer 2

Keep in mind Material Design is a set of guidelines, yet it doesn't cover all your possible scenarios. Furthermore, Material Design is built with mobile in mind, so think of each and every element as "mobile first".

However, it's impossible to know all possible needs, so that comes from the developer's side, and once you build your table using Material, you can apply different techniques.

• Example one This one deals with content being horizontally scrolled
• Example 2 This is made in Material, converts your table rows in cards (warning, not suitable if your table has a lot of rows!)
• Example 3 My personal favorite, it allows responsive behavior and filtering results to create different visualization statuses

In the end, it will depend on your specific needs, but hope this helps!