React Material Table Front End Pagination only

Question

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')}
  />

Answer 1

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}
    />
  );
}