ReactJs - MaterialTable pagination, row per page not working

user_15257922 0
Viewed 1339

I'm currently using Material-table . It displays data normally however, Pagination and Row per Page dropdown is not working. Nothing happens upon clicking, next button and selected number of rows.

See below codes:

import MaterialTable from 'material-table'

const tableIcons = {
 /*table icons*/
}

function Test(){
  const [data, setData] = useState([]);
  
  const getDatas = async() => {
    await axios.get('/API')
    .then(response => {
      setData(response.data)
    }
  }

const columns = [
  {.....} //columns
]

return(
  <div>
    <MaterialTable
      icons = {tableIcons}
      columns = {columns}
      data = {data}
      title = 'List of data'
      actions = {[{
        //add button properties
      }]}
    >
    </MaterialTable>
  </div>
)

}
export default Test;

I'm getting the following error on console upon onload and clicking pagination buttons.

On load:

enter image description here

On click of next button

reac

Please help me with this. Thank you in advance.

material-table material-ui reactjs javascript
1 Answers

First of all, keep in mind that the original project was discontinued, and the new direction can be found in this repository (it's a fork of the original). There will be a lot of refactorings and breaking changes, so you might want to check them out first.

Now, on your question, since you are working with remote data you could check out the official example on how to handle this kind of data.

If your requirements don't allow you to do this, you will need to do all the handling by yourself. That means you should provide your own implementation of the Pagination component, in which you define your own behavior of onChangePage and other callbacks.

The customisation will look something like:

Pagination: (properties: any) => {
    return (
        <TablePagination
            {...properties}
            count={currentPage.total}
            onChangePage={(event: any, page: number) => {
                onChangePage(page);
            }}
            page={currentPage.startIndex / pageSize}
        />
    );
}

where total, startIndex etc. will be provided by the API you consume, along with the actual data that you show in the table. These components overrides should be provided under the components property of the material table.

user_66126750
Related