How to make tables fit on small screens (spoiler: you probably can’t and maybe you shouldn’t)

Rethinking responsive design by focusing on user needs and adaptive components for a better user experience.

Illustration from UI8 edited by me

How to display tables on small screens has been a hot topic for a while. A quick Google search will yield numerous resources, tutorials, and videos on designing responsive tables, each offering varying opinions and suggestions. So, here’s my take.

As a product designer for a SaaS company, I frequently handle large quantities of complex data. A well-thought-out table can make the difference between a great user experience and a frustrating one.

What does a well-thought-out table mean?

A well-thought-out table organizes and groups data into rows and columns that are easily scannable. It displays information relevant to the user, incorporates thoughtful interactions for accessibility, and has a user-friendly UI. And by UI, I don’t just mean making it look “pretty” — that’s a given. It’s about making strategic design decisions regarding font size, padding, margins, and borders to make complex tables easier to digest.

A table mock up with organized data in columns and rows designed in Figma for large screens

It doesn’t end there, though. For good table UX, you must also consider how the user intends to use the data. Do they need to compare information to make an informed decision? Do they need to take some kind of action?

Once you go through the iterations and finally have the perfect table for your user — one that looks great, has killer micro-interactions, filtering, sorting, column customizations, sticky headers, and freeze columns; everything good table UX is all about — you think to yourself: But wait, how will it look on mobile screens? 🙀

Is it responsive?

You probably hear this question a lot….is it responsive?
From my experience, most designers take a desktop-first approach when designing tables and leave the “responsive” side of it to the end.