In this article we'll see five ways -plus one bonus- to create mobile tables that are worthy of being used.

Let's say it out loud, or rather with a megaphone: tables suck... but only for designers! LOL

Sometimes I think we designers are all made with the same mold.

Every designer I talk to always tells me the same things, that "there are better ways to display data", that "tables suck", that "replicating excel is useless" and blah blah blah...

The truth is that -in my opinion- these are just biases of our work, a bit like the fairy tales that to make a good product, you need to test ideas for an app, starting from paper prototypes.

You just need to know how to design and implement them correctly!

Yes, because there's no getting around it, when it comes to designing any type of tool, sooner or later tables come up and... we have to design them and do it intelligently, especially when thinking about mobile tables.

Obviously, I'm not talking about price comparison tables (pricing tables). Those are easy to design, since they always have a limited set of information to display.

Responsive and multi-device design

Designing with a responsive approach has become vital nowadays.

With the myriad of devices, resolutions and screen sizes we have to "fight" as designers, knowing the techniques and grids for good responsive design is a must.

There are special cases, however, where unfortunately the basic techniques of RWD, i.e. Responsive Web Design, do not help us much, and this is the case with "data tables" and "resource tables".

Let's see below five approaches that can help create more pleasant and readable mobile tables.

1. Column Stacking

‍

‍

‍

‍

‍

One of the five approaches to create mobile tables - Column stackingExample of column stackingOne of the methods that is most commonly used is column stacking.

This technique involves transforming columns into rows and stacking data vertically instead of horizontally.

This may seem obvious, since it's a transformation for mobile devices, where the greater use of content is vertical rather than horizontal, but it's not so obvious.

A relevant example of Angular and React library is PrimeNG, which uses column stacking as a responsive solution.

Pros

- Optimal use and readability

- Possibility to transform blocks into accordion

- Versatility

Cons

Inability to compare elements

Continuous repetition of titles

Not suitable for tables with a high number of columns (maximum 6 or 7)

2. Hiding unnecessary columns

‍

‍

‍

‍

Another technique that is widely used and probably one of the most "intelligent" on mobile, is to hide non-essential columns.

Yes, because let's face it, not all columns are useful for "on the go" use.

Understanding how the user uses and consumes data and what context they use it in is vital to the success of a product, even more so when the amount of data to be displayed is high.

To have a clear idea of this, a simple user interview session with a pool of maximum 8/10 people will reveal the way to go and which columns are really necessary for the purpose.

A very nice example is provided by Bloomberg

‍

Pro

- Optimal usability and readability

- Display of only essential information

- Easy to use and develop

Cons

- Need to sacrifice some data

- Actions require an extra tap to be reached :)

3. Transformed table

‍

‍

‍

‍

The idea, very similar to the "column stacking" technique seen in point one, transforms the content of the table into something new.

The most common transformation is into cards.

Here, the basic idea is to make the best use of information hierarchy techniques, so using more prominent fonts in size and weight to highlight what is most important and lighter fonts for what is less important.

Pros

- Creative data visualization

- Optimal data consumption

Cons

- Not optimal if the amount of data is too high (max 7/8 columns)

- More complicated to develop as it may require style changes

- Difficult to compare data

4.Sticky table with pagination

‍

‍

‍

This technique allows you to have a column always visible and the others that create "views" with pagination.

This technique is not very common, probably because development is not exactly simple...

An example of this technique can be found on the Massimo Dutti website for the size chart.

One of the five approaches to creating mobile tables - Collapsed tableCollapsed table with the first column locked and other information in the form of views underneath.

Pros

- Optimal data visualization

- Main column always visible

- Easily comparable data

Cons

- Not optimal if the amount of data is too high (max 12/15 columns to be divided into multiple views)

- If the data is too high, pagination loses its meaning

- Better to use when the data in the columns are short

5. Accordion

‍

‍

‍

Again, this is a transformed table.

The goal is always to create a sort of card design, but this time trying to minimize the important content to 1/2 columns and hiding the rest of the information inside an accordion.

Pros

- Essential information displayed

- Optimal data consumption

- All data always available

Cons

- Data partially hidden and not immediately visible

- Difficult to compare data

6. BONUS: Scrollable table (for lazy developers or designers)

‍

‍

‍

‍

For the laziest ones, the quickest solution is definitely overflow, i.e. a table that scrolls horizontally to show the entire content.

There's very little to say here, except to review the row heights and font size used. There's not much else to do. 🙂

Pros

- Development speed

- Easy to use

- The original table undergoes no changes

Cons

- Not suitable when there are really many columns (more than 7/8 columns)

- Complicated consumption when, in addition to horizontal scrolling, there is also vertical scrolling

- Initial reference point is lost when scrolling begins

Conclusion: which technique is the best?

As always, IT DEPENDS!

It depends on the context and purpose of the table. It depends on how your target (user) will use the data in these tables.

It depends on whether the need is for pure and simple consumption of content or if the goal is to use associated actions that lead to detail pages (in the case of resource tables).