React Material Table Front End Pagination only-CodePudding

I have MUI 4 and doing table pagination. I received all the data from API which has no pagination, only about 50 items, so it will be small front end pagination. Are there any easy input to set properties for this table? I tried copying examples online, however they are for complicated back end pagination. Not sure, what I should have for (a) rowsPerPage (b) page or (c) onChangePage. My table does not have any special effects .

  <TablePagination
    rowsPerPageOptions={[10, 25, 100]}
    count={appointmentList.length}
    rowsPerPage={10} // I want 10 to be default value from 10,25,100
    page={5}
    onChangePage={(_, p) => console.log('hello')}
  />

CodePudding user response：

if you want to create 10,25,... options you can create a const like this:

const pageSizes = [10,25,50];

you can use a code like below to show number per page options and for your pagination:

          {"number per page: "}
          <select onChange={handlePageSizeChange} value={pageSize}>
            {pageSizes.map((size) => (
              <option key={size} value={size}>
                {size}
              </option>
            ))}
          </select>

          <Pagination
            hideNextButton
            hidePrevButton
            className="my-3"
            count={count}
            page={page}
            siblingCount={1}
            boundaryCount={1}
            variant="outlined"
            shape="rounded"
            onChange={handlePageChange}
          />

also for handling on changes define them as below:

const handlePageChange = (event, value) => {
    setPage(value);
  };

  const handlePageSizeChange = (event) => {
    setPageSize(event.target.value);
    setPage(1);
  };

also you could define your variable states as below:

  const [page, setPage] = useState(1);
  const [count, setCount] = useState(0);
  const [pageSize, setPageSize] = useState(3);

CodePudding user response：

You can create a state for handling page and a function for handling page change, like this:

import React from 'react';
import TablePagination from '@material-ui/core/TablePagination';

export default function TablePaginationDemo() {
  const [page, setPage] = React.useState(2);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <TablePagination
      component="div"
      count={100}
      page={page}
      onPageChange={handleChangePage}
      rowsPerPage={rowsPerPage}
      onRowsPerPageChange={handleChangeRowsPerPage}
    />
  );
}