How to override MTablePagination from material-table reactjs?

Question

I have more than one million rows and want to display them in material-table reactjs. How do I get data from back-end only for rows on one page and then get next set of rows on next page click?

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import Axios from 'axios'

export default function MaterialTableDemo() {
    var columns = [
        {title: "stationid", field: "stationid", editable: 'never'},
        {title: "model", field: "model", editable: 'never'},
        {title: "version", field: "version", editable: 'never'},
        {title: "lat", field: "lat", editable: 'never'},
        {title: "lon", field: "lon", editable: 'never'},
        {title: "status", field: "status"}
      ]
    
    const [data, setData] = useState([]);
useEffect(() => { 
    Axios.get("/ListView")
        .then(res => {               
            setData(res.data.data)
            console.log(res.data.data)
         })
         .catch(error=>{
             console.log("Error")
         })
  }, [])

    const handleRowUpdate = (newData, oldData, resolve) => {console.log("updating row")
    let errorList = []
    if(newData.status === ""){
        errorList.push("Please enter Status")
      } 

    if(errorList.length < 1){
      Axios.post("/update", newData)
      .then(res => {
        const dataUpdate = [...data];
        const index = oldData.tableData;
        dataUpdate[index] = newData;
        setData([...dataUpdate]);
        resolve()}
)
      .catch(error => {
resolve()

      })
    }else{
resolve()

    } 
    window.location.reload(true);
  }
const handleRowDelete = (oldData, resolve) => {

    Axios.post("/delete", oldData)
      .then(res => {
        const dataDelete = [...data];
        const index = oldData.tableData;
        dataDelete.splice(index, 1);
        setData([...dataDelete]);
        resolve()
      })
      .catch(error => {
        resolve()
      })
      window.location.reload(true);
  } 

return (
    <MaterialTable
    title="Station MetaData from DB"
      columns={columns}
      data={data}
      options={{
          exportButton: true,
          showFirstLastPageButtons: false,
      }}
      localization={{
        pagination: {
            labelDisplayedRows: '{from}-{to}'
        },
      }}
      editable={{
onRowUpdate: (newData, oldData) =>
        new Promise((resolve) => {
            handleRowUpdate(newData, oldData, resolve);

        }),
        onRowDelete: (oldData) =>
        new Promise((resolve) => {
          handleRowDelete(oldData, resolve)
        }),
      }}
    />
  );
}

How do I make get only as many rows from backend as possible on 1 page for display? For example, if I want to display only 5 rows per page then I should get only 5 rows from backend and on click on next page get next 5 rows.

Answer 1

I know its a bit late but maybe it will help others with the same question. You should override Pagination in components:

<MaterialTable
        options={options}
        data={data}
        columns={columns}
        editable={{onRowUpdate}}
        localization={localization}
        components={{
            Pagination: (props) =>  
                <CustomPagination
                    props={props}
                    rowsPerPage={pageSize}
                    pageIndex={pageIndex}
                    setPageIndex={setPageIndex}
                    setPageSize={setPageSize}/>
            }
        }}
    />

where

<CustomPagination
        rowsPerPageOptions={rowsPerPageOptions}
        rowsPerPage={rowsPerPage}
        count={totalPages}
        page={pageIndex}
        onChangePage={(event, page) => {
            props.onChangePage(event, page);
            setPageIndex(page)
        }}
        onChangeRowsPerPage={event => {
            props.onChangeRowsPerPage(event);
            setPageSize(parseInt(event.target.value));
        }}
    />

All the fields in CustomPagination are hooks from it's parent component so that you will do your api calls and re-render when they change .

Using the same way you can change the text of this buttons, please check this example https://material-table.com/#/docs/features/localization.