How to override MTablePagination from material-table reactjs? - 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.