I'm using ag-grid-enterprise v28.1.3 in a next.js app and trying to utilize server-side row filling. Since I've introduced rowModelType="serverSide", horizontal scrolling seems to have disappeared. No scroll bar, no nothing.
Here is the setup for my grid:
<div
className="ag-theme-custom"
style={{
height: "100%",
width: "97%",
marginTop: "5rem",
marginLeft: "1.5%",
overflow: "scroll",
}}
>
<AgGridReact
columnDefs={columnDefs}
defaultColDef={defaultColDef}
animateRows={true}
rowSelection="multiple"
rowModelType="serverSide"
pagination={true}
paginationPageSize={50}
cacheBlockSize={50}
onGridReady={onGridReady}
serverSideInfiniteScroll={true}
suppressScrollOnNewData={false}
maxBlocksInCache={1}
/>
</div>Here are my default column defs:
const defaultColDef = useMemo(
() => ({
sortable: true,
filter: true,
resizable: true,
}),
[]
)Here is the code for datasource and onGridReady:
const datasource = {
getRows(params) {
console.log(JSON.stringify(params.request, null, 1))
const { startRow, sortModel } = params.request
const pageIndex = Math.round(startRow / 50)
const sortKey = sortModel ? parseSort(sortModel) : null
const serverParams = setQueryParams(pageIndex, sortKey)
getCompanies(serverParams)
.then(response => {
params.successCallback(
response.data.companies,
response.data.meta.total_count
)
})
.catch(error => {
console.error(error)
params.failCallback()
})
},
}
const onGridReady = params => {
setGridApi(params)
params.api.setServerSideDatasource(datasource)
}I'm completely stumped. I've tried setting overflow: scroll on a number of elements in a css file I have linked to the component, but not dice.