CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
anish
anish

Reputation: 327

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>
                }}}
        />

Upvotes: 1

Views: 964

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19843

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

Upvotes: 2

Related Questions