What is the best way to responsively display large amounts of tabular data?

Question

I'm working on a redesign that needs to translate well from desktop to tablets. There is a table that could potentially hold thousands of entries. Think of this page as a dashboard. From what I gather, the user should be able to select multiple or all entries and apply a variety of actions (ex: delete, compare, edit). Unfortunately I only have screenshots to look at, so I'm not sure what all the interactions for this table are.

The full data for the entries should be available to the user on the tablet device (ie. all columns should display without scrolling or hiding columns). There are 8 columns ranging in width and the column on the end has a dropdown for extra actions specific to that entry.

I've explored this issue on Google and have found a few suggestions. My problem is similar to these questions: How should large table columns be handled on a responsive design?, How to present heavy data tables on smartphones?. I've also looked at this article by Filament Group that is referenced a lot in other similar questions.

However, as previously stated I cannot hide any columns. The strongest solution I've seen so far is displaying the data in card views, however this doesn't allow for entry comparison very well and it seems like it might be tedious if the user needs to select many entries at once.

Is there a more creative solution out there that would still allow the user to easily view and compare many entries at one time that translates well between desktop and tablet? Preferably the display would be the same for both desktop and tablet.

Sorry for the long winded details.

TLDR: I need a way to display large amounts of table data on a tablet without hiding columns or making the user scroll horizontally. The solution also needs to allow the user to select multiple or all entries to compare in the least-tedious manner.

Answer 1

I don't think this is very easy when it comes to design for limited screen estate.

Is there a reason to have it all show at once? You may be inundating the user with too much raw data.

You could allow the user to choose what they wish to focus on by:

• allowing "freeze frames" functionality or just freeze the ones that makes sense. This maintains user orientation no matter which direction they scroll.

• Adding a show/hide toggle to the columns in order to customize their view and compare that data side by side.

I know this isn't the best solution because you requested to view all columns at once but the advantages are:

• it gives users choice on the information they want to see.

• it allows the information to be displayed in a readable font size. No doubt this is important as most governments have laws about accessibility in place now.

Answer 2

The situation, as stated before, is complex, but there are a few solutions that may work depending on the decision maker and users. Right now it seems that you are tied by the decision maker and not the users, although I may be wrong.

1. Show all columns but with a reduced width, so all of the fit on the screen, then add a visible and notorious text right above the table stating that the width of the columns can be modified to the user liking. provide the actions on the left most column and be sure to add visual help to differentiate rows. This solves the problem of having all the columns on the screen and gives clear instructions and tools to the user on how to work with them. If the user wants to scroll because he modified the width, which would be reasonable, then it should be OK, it's the user decision.

2. Show a screen before the one with all the content where the user can choose which columns he wants to see, that way, most probably, there will be less data to show because users know what is important and what is not. Combine this method with number 1 so you give flexibility and tools to the user.

Some general considerations for the design would be

• Allow enough space on each row so their height is not fixed, or at least not to a single line, I'd leave at least two.
• Design the icons with enough space and space around to be used easily on the tablet, ideally, that would leave the icons in two lines (or more) on the same cell, which automatically gives you vertical space for the text on each row.
• Place common actions/icons on the left.
• Give visual cues to differentiate clearly each row.
• Repeat headers every few rows or keep them fixed on top.
• Non common actions could be on the right or as a row after the content that applies to them, it depends on what are those action, and how verbose should the controls be. You can differentiate content rows with colour or space, this is a simple example.
• Use icons that don't depend on tooltips to be understood. If that can't be, provide a floating layer with help, which should be always reachable.
• Use a font that is designed for screens, like Verdana or Georgia, even if that means taller cells.