CODEWITHSUNDEEP
javascriptreactjsmaterial-uipagination
alcol92
alcol92

Reputation: 165

MUI 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:

  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.

Upvotes: 7

Views: 14570

Answers (2)

Mahesh Suranga
Mahesh Suranga

Reputation: 29

You can use TablePagination instead of just the Pagination component. further, you can customize your pagination UI component by using ActionsComponent prop. https://mui.com/material-ui/api/table-pagination/ . Here I will post a sample example to replace pagination with the dropdown list.

<TablePagination
  rowsPerPageOptions={[10, 20, 50]}
  count={1000}
  rowsPerPage={10}
  page={pageNo}
  onPageChange={handlePageChange}
  ActionsComponent={(subProps: any) => {
    const {
      page,
      count,
      rowsPerPage,
      backIconButtonProps,
      nextIconButtonProps,
      showLastButton,
      getItemAriaLabel,
      showFirstButton,
      onPageChange,
      ...restSubProps
    } = subProps;
    return (
      <>
        <Select
          size="small"
          onChange={(e: any) => handlePageChange(e, e.target.value)}
          value={pageNo}
          MenuProps={{
            PaperProps: { sx: { maxHeight: 360 } }
          }}
          >
          <MenuItem id={1} key={1} value={1}>{1}</MenuItem>
          <MenuItem id={2} key={2} value={2}>{2}</MenuItem>
          <MenuItem id={3} key={3} value={3}>{3}</MenuItem>
         </Select>
      </>
    );
  }}
/>

Upvotes: 2

sneaky squid
sneaky squid

Reputation: 156

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;

Upvotes: 4

Related Questions