Material-table: Table Body not updating after onChangeRowsPerPage

[msb]

I have an application with table data managed outside material table in state - this is because my table is editable (as per your examples). I had overridden onChangePage and onChangeRowsPerPage and my table was paging correctly in version 1.40.1. However, when I upgraded, to 1.46.0, the table body stopped resizing after onChangeRowsPerPage is handled. I have added a cut-down example of how I am using material-table:

import React from 'react';
import MaterialTable from "material-table";
import {TablePagination} from "@material-ui/core";

export interface IQuery {
    page: number
    pageSize: number
}

export interface IState {
    query: IQuery
    data: any[]
    totalCount: number
    pageChanged: boolean
}

class App extends React.Component<object, IState> {

  public state = {
    query: {
      page: 1,
      pageSize: 5,
    },
    data: [],
    totalCount: 0,
    pageChanged: true
  }

  public fetchData(additionalState?: object) {
    const { query } = this.state
    const url = `https://reqres.in/api/users?per_page=${query.pageSize}&page=${query.page}`
    fetch(url)
      .then(response => response.json())
      .then(result => {
        this.setState({
            ...additionalState,
            data: result.data,
            totalCount: result.total
        })
      })
  }

  public componentDidMount() {
    this.fetchData()
  }

  render() {
    const { totalCount, query, data, pageChanged } = this.state

    return (
      <MaterialTable
        title="Illustrates Page Size Changing Problem"
        columns={[
          {
            title: 'Avatar',
            field: 'avatar',
            render: (rowData: any) => (
              <img
                style={{ height: 36, borderRadius: '50%' }}
                src={rowData.avatar}
                alt={rowData.first_name}
              />
            ),
          },
          { title: 'Id', field: 'id' },
          { title: 'First Name', field: 'first_name' },
          { title: 'Last Name', field: 'last_name' },
        ]}
        data={data}
        components={{
          Pagination: (props: any) => (
            <TablePagination {...props} count={totalCount} page={query.page - 1} rowsPerPage={query.pageSize}/>
          ),
        }}
        onChangePage={(page: number) => {
          // this is a work-around, as I received two onChangePage event, the 2nd resetting the page number
          if (pageChanged) {
            this.setState(
              {query: {...query, page: page + 1}, pageChanged: false}, () => this.fetchData({pageChanged: true})
            );
          }
        }}
        onChangeRowsPerPage={(pageSize: number) => {
          this.setState({query: {...query, pageSize}}, this.fetchData);
        }}
      />
    )
  }
}

export default App;

I have pin-pointed the change request that breaks my code. It's clearly meant to fix something around page size changing but I don't understand exactly what. So my question is, was this CR incorrect or is there something wrong with my approach - in which case, what should I do instead?

Any help gratefully received.

[dmyalik]

Try to add this in your table options:
options={{ pageSize: this.state.query.pageSize }}

And to avoid other issues it is better to use material-table approach with remote data like here..

[msb]

Thanks @dmyalik, that worked perfectly.
:)

[sureshtidbit]

this does not work when value coming from props not from state. @dmyalik

[dimabitsorchestra]

this does not work when value coming from props not from state. @dmyalik

As a solution, you can use componentDidUpdate() hook and set state there.

componentDidUpdate(prevProps) { if (this.props.pageSize!== prevProps.pageSize) { this.setState({pageSize: this.props.pageSize}); } }
and then use it in table options
options={{ pageSize: this.state.pageSize }}

And again to avoid other issues it is better to use a material-table approach with remote data like here.

[alam7860]

plz tell me about pegination with firebase database (remote data) in react-hook