ag grid horizontal scroll

Are you sure is because of the number of columns? I had the same problem and the solution was take off the pinned option of every column.

For example if you have this:

{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}

it has to be:

{headerName: "Athlete", field: "athlete", width: 150}

You can just say,

gridOptions.api.sizeColumnsToFit();

This will set the columns width and hence remove horizontal scrolling.

Sure you haven't got the suppressHorizontalScroll property on the gridOptions object set to true have you ?

var gridOptionsTop = {
    columnDefs: columnDefs,
    // don't show the horizontal scrollbar on the top grid
    suppressHorizontalScroll: false,
    enableSorting: true,
};