0
165
ViewsMUI TablePagination adding ability to select page number
I am using MUI TablePagination to create pagination in my table. The code is working fine and I'm getting most of the functionality I'm looking for:
- The ability for users to select, via a dropdown, 5, 10 or 20 users per given page.
- Dynamically display the number of pages based on the selected number of users per page.
However, I'm missing this functionality and I'm not sure what prop to use with this component to accomplish this:
- The ability for users to navigate to a selected page from the listed number of result pages.
As you can see in 
it displays 1-5 of 22, but I want to give users the ability to select page like in this 
Here is my functional code:
<TablePagination
rowsPerPageOptions={[5, 10, 20]}
component="div"
count={showUser.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
I want to accomplish this without removing 1,2 functionality.
·
Santiago Trujillo
1 answers
Answer question0
As mentioned in the comments above, my suggestion would be to use the Pagination component instead of the TablePagination component.
This requires you to handle page sizes yourself.
This should help you get there, adapt it to your needs:
const Demo = () => {
const data = [
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ten",
];
const [pageSize, setPageSize] = useState(2);
const [page, setPage] = useState(1);
const handlePage = (page) => setPage(page);
const handlePageSizeChange = (event) => {
setPageSize(event.target.value);
};
const totalPages = Math.ceil(data.length / pageSize);
const pageContent = data.slice((page - 1) * pageSize, page * pageSize);
return (
<>
<ul>
{pageContent.map((item) => (
<li>{item}</li>
))}
</ul>
<select name="page-size" id="page-size" onChange={handlePageSizeChange}>
<option value={2}>2</option>
<option value={4}>4</option>
<option value={6}>6</option>
<option value={8}>8</option>
<option value={10}>10</option>
</select>
<Pagination
color="primary"
count={totalPages}
onChange={(event, value) => handlePage(value)}
page={page}
size="large"
></Pagination>
</>
);
};
export default Demo;
·
Santiago Trujillo
Report
Answer question