Search code examples
reactjsmaterial-uimaterial-table

material-table overriding pagination component causing warnings


enter code hereI am trying to override the pagination component in material-table. The functionality thatI added is working perfectly - however i get warnings in the console.The warning is given below.

Material-UI: The key selectRoot provided to the classes prop is not implemented in MTablePaginationInner. You can only override one of the following: root.

Material-UI: The key caption provided to the classes prop is not implemented in MTablePaginationInner. You can only override one of the following: root

here is the code fragment of the material-ui table

        <MaterialTable 
            columns={columns} 
            data={invoices} 
            icons={IconsForMaterialTable}
            options={{ paging:true}}
            components={{
                Pagination: (subProps) => {
                    return <Box display="flex" justifyContent="flex-end"> <Box width="260px" justifyContent="flex-end">
                        <MTablePagination {...subProps} count={pageCount} onChangePage={(e, page) => setPage(page)} page={page} rowsPerPage={rowsPerPage}/>
                    </Box></Box>
                }}}
        />

Solution

  • The warnings you see are telling you that you are passing a prop named classes to MTablePagination component, and the classes object looks like below, for example:

    const classes = {
      root: "some_class_name",
      selectRoot: "another_class_name",
      caption: "one_more_class_name"
    }
    

    But MTablePagination is not using few classes properties like selectRoot and caption, but using only root property (it can be seen in the source-code).

    Hence, you can safely ignore these warnings or write something like this to remove it:

    components={{
      Pagination: (subProps) => {
          return <Box display="flex" justifyContent="flex-end"> <Box width="260px" justifyContent="flex-end">
              <MTablePagination {...subProps} classes={{root: subProps.classes.root}} /* Rest of the code, removed for brevity.*/ />
          </Box></Box>
      }}}
                                               ^^^^ Passing classes