How to Display Large Data Tables on Small Screens

The best responsive table design

UX Movement

--

There’s no better way to display lots of data than to use a table. Viewing tables on desktop screens is easy but difficult when viewing them on mobile screens. A data table expands horizontally and can’t fit in such a confined space.

What’s the best way to display a large data table on small mobile screens? Many designers struggle with solving this problem. They’ve proposed potential solutions, but none offer an optimal user experience. To answer this question, you have to understand the purpose of tables and their information structure.

Carousel Columns

Tables are useful because they allow users to compare different data values. The main data they want to compare is the first column, the key identifier value. The rest of the columns are the attribute values that describe the key ID values.

This means that the key ID values should always stay locked in place so users can always see it. Users won’t have a reference point when viewing other values without the key ID. However, the attribute values don’t have to stay visible.

Since it’s impossible to fit every column on the screen, we must swap out attribute values to compare key ID values. For this reason, using carousel buttons to swap the column headers is best.

Only the header for the second column will swap as users click the arrows. Each click allows them to view a new attribute value to compare. As they scroll down the table, the column headers should stay visible to provide context.

The third column is the controls column which will also stay locked in place. It holds the carousel buttons for swapping the headers and buttons to view the details for each record.

Modal Sheet View

--

--

UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.substack.com