Adding horizontal scrollbar to data grid

Hello, I have a 20 columns table that are cramped together in a data grid. I want to be able to display each column names clearly by adding a horizontal scrollbar. I tried following the solution provided here: But it didn’t work as intended. It adds the scrollbar at the bottom, but the columns are all still scrunch up together, making them barely visible on its own.    Any suggestions?  
3 answers

Hi Jason,

You can achieve this in 2 steps.

  1. Set the data-grid properties Width unit : pixel
  2. Add the style to your data-grid overflow-x:scroll;


The result will be like below,

And this is the inline styling version of your reference question.


Hope this helps,



My first question for my PO would be; why do you need all this in an overview. And ask a designer to convert this useless datagrid into proper designed page(s) 

Instead of trying to fix something with css which is broken by wrong choices


As mentioned before, better restyle your table, and have a good and clear looking widget listing your data.

In addition; add a default Export to Excel functionality to provide all the data necessary without messing up the page.