I'm trying to use Material UI table pagination to display 5 rows per page, but it shows all items on page and does not change pages. Cant find out where I'm making mistake. I have recreated my problem in sandbox, could you please check it :

 state = {
    rowsPerPage: 5,
    page: 0
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };


       <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        ponent="div"
        count={data.length}
        rowsPerPage={this.state.rowsPerPage}
        page={this.state.page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
      />

I'm trying to use Material UI table pagination to display 5 rows per page, but it shows all items on page and does not change pages. Cant find out where I'm making mistake. I have recreated my problem in sandbox, could you please check it : https://codesandbox.io/s/magical-davinci-t2nq7

 state = {
    rowsPerPage: 5,
    page: 0
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value });
  };


       <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        ponent="div"
        count={data.length}
        rowsPerPage={this.state.rowsPerPage}
        page={this.state.page}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
      />

• javascript
• reactjs
• material-ui

• First you have to understand that TablePagination is a ponent to show the pagination format and trigger the corresponding events or function return to you, it won't update your table. So based on the data. You need to update the data. URL for your reference: stackblitz./edit/fycwiu?file=demo.js – Raj Kumar Commented Feb 19, 2020 at 6:23

2 Answers 2

it is better to use a back-end for getting pagination data because you can pass Offset , Limit to API and get data from it but for now i just fix your issue like so :

import React, { Component } from "react";
import data from "./data.js";
import "./styles.css";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TablePagination from "@material-ui/core/TablePagination";
import Paper from "@material-ui/core/Paper";

class App extends Component {
  state = {
    rowsPerPage: 5,
    page: 0,
    Offset: 0,
    tempData: []
  };

  ponentDidMount() {
    this.getData();
  }

  handleChangePage = (event, page) => {
    let { rowsPerPage, page: currentPage } = this.state;
    if (currentPage < page) {
      return this.setState(
        prevState => {
          return {
            Offset: prevState.Offset + rowsPerPage,
            page
          };
        },
        () => this.getData()
      );
    } else {
      return this.setState(
        prevState => {
          return {
            Offset: prevState.Offset - rowsPerPage,
            page
          };
        },
        () => this.getData()
      );
    }
  };

  handleChangeRowsPerPage = event => {
    this.setState({ rowsPerPage: event.target.value } , () => this.getData());
  };

  getData = () => {
    let { Offset, rowsPerPage: Limit } = this.state;
    let tempArr = [];
    for (let i = Offset; i < Offset + Limit; i++) {
      tempArr.push(data[i]);
    }

    return this.setState({ tempData: tempArr });
  };

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <TableContainer ponent={Paper} elevation={0}>
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Age</TableCell>
                <TableCell>ID</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.state.tempData.map((rows, idx) => {
                return (
                  <TableRow key={idx} hover={true}>
                    <TableCell>{rows.name}</TableCell>
                    <TableCell>{rows.age}</TableCell>
                    <TableCell>{rows.id}</TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>

          <TablePagination
            rowsPerPageOptions={[5, 10, 25]}
            ponent="div"
            count={data.length}
            rowsPerPage={this.state.rowsPerPage}
            page={this.state.page}
            onChangePage={this.handleChangePage}
            onChangeRowsPerPage={this.handleChangeRowsPerPage}
          />
        </TableContainer>
      </div>
    );
  }
}

export default App;

in this way you pass Offset , Limit to your get data method and it will render filtered data for you

but you can see demo from here : https://codesandbox.io/s/friendly-williams-xxjf7

The most easiest way is to add slice method before rendering from array

{page,rowsPerPage,} = this.state;

{this.state.tempData.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map((rows, idx) => {
            return (
              <TableRow key={idx} hover={true}>
                <TableCell>{rows.name}</TableCell>
                <TableCell>{rows.age}</TableCell>
                <TableCell>{rows.id}</TableCell>
              </TableRow>
            );
          })}