How to show all rows with pagination overriding

How to show all rows with pagination overriding

What to achieve

I want to have the option to set pageSize to ‘All’ to match to total count of rows in material-table.

What I have done

I use useState to create rowsPerPage , and set rowsPerPage in the handleChangeRowsPerPage function. I use component overriding to customize the Pagination and pass rowsPerPage and handler to its props. I also pass rowsPerPage to MaterialTable’s pageSize option.

Problems I encounter

The page does not re-size, and the state.pageSize does not update. Even though the props.options.pageSize and Pagination successfully update with onChangeRowsPerPage.

Link to sandbox

const handleChangeRowsPerPage = event => {
    //enable to set rows per page to match total count
    event.target.value === "All"
      ? setRowsPerPage(data.length)
      : setRowsPerPage(event.target.value);
  }; 

  const data = [
    { name: "Mehmet", surname: "Baran", birthYear: 1987 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017 }
  ];
  return (
    <MaterialTable
      title="Component Override Demo"
      columns={[
        { title: "Name", field: "name" },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear" }
      ]}
      data={data}
      //options.pageSize updates, but no re-size
      options={{ pageSize: rowsPerPage }}
      // onChangeRowsPerPage={handleChangeRowsPerPage} //TypeError Cannot read property 'value' of undefined
      components={{
        Pagination: props => (
          <TablePagination
            {...props}
            rowsPerPageOptions={[5, 10, 20, "All"]}
            rowsPerPage={rowsPerPage}
            //updates pagination, but no re-size
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        )
      }}
    />
  );
}

[ifndefdeadmau5]

Please re-open this issue as I’m having a same problem which there’s no way to set pageSize programmatically

[kevheyk]

@NAkibRUET Thank you for reply! Yes, I confirmed that onChangeRowsPerPage as a props of MaterialTable takes event value as parameter. Now I am able to call my own handler inside onChangeRowsPerPage as

              onChangeRowsPerPage={(value) => {
                // map 'All' to count
                if (value === 'All') {
                  value = products.length;
                }
               // missing something here to modify the pageSize state.

The problem persists because I cannot modify the pageSize state of MaterialTable.