AG Grid server side pagination

[ZiedHf]

I'm trying to work with server side pagination : The server return a portion of rows and I want to display it and show the CORRECT paginator. Of course when the user click on the next page, a call to the server with the number of page and pageSize will be made. Changing the pageSize also will refresh the table ...

Well, I don't think there is a reason to explain the scenario because it is so basic.

The thing is, I'm trying to migrate to AG-Grid from another other library. After a weeks of reading around you documentation, the internet, on Stackoverflow, I still not able to achieve this basic example. I spent the Trial Key period searching ONLY for this feature.
Please, let me know if this is not possible.

And please if it's possible, please, for the love of god, add a good exemple about this in your documentation so developers can understand how to mock the paginator, make call to API to refresh the data ... etc

This is an example with : http://reqres.in to mock the server API.
But I can't go further in this example !

import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

// YOUR KEY

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      per_page: 3,
      total: null,
      total_pages: null,
      columnDefs: [
        {
          field: "id",
          headerName: "ID"
        },
        {
          field: "first_name",
          headerName: "First Name"
        },
        {
          field: "last_name",
          headerName: "Last Name"
        },
        {
          field: "email",
          headerName: "Email"
        }
      ],
      data: []
    };
  }

  componentDidMount() {
    fetch("http://reqres.in/api/users?page=1")
      .then(data => data.json())
      .then(resp => {
        this.setState(resp);
      });
  }

  render() {
    const { data, columnDefs } = this.state;
    return (
      <div
        className="ag-theme-balham"
        style={{
          height: "500px",
          width: "600px"
        }}
      >
        <AgGridReact
          columnDefs={columnDefs}
          rowData={data}
          pagination
        />
      </div>
    );
  }
}

export default App;

[ZiedHf]

Well, I'm able now to mock the pagination, I changed the number of page and now it shows 4, which is right !

onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    const that = this;
    setTimeout(() => {
      const datasource = {
        getRows(params) {
          console.log(JSON.stringify(params.request, null, 1));
          params.successCallback(that.state.data, that.state.total);
          // params.failCallback();
        }
      };
      this.gridApi.setServerSideDatasource(datasource);
    }, 2000);
  };

Still searching how to update the rows after the chamngement of the page :

onPaginationChanged = event => {
// Calling new api with the next page
this.fetchApi(event.api.paginationProxy.currentPage + 1);
// What should I do here ?!
};

Please, add a good example about this in your website !

[hchawla13]

Did you get an answer for this?

[Szili]

Try this: https://www.cluemediator.com/implement-server-side-pagination-in-react-ag-grid