What to do with too many columns in a table?

Question

What if you have too many columns in a table?

Possible solutions:

• Horizontal scroll bar
• Re-sizable columns
• Table settings to filter out some columns

What is good/bad practice? Is there any other, more preferable, solutions to this problem?

Answer 1

Column resizing and selection are good solutions but they are more of a general post design solution, dealing the symptom rather than the root cause. Also, they kind of distracting the user from his main purpose which is not to arrange the table.

You should first ask your self, does the user really need all the details in the table? for what reason? Tables are usually to give a quick peek in to the data, not a solution for displaying it all and edit. In this case, consider using the following method. Show only mandatory columns in your table. upon click on a row, show the full details in an side/up/down/foldout panel. See following example (ignore the rough design of the details panel):

^{download bmml source – Wireframes created with Balsamiq Mockups}

Last, horizontal scroll bars are bad. One cannot scroll them, at least not in a natural way. Don't use them.

Answer 2

Spotted this creative solution to too-many-columns on the local rail schedule site. In this scenario, it's problematic to predict programmatically which columns the traveler will need. Everyone always needs the stations column. The train times slide underneath the stations column as the traveler scrolls. (Oddly enough, the mobile site no longer uses this functionality. They've just updated the schedule, so I'm hoping that's an oversight.)

Train timetable

Answer 3

A couple years ago I also had to deal with a single-page web app that contained long, wide tables and I had to think of solutions that let me present its contents adequately. Eventually I made a small js library for that (http://codepen.io/lopis/pen/OPVVPP) that allowed a user to:

1. Toggle column visibility, with per-user persistence (I used cookies);
2. Move columns so that the most important information would be near the beginning and the least important information could be pushed to the end - this way the user would be less likely to have to side-scroll in the future;
3. Resize columns to show more or less of certain columns

My goal was to allow the user to be able to adapt its own work environment as they saw fit. If you have too many columns in a table, it is highly likely that many are not important.

Answer 4

It depends on what you are displaying in the table and what you want the users to do with the data in the table.

Are you expecting them to:

• Edit the data?
• Compare the data?

Once you know the purpose of the table from the user's perspective, i.e. their goals, then you can decided what UI features you need to think about.

For example, if the user is going to edit the data in the table, you have some options which can help you reduce the number of columns in the table. Consider the following options for editing data:

• Edit in a modal dialog - the table just needs to show the minimum columns needed to allow the user to make an informed decision when they click. When you click to edit, the modal dialog can now show all the fields related to the record, even though some will not be displayed in the table. Ideal when there is a not much data to edit.
• Edit on a new page - the table just needs to show the minimum columns needed to allow the user to make an informed decision when they click. When you click to edit, the new page can now show all the fields related to the record, even though some will not be displayed in the table. Ideal when there is lots of data to edit.
• Inline cell editing - will not allow you to reduce the number of columns

An alternative strategy is not to use traditional tabular data tables. Perhaps consider alternative layouts, e.g. similar to UI cards, where the data occupies multiple rows:

UI cards can also expand to show more, assuming that some of the data can be safely tucked away and recalled on demand when needed.

Answer 5

You should probably provide some more details on your issue but there are multiple solutions.

Those your propose could work but it's key to know what MUST be there. Do you have columns which are not important? Then remove those. Do you have to see them all in one view? Go for horizontal scroll.

Another option is to make the table headers selectable to choose one or more of the available column values.

e.g. on an user overview you should display the name and filter for showing email address, regular address etc.

These are optional but it just really depends on your use case, last time I had to optimize I removed some columns in mobile view, just because they weren't important, nor was the interface important to work on mobile though.