Material-table: How to change dynamically the value in pageSize in Material-Table?

[jochercoles]

Hi guys. I'm working in a project where the default value for the pageSize is a fixed number. Now, I need change this behaibour for when the rows total in the data source, is less that the this fixed value, pageSize take the less value.
I hope be clear.
Regards, and you have an happy new years.
Javier.

[dragonfriend0013]

I am having a similar issue. I set my paging as such:
paging: keysLength !== 0, pageSizeOptions: keysLength < 5 ? [keysLength] : [5, 10, 20], pageSize: keysLength < 5 ? keysLength : 5,

but once i add a new row (through onRowAdd), the new total rows is reflected, but the pageSize and pageSizeOptions stay the same. It only gets updated if a fully refresh the page.

[eetuv]

Until the issue has been fixed, you may work it around by passing a key prop to the table that contains the number of rows:

<MaterialTable
  key={ data.length }
  ...

[adam0x01]

My workaround is:

 const tableRef = useRef(null)

 useEffect(() => {
       tableRef.current.dataManager.changePageSize(newPageSIze)
  }, [])

<MaterialTable
tableRef={tableRef}
...../>

you also can sort or change the page number dynamically by the tableRef, here's the function:

tableRef.current.dataManager.changeOrder(columnIndex, columnDirection)
tableRef.current.dataManager.changeCurrentPage(newPageNo)

More functions can be hack by the built-in data-manager, refer to https://github.com/mbrn/material-table/blob/master/src/utils/data-manager.js

[jensysantana]

i'm sorry i'm late but now i fixed and i'm sharing.
pageSize:your start row per pages
pageSizeOptions:[5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100],

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[ShahadIshraq]

Would like to report the issue again. This has not been fixed. Using version 1.63.1 now

My workaround is:

 const tableRef = useRef(null)

 useEffect(() => {
       tableRef.current.dataManager.changePageSize(newPageSIze)
  }, [])

<MaterialTable
tableRef={tableRef}
...../>

you also can sort or change the page number dynamically by the tableRef, here's the function:

tableRef.current.dataManager.changeOrder(columnIndex, columnDirection)
tableRef.current.dataManager.changeCurrentPage(newPageNo)

More functions can be hack by the built-in data-manager, refer to https://github.com/mbrn/material-table/blob/master/src/utils/data-manager.js

~Also, this does not totally fix the issue. ~The table view does not change. Only interaction with any of the pagination buttons force the change~
~This needs to be applied before setting the loading to false. Even after that, the row number shown on the select if blank. But at least the page size gets set like this.~

1. This needs to be applied before setting the loading to false.
2. pageSize should be set by default to avoid the blank row number problem.

[GordonSmith]

Just a "me too" but my use case is related to: https://github.com/mbrn/material-table/issues/1743 so I dynamically set the pageSize based on available height and would like it to:

• Trigger a new data callback
• Update the "query.pageSize" value.

[yfrfelipe]

Just in case if someone else is facing this issue yet:

tableRef.current.onQueryChange({page: 0, search: ' '})

Change the page size and the search para as you want.

[azakharo]

Maybe it would be useful for someone in case of using "remote data" feature (passing getData() func in data prop).

. . . . . . . . . 
. . . . . . . . .
  // There was an issue with changing page size.
  // Looks like the pageSize option is NOT just an initial value.
  // On each render of this component you have to provide the actual value.
  // So, you have to control this value and pass it down to the material-table as
  // the pageSize option.

  const [currentPageSize, setCurrentPageSize] = useState(
    pageSizeOpt || DEFAULT_PAGE_SIZE,
  );

  const handlePageSizeChange = useCallback(
    newPageSize => {
      setCurrentPageSize(newPageSize);
      if (onChangeRowsPerPage) {
        onChangeRowsPerPage(newPageSize);
      }
    },
    [setCurrentPageSize, onChangeRowsPerPage],
  );

. . . . . . . . . 
. . . . . . . . .
return (
    <MaterialTable
      options={{
        . . . 
        pageSize: currentPageSize,
        . . .