React : Ag Grid Pagination Server Side

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.

@berniefitz , I have used that link and use that code but it shows me error. — Xperia Reno
var lastRow = allData.length <= request.endRow ? data.length : -1; on this line data is not defined — Xperia Reno
So if data is undefined, did you mean to use allData.length? — bernieslearnings

Shashwat Prakash Shashwat Prakash · Accepted Answer · 2019-11-18T06:32:31

"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.

React : Ag Grid Pagination Server Side

1 Answers