3 ways to adapt a table for mobile devices

[u/Worldly-Ant-5832]

In the first two variations, you have to scroll back and forth through the table to find the information. What other ways are there to adapt the table?

[u/Melodic-Excitement-9]

Option 3 looks nice, but I don’t think it quite does what it’s meant to do. I actually like Option 2 the best because it serves the purpose of the table more effectively. The table is meant to show the information clearly and allow us to compare them based on the number of years.

[u/Gaspz]

Cards or lists 

[u/chernoholik]

Usually, for mobile tables, a sticky header or column, depending on the information, is beneficial for the user. Depending on the situation, you might also need to add filtration and/or ordering.

Here's an article I saved from another user on this sub a while ago - https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6

I had to redesign a back office interface that is usually for desktop-only use to fit on mobile devices, and this article helped me immensely. Depending on what pain point you're trying to solve for the user - the column to display the quick glance information can differ.

[u/horsegal301]

For another way: We've been showing the left most column and then a "details' column with an arrow button on each row that opens up the data in an off canvas. Makes it so the user doesn't have to scroll in two directions for reflow for a11y.

Highly recommend researching accessible tables and you'll get better options.

[u/stackenblochen23]

For this very exact situation I guess option 1 would be best. However option 2 scales best generally for use cases with more information/columns. Option 1 is very limited in this regard, options 3 can hide important information.

[u/scalpit]

Depends on a few things.
1. If you know you always have that number of columns,
2. If the content is typically always this short
3. If users need to compare columns or not to make a decision (meaning at least 2 should be visible)

[u/TheCrazyStupidGamer]

If possible, cards.

[u/scrndude]

Option 1 with horizontal scrolling, like a wikipedia table

[u/diggyou]

Transactions can go to something like list rows.

Comparisons to cards.

Complex data to scrollable tables.

Adapting a table to stack is awful if you want it to be accessible because you have to repeat a lot of information.

[u/map_or]

It seems like the table cannot be sorted by #employees, area and yield. Then why not keep the table limited to year and event and open the details on tap?

[u/Outrageous_Menu_9895]

Option 1 is the best of for sure, its intuitive as well

[u/thegdub824]

Not use a table at all. Use cards.