Material-table: Redux with Remote Data

[EVRUSIN]

https://github.com/mbrn/material-table/issues/630
Hi! Kinda same problem as above.

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={query => {
    return new Promise((resolve, reject) => {
      queryHandle(query.page, query.pageSize).then(result => {
        resolve({
          data: accountsPage,
          page: page,
          totalCount: total
        })
      })
    })
  }}
 />

This is my table. Function queryHandle dispatches and action that puts accounts into redux.

async accountsParams => {
  try {
    const accounts = await accountApi.get("list", {
     ...accountsParams
    })
    dispatch(getAccountsPageSuccess(accounts, accountsParams))
  } catch (error) {
    dispatch(addError(error))
  }

But

resolve({
  data: accountsPage,
  page: page,
  totalCount: total
})

here we always got "old version" of redux.

In the other case

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={accountsPage}
  components={{
    Pagination: () => (
      <TablePagination
        rowsPerPageOptions={[5, 10, 25]}
        count={total}
        rowsPerPage={pageSize}
        page={page}
        onChangePage={handleChangeListPage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        ActionsComponent={TablePaginationActions}
      />
    )
  }}
/>

in redux I have array of 10 entities (for example), but MT shows only 5 of them.
Hope you will help me, thank you ^_^

[EVRUSIN]

So, overall the problem seems to be the next one: when I override Pagination of MT, even if MT gets array of more then 5 elements, is still renders only 5 rows (the props, that I give here

Pagination: props => {
  return (
    <TablePagination
      rowsPerPageOptions={[5, 10, 25]}
      count={total}
      rowsPerPage={pageSize}
      page={page}
      onChangePage={handleChangeListPage}
      onChangeRowsPerPage={handleChangeRowsPerPage}
      ActionsComponent={TablePaginationActions}
    />
  )
}

shows that rowsPerPage is still 5

[EVRUSIN]

After investigation I realized that in my <MTableBody> in props.renderData I still get only 5 elements, and props.pageSize is still 5

[EVRUSIN]

@mbrn So, can you fix this please?

[mbrn]

Did you set options.pageSize as 10?

[EduSantosBrito]

I have the same problem, i changed the Pagination component in MTable, and used a Context API to control columns, data, pageSize and others props. I changed options.pageSize by the state value from Context API. When i change the pageSize in my Pagination component, the pageSize value from the Context API change too, but nothing happens in MTable, can you help me?

[farajist]

Same issue while trying to update the pageSize dynamically through Redux

[sureshtidbit]

still i face problem in 1.58.2 when redux change limit attribute that not show in mtable
columns={columns}
tableRef={props.tableRef}
title="Manage Facility"
isLoading={!props.remote}
onSearchChange={e => searchInData(e)}
data={props.facilities}
options={{
pageSize: props.limit,
emptyRowsWhenPaging: false,
exportButton: false,
filtering: false,
searchText:props.searchText
}}
components={{
Pagination: () => {
return (
rowsPerPageOptions={[5, 10, 25]}
count={props.count}
rowsPerPage={props.limit}
page={props.page - 1}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
);
},
}}
actions={[
{
icon: () => ,
tooltip: 'Filters',
isFreeAction: true,
onClick:e=>setAdvanceFilterDialog(true),
},
{
icon: 'add',
tooltip: 'Add Facility',
isFreeAction: true,
onClick: props.setAddDrawer,
},
]}
/>

please solve issue this create problem or give me hackable solution for this. @mbrn

[sureshtidbit]

@mbrn can you help us here. Because we still facing the issue.

[LukeHardyLexacom]

I seem to be having the exact same problem here as described. Any updates on this at all?