MUI TablePagination adding ability to select page number

user_4598078 0
Viewed 53

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:

  1. The ability for users to select, via a dropdown, 5, 10 or 20 users per given page.
  2. 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:

  1. The ability for users to navigate to a selected page from the listed number of result pages.

As you can see in current table pagination it displays 1-5 of 22, but I want to give users the ability to select page like in this page selection pagination

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.

material-ui reactjs pagination javascript
1 Answers

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;
user_68547090
Related