React : Ag Grid Pagination Server Side - reactjs

Question

I am using AG-Grid library for my work in React JS.
I have 40000 data which I want to show using pagination (not scroll but page1, page2 , page3 and so on...).
I am totally new to it . I have used below link for reference. but it's not working.
Any one has working example ?
AG Grid Sever Side Pagination
Any help would be great.
Thank You.

Answer 1

"use strict";
import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "#ag-grid-community/react";
import { AllModules } from "#ag-grid-enterprise/all-modules";
import "#ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "#ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css";
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
modules: AllModules,
columnDefs: [
{ field: "id" },
{
field: "athlete",
width: 150
},
{ field: "age" },
{ field: "country" },
{ field: "year" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" }
],
defaultColDef: {
width: 120,
resizable: true
},
rowModelType: "serverSide",
cacheBlockSize: 100,
maxBlocksInCache: 10
};
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateData = data => {
var idSequence = 0;
data.forEach(function(item) {
item.id = idSequence++;
});
var server = new FakeServer(data);
var datasource = new ServerSideDatasource(server);
params.api.setServerSideDatasource(datasource);
};
httpRequest.open(
"GET",
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json"
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
};
render() {
return (
<div style={{ width: "100%", height: "100%" }}>
<div style={{ height: "100%", paddingTop: "26px", boxSizing: "border-box" }}>
<div
id="myGrid"
style={{
height: "100%",
width: "100%"
}}
className="ag-theme-balham-dark"
>
<AgGridReact
modules={this.state.modules}
columnDefs={this.state.columnDefs}
defaultColDef={this.state.defaultColDef}
rowModelType={this.state.rowModelType}
cacheBlockSize={this.state.cacheBlockSize}
maxBlocksInCache={this.state.maxBlocksInCache}
animateRows={true}
pagination={true}
onGridReady={this.onGridReady}
/>
</div>
</div>
</div>
);
}
}
function ServerSideDatasource(server) {
return {
getRows: function(params) {
setTimeout(function() {
var response = server.getResponse(params.request);
if (response.success) {
params.successCallback(response.rows, response.lastRow);
} else {
params.failCallback();
}
}, 500);
}
};
}
function FakeServer(allData) {
return {
getResponse: function(request) {
console.log("asking for rows: " + request.startRow + " to " + request.endRow);
var rowsThisPage = allData.slice(request.startRow, request.endRow);
var lastRow = allData.length <= request.endRow ? data.length : -1;
return {
success: true,
rows: rowsThisPage,
lastRow: lastRow
};
}
};
}
Try this lines of react code which is mention in documentation. If it will not work, for more precise answer please share your implemented code.