I am unable to manually implement lazy-loading in the grid using client-side rendering. The reason for not using row model 'infinite' or 'server-side' is that we do not want to make changes in the backend. There are millions of rows being fetched and we want to do it 200 at a time and then onScroll call the next 200.
The onBodyScroll function seems like a bad approach I am trying to force. Is there a more elegant way to do this?
const onBodyScroll = useCallback((event: BodyScrollEvent) => { if (!gridRef.current || props.moreDataLoading) return; const { top, bottom } = event.api.getVerticalPixelRange(); const clientHeight = bottom - top; const scrollTop = top; const scrollHeight = document.querySelector('.ag-body-vertical-scroll-container')?.clientHeight || 0; if (scrollHeight - (scrollTop + clientHeight) <= 500) { console.log('onBodyScroll: ', top, bottom, scrollHeight); props.fetchMoreData?.(); } }, []); <AgGridReact ref={gridRef} columnDefs={columnDefs} rowData={rowData} defaultColDef={defaultColDef} gridOptions={gridOptions} loading={props.loading} onBodyScroll={onBodyScroll} /> 