I am Implementing Ag-grid for infinite scrolling, the problem I am facing is when we hit API for data it returns all data. what I want is that if we scroll down it then hit API to bring the next data. But in ag-grid, all data comes in sequence of 20 rows and saves in our browser memory.
i have json data as js objects, need to get sequences of 20 data from object in js, instead of fetching from url.
import React, { useState } from 'react'
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {data} from './data'
const App = () => {
const [gridApi, setGridApi] = useState(null);
const columns = [
{ headerName: "Athlete", field: "athlete", filter: "agTextColumnFilter", cellRenderer: 'Loading' },
{ headerName: "Age", field: "age", filter: "agTextColumnFilter" },
{ headerName: "Country", field: "country", filter: "agTextColumnFilter" },
{ headerName: "Year", field: "year", filter: "agTextColumnFilter" },
{ headerName: "Date", field: 'date', filter: "agTextColumnFilter" },
{ headerName: "Sport", field: 'sport', filter: "agTextColumnFilter" },
{ headerName: "Gold", field: 'gold', filter: "agTextColumnFilter" },
{ headerName: "Silver", field: 'silver', filter: "agTextColumnFilter" },
{ headerName: "Bronze", field: 'bronze', filter: "agTextColumnFilter" },
{ headerName: "Total", field: 'total', filter: "agTextColumnFilter" },
]
const datasource = {
getRows(params) {
console.log(JSON.stringify(params, null, 1));
const { startRow, endRow}= params
// let url = `http://localhost:3001/olympic?`
//Pagination
url += `_start=${startRow}&_end=${endRow}`
fetch(data)
.then(httpResponse => httpResponse.json())
.then(response => {
params.successCallback(response, 499);
})
.catch(error => {
console.error(error);
params.failCallback();
})
}
};
const onGridReady = (params) => {
setGridApi(params);
// register datasource with the grid
params.api.setDatasource(data);
}
const components = {
Loading: (params) => {
if (params.value !== undefined) {
return params.value
} else {
return "Loading .. "
}
}
}
return (
<div>
<h1 align="center">Trial Scroll</h1>
<div className="ag-theme-alpine" style={{ height: 800 }}>
<AgGridReact
columnDefs={columns}
rowModelType="infinite"
onGridReady={onGridReady}
cacheBlockSize={20}
rowData={data}
/>
</div>
</div>
);
};
export default App
here i tried to get data on url from json server, but i need to get data from javascript object.