How can I override MTablePagination component in Material- Table reactJS

120
June 26, 2021, at 08:50 AM

I am stuck in my assignment, 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 MaterialTable from "material-table";
import { useState, useEffect } from "react";
import Axios from "axios";
import "@material-ui/icons";
let outer = 1;
const Table = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    let __id = 1;
    Axios.get("http://localhost:8000/read").then((res) => {
      const temp = res.data;
      temp.map((i) => (i.id = __id++));
      outer = __id;
      setData(temp);
    });
  }, []);
  const columns = [
    {
      title: "ID",
      field: "id",
      editable: "never",
    },
    {
      title: "Name",
      field: "name",
      validate: (rowData) => rowData.name !== "",
    },
    {
      title: "Gender",
      field: "gender",
      lookup: { male: "Male", female: "Female", other: "Other" },
    },
    {
      title: "Salary",
      field: "salary",
      type: "numeric",
      validate: (rowData) => rowData.salary > 0,
    },
    {
      title: "Team",
      field: "team",
      lookup: { alpha: "Alpha", beta: "Beta", gamma: "Gamma" },
    },
    {
      title: "Address",
      field: "address",
      validate: (rowData) => rowData.address !== "",
    },
  ];
  //adding an employee on server
  const add = (employee) => {
    Axios.post("http://localhost:8000/insert", employee);
  };
  //updating on server
  const update = (newData) => {
    Axios.put(`http://localhost:8000/edit/${newData._id}`, newData).then((res) => {
      console.log("updated value");
    });
  };
  //deleting from server side
  const deleteData = (data) => {
    console.log(data._id);
    Axios.delete(`http://localhost:8000/remove/${data._id}`);
  };
  return (
    <div>
      <MaterialTable
        title="Employees Records"
        data={data}
        columns={columns}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                add(newData);
                newData.id = outer++;
                setData([...data, newData]);
                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                update(newData);
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);
                resolve();
              }, 1000);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                deleteData(oldData);
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                let x = 1;
                outer--;
                dataDelete.map((i) => (i.id = x++));
                setData([...dataDelete]);
                resolve();
              }, 1000);
            }),
        }}
        options={{
          actionsColumnIndex: -1,
          addRowPosition: "first",
        }}
      />
    </div>
  );
};
export default Table;

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.

Rent Charter Buses Company
READ ALSO
Javascript: Sends two arrays of base64 encoded images to php via xhr

Javascript: Sends two arrays of base64 encoded images to php via xhr

Hello everyone I'm here againI'm trying to write a code that's able to resize all images before they're uploaded to the server

94
Div inside of another Div avoid click

Div inside of another Div avoid click

Hello my friends so this is my question i have two divs, one of them is inside of the other one like this schema below

20
List all TLS versions and ciphers a server supports using Axios?

List all TLS versions and ciphers a server supports using Axios?

I'd like to use Axios to get a list of TLS versions and ciphers supported by a server

153
Placing the Search icon under the Mobile menu

Placing the Search icon under the Mobile menu

Unfortunately, I am doing something wrongI have a function

89