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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityWhat if you have too many columns in a table?
Possible solutions:
What is good/bad practice? Is there any other, more preferable, solutions to this problem?
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.
hold shift + scroll wheel
to scroll horizontally for large columns. works on all major browsers. hope this helps someone.
Jan 27, 2020 at 17:54
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.)
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:
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.
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:
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:
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.
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.