How can I remove horizontal scrollbars from a datagrid

when using a datagrid, if the table is bigger than the data, it displays a horizontal scrollbar (which is greyed out because all the data is visible.

for example here is a datagrid with many more items than it can show ( 5 lines visible, but 74 items in the list) note it shows the vertical scrollbar but not the horizontal scrollbar.


when I set a filter so the number of lines of data is less than the number of lines displayed, there is a horizontal scrollbar added


this seems to happen only when there are fewer rows of data than datagrid rows

for example, here is another datagrid with 2 rows of data but more than two lines exist in the datagrid


How can I suppress the scrollbar from showing when not needed?


Hi @hharrington,

Sorry for the delay. We will reply to you when we receive the required information.

Hi @hharrington,

Sorry for the delay. There is a way to remove the horizontal scroll, but unfortunately I did not find a way to remove the vertical scroll.

To hide horizontal scrolling:

  1. Go to the Theme tab and select Extensions.
  2. Click on the green button “+ New Extension” and create a new extension with any name (for example, dataGrid)
  3. Add the code below, it will be saved automatically.

.ag-body-horizontal-scroll {
display: none !important;

Thanks so much for your help!

I applied your solution and horizontal scroll bars are gone!