I am designing a data table in which a lot of columns, probably around 20 to 25, will be placed. The question is, when the parent container has a very minimum width, I cannot show all the columns upfront.

What is the right approach for it?

I am thinking of one simple solution: enabling table horizontal scrollbar to see the rest of the columns.

Does anyone know any other solutions to handle this case in terms of better usability perspective?

2 Answers 2


If you are using data tables, then you might have seen how it caters to small screen sizes. The columns at the right most are shifted under to the row expansion.
So here, you could give the most important columns upfront (from the 25 columns that you have) and give the remaining (if required) under row expansion.

enter image description here

  • You might want to take a look at this question here: ux.stackexchange.com/questions/115030/… Feb 7, 2018 at 15:46
  • The mobile table in this answer is not same as that you have asked in that question. Please search for responsive mobile data table.
    – Kishan
    Feb 7, 2018 at 15:50
  • You clearly did not open the enclosed url.. Feb 7, 2018 at 16:10
  • The link redirects me to 'Tables with a lot of...' only.
    – Kishan
    Feb 7, 2018 at 16:31
  • 1
    Hay @Kishnan, I'm sorry, the original comment was for the OP. I didn't notice I have commented on the answer. Sorry again. Feb 8, 2018 at 8:59

When dealing with these kinds of issues it might help to go back a step and find out if the users really need to view a data table that has 20 - 30 columns. I cannot imagine that anyone will need to look at that much data all at once, it would be difficult to process all the information because of the intensity of the information load.

One way of solving this could be to empower the users to select the columns they want to view within the table through a filter menu or the like. Once the user has selected their desired columns the data table is generated. It would be a nice way to find out how many columns the users would actually want to view at one time. So why not test it with simple paper prototype or some kind of survey?

Remember that the user should have more ownership of the interface than your client/boss.

In addition:

There is a bunch of really good advice on data tables found in this article.

Horizontal scrolling, as you mentioned, could be one option. However, I would be concerned about the discoverability of such a feature.

  • There is no high-level scenarios to enabling edit / modify option for table content. To be frank, all columns are static items such as bunch of list items you have to live with that. No other options. I am thinking how it can be managable.
    – Vasethvan
    Feb 7, 2018 at 11:35
  • Do you have a visual sketch of how it looks now? Can you provide an example of some of content of the columns and rows? i.e. is it types of fruit or financial statistics we are talking about? Feb 7, 2018 at 12:35
  • I would also challenge that "all columns are static items such as bunch of list items you have to live with that." It seems like a bit of cop-out. Can you provide a bit more context to your question? Then I will be better able to help. Feb 7, 2018 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.