AG-Grid: Consistently auto-size columns on scroll? - ag-grid

Question

I have a large grid and would like it to dynamically resize the visible (they are virtualized) columns on horizontal scroll, but I can't seem to make it consistent since it tries to resize before the grid is fully rendered or something...
const App = () => {
const gridOptions = useMemo<GridOptions>(
() => ({
suppressColumnVirtualisation: false,
suppressRowVirtualisation: false,
processRowPostCreate: (params: ProcessRowParams) => {
console.log('processRowPostCreate');
const cols = [];
params.columnApi
.getAllDisplayedVirtualColumns()
.forEach((col) => cols.push(col));
params.columnApi.autoSizeColumns(cols, false);
},
}),
[]
);
const data = useMemo<any[]>(() => {
console.log('Create random data');
return createRandomGridData(100, 200, { resizable: true });
}, []);
const onVirtualColumnsChanged = (event: VirtualColumnsChangedEvent) => {
console.log('onVirtualColumnsChanged');
const cols = [];
event.columnApi
.getAllDisplayedVirtualColumns()
.forEach((col) => cols.push(col));
event.columnApi.autoSizeColumns(cols, false);
};
return (
<div className="ag-theme-alpine" style={{ height: '98vh', width: '98vw' }}>
<AgGridReact
gridOptions={gridOptions}
rowData={data[0]}
columnDefs={data[1]}
enableRangeSelection={true}
enableFillHandle={true}
suppressClearOnFillReduction={true}
onVirtualColumnsChanged={onVirtualColumnsChanged}
/>
</div>
);
};
Here is a live StackBlitz example: https://stackblitz.com/edit/react-ts-dwx6h7?file=App.tsx. The problem is that the grid is not auto-sized on start and when I scroll really fast it doesn't keep up.
What can I do to make it auto-size the columns more consistently?