CODEWITHSUNDEEP
reactjsmaterial-uimaterial-design
BarakJob
BarakJob

Reputation: 51

Want to Create Pagination on table from Material UI in React Application

enter image description here

I am creating a table with data. Want pagination like this attached image in the footer. Left-hand side I want the numbers and right-hand side Results per page.

Upvotes: 0

Views: 3217

Answers (2)

Sarun UK
Sarun UK

Reputation: 6736

Probably you have to use the combination of Pagination and Table pagination. And hide the unused panels with the CSS.

<div className={classes.root}>
  <Pagination count={10} variant="outlined" shape="rounded" />
  <TablePagination
    component="div"
    count={100}
    page={page}
    onChangePage={handleChangePage}
    rowsPerPage={rowsPerPage}
    onChangeRowsPerPage={handleChangeRowsPerPage}
  />
</div>;

I have created a sample codesandbox (This is just a workaround) - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225

Let me know if you need more help.

Upvotes: 1

Kn3cht
Kn3cht

Reputation: 174

As @Tejogol mentioned you can use the Material UI table example pagination and change it.

You can store the current page number in a state variable and add a different style to the corresponding navigation field. The style seems like a simple border with a small border radius (1-3px).

For the results per page you can use React spacers. Don't forget to update the current page number when changing the results per page.

Upvotes: 0

Related Questions