title: Implement React-pagination with Rest Api
body: <p>I have this Spring Boot endpoint for listing items from database:</p>
  <pre><code>@RequestMapping(method = RequestMethod.GET, value = &quot;/task&quot;, produces = 
  MediaType.APPLICATION_JSON_VALUE)
  public ResponseEntity&lt;?&gt; processTask(@Valid TaskSearchParams params, Pageable pageable)
  {
      Page&lt;TaskDto&gt; taskList = service.findTasks(params, pageable);
  
      return new ResponseEntity&lt;&gt;(taskList, HttpStatus.OK);
  }
  </code></pre>
  <p>Search DTO:</p>
  <pre><code>@Getter
  @Setter
  public class TaskSearchParams {
  
      private Integer id;
  
      private String title;
  }
  </code></pre>
  <p>Material Table:</p>
  <pre><code>import React from 'react';
  import clsx from 'clsx';
  import { createStyles, lighten, makeStyles, Theme } from '@material-ui/core/styles';
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableContainer from '@material-ui/core/TableContainer';
  import TableHead from '@material-ui/core/TableHead';
  import TablePagination from '@material-ui/core/TablePagination';
  import TableRow from '@material-ui/core/TableRow';
  import TableSortLabel from '@material-ui/core/TableSortLabel';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import Paper from '@material-ui/core/Paper';
  import Checkbox from '@material-ui/core/Checkbox';
  import IconButton from '@material-ui/core/IconButton';
  import Tooltip from '@material-ui/core/Tooltip';
  import Switch from '@material-ui/core/Switch';
  import DeleteIcon from '@material-ui/icons/Delete';
  import FilterListIcon from '@material-ui/icons/FilterList';
  
  interface Data {
      calories: number;
      carbs: number;
      fat: number;
      name: string;
      protein: number;
  }
  
  function createData(
      name: string,
      calories: number,
      fat: number,
      carbs: number,
      protein: number,
  ): Data {
      return { name, calories, fat, carbs, protein };
  }
  
  const rows = [
      createData('Cupcake', 305, 3.7, 67, 4.3),
      createData('Donut', 452, 25.0, 51, 4.9),
      createData('Eclair', 262, 16.0, 24, 6.0),
      createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
      createData('Gingerbread', 356, 16.0, 49, 3.9),
      createData('Honeycomb', 408, 3.2, 87, 6.5),
      createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
      createData('Jelly Bean', 375, 0.0, 94, 0.0),
      createData('KitKat', 518, 26.0, 65, 7.0),
      createData('Lollipop', 392, 0.2, 98, 0.0),
      createData('Marshmallow', 318, 0, 81, 2.0),
      createData('Nougat', 360, 19.0, 9, 37.0),
      createData('Oreo', 437, 18.0, 63, 4.0),
  ];
  
  function descendingComparator&lt;T&gt;(a: T, b: T, orderBy: keyof T) {
      if (b[orderBy] &lt; a[orderBy]) {
          return -1;
      }
      if (b[orderBy] &gt; a[orderBy]) {
          return 1;
      }
      return 0;
  }
  
  type Order = 'asc' | 'desc';
  
  function getComparator&lt;Key extends keyof any&gt;(
      order: Order,
      orderBy: Key,
  ): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) =&gt; number {
      return order === 'desc'
          ? (a, b) =&gt; descendingComparator(a, b, orderBy)
          : (a, b) =&gt; -descendingComparator(a, b, orderBy);
  }
  
  function stableSort&lt;T&gt;(array: T[], comparator: (a: T, b: T) =&gt; number) {
      const stabilizedThis = array.map((el, index) =&gt; [el, index] as [T, number]);
      stabilizedThis.sort((a, b) =&gt; {
          const order = comparator(a[0], b[0]);
          if (order !== 0) return order;
          return a[1] - b[1];
      });
      return stabilizedThis.map((el) =&gt; el[0]);
  }
  
  interface HeadCell {
      disablePadding: boolean;
      id: keyof Data;
      label: string;
      numeric: boolean;
  }
  
  const headCells: HeadCell[] = [
      { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
      { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
      { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
      { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
      { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
  ];
  
  interface EnhancedTableProps {
      classes: ReturnType&lt;typeof useStyles&gt;;
      numSelected: number;
      onRequestSort: (event: React.MouseEvent&lt;unknown&gt;, property: keyof Data) =&gt; void;
      onSelectAllClick: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
      order: Order;
      orderBy: string;
      rowCount: number;
  }
  
  function EnhancedTableHead(props: EnhancedTableProps) {
      const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
      const createSortHandler = (property: keyof Data) =&gt; (event: React.MouseEvent&lt;unknown&gt;) =&gt; {
          onRequestSort(event, property);
      };
  
      return (
          &lt;TableHead&gt;
              &lt;TableRow&gt;
                  &lt;TableCell padding=&quot;checkbox&quot;&gt;
                      &lt;Checkbox
                          indeterminate={numSelected &gt; 0 &amp;&amp; numSelected &lt; rowCount}
                          checked={rowCount &gt; 0 &amp;&amp; numSelected === rowCount}
                          onChange={onSelectAllClick}
                          inputProps={{ 'aria-label': 'select all desserts' }}
                      /&gt;
                  &lt;/TableCell&gt;
                  {headCells.map((headCell) =&gt; (
                      &lt;TableCell
                          key={headCell.id}
                          align={headCell.numeric ? 'right' : 'left'}
                          padding={headCell.disablePadding ? 'none' : 'normal'}
                          sortDirection={orderBy === headCell.id ? order : false}
                      &gt;
                          &lt;TableSortLabel
                              active={orderBy === headCell.id}
                              direction={orderBy === headCell.id ? order : 'asc'}
                              onClick={createSortHandler(headCell.id)}
                          &gt;
                              {headCell.label}
                              {orderBy === headCell.id ? (
                                  &lt;span className={classes.visuallyHidden}&gt;
                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                  &lt;/span&gt;
                              ) : null}
                          &lt;/TableSortLabel&gt;
                      &lt;/TableCell&gt;
                  ))}
              &lt;/TableRow&gt;
          &lt;/TableHead&gt;
      );
  }
  
  const useToolbarStyles = makeStyles((theme: Theme) =&gt;
      createStyles({
          root: {
              paddingLeft: theme.spacing(2),
              paddingRight: theme.spacing(1),
          },
          highlight:
              theme.palette.type === 'light'
                  ? {
                      color: theme.palette.secondary.main,
                      backgroundColor: lighten(theme.palette.secondary.light, 0.85),
                  }
                  : {
                      color: theme.palette.text.primary,
                      backgroundColor: theme.palette.secondary.dark,
                  },
          title: {
              flex: '1 1 100%',
          },
      }),
  );
  
  interface EnhancedTableToolbarProps {
      numSelected: number;
  }
  
  const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) =&gt; {
      const classes = useToolbarStyles();
      const { numSelected } = props;
  
      return (
          &lt;Toolbar
              className={clsx(classes.root, {
                  [classes.highlight]: numSelected &gt; 0,
              })}
          &gt;
              {numSelected &gt; 0 ? (
                  &lt;Typography className={classes.title} color=&quot;inherit&quot; variant=&quot;subtitle1&quot; component=&quot;div&quot;&gt;
                      {numSelected} selected
                  &lt;/Typography&gt;
              ) : (
                  &lt;Typography className={classes.title} variant=&quot;h6&quot; id=&quot;tableTitle&quot; component=&quot;div&quot;&gt;
                      Nutrition
                  &lt;/Typography&gt;
              )}
              {numSelected &gt; 0 ? (
                  &lt;Tooltip title=&quot;Delete&quot;&gt;
                      &lt;IconButton aria-label=&quot;delete&quot;&gt;
                          &lt;DeleteIcon /&gt;
                      &lt;/IconButton&gt;
                  &lt;/Tooltip&gt;
              ) : (
                  &lt;Tooltip title=&quot;Filter list&quot;&gt;
                      &lt;IconButton aria-label=&quot;filter list&quot;&gt;
                          &lt;FilterListIcon /&gt;
                      &lt;/IconButton&gt;
                  &lt;/Tooltip&gt;
              )}
          &lt;/Toolbar&gt;
      );
  };
  
  const useStyles = makeStyles((theme: Theme) =&gt;
      createStyles({
          root: {
              width: '100%',
          },
          paper: {
              width: '100%',
              marginBottom: theme.spacing(2),
          },
          table: {
              minWidth: 750,
          },
          visuallyHidden: {
              border: 0,
              clip: 'rect(0 0 0 0)',
              height: 1,
              margin: -1,
              overflow: 'hidden',
              padding: 0,
              position: 'absolute',
              top: 20,
              width: 1,
          },
      }),
  );
  
  export default function AllBusinessCustomers() {
      const classes = useStyles();
      const [order, setOrder] = React.useState&lt;Order&gt;('asc');
      const [orderBy, setOrderBy] = React.useState&lt;keyof Data&gt;('calories');
      const [selected, setSelected] = React.useState&lt;string[]&gt;([]);
      const [page, setPage] = React.useState(0);
      const [rowsPerPage, setRowsPerPage] = React.useState(5);
  
      const handleRequestSort = (event: React.MouseEvent&lt;unknown&gt;, property: keyof Data) =&gt; {
          const isAsc = orderBy === property &amp;&amp; order === 'asc';
          setOrder(isAsc ? 'desc' : 'asc');
          setOrderBy(property);
      };
  
      const handleSelectAllClick = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
          if (event.target.checked) {
              const newSelecteds = rows.map((n) =&gt; n.name);
              setSelected(newSelecteds);
              return;
          }
          setSelected([]);
      };
  
      const handleClick = (event: React.MouseEvent&lt;unknown&gt;, name: string) =&gt; {
          const selectedIndex = selected.indexOf(name);
          let newSelected: string[] = [];
  
          if (selectedIndex === -1) {
              newSelected = newSelected.concat(selected, name);
          } else if (selectedIndex === 0) {
              newSelected = newSelected.concat(selected.slice(1));
          } else if (selectedIndex === selected.length - 1) {
              newSelected = newSelected.concat(selected.slice(0, -1));
          } else if (selectedIndex &gt; 0) {
              newSelected = newSelected.concat(
                  selected.slice(0, selectedIndex),
                  selected.slice(selectedIndex + 1),
              );
          }
  
          setSelected(newSelected);
      };
  
      const handleChangePage = (event: unknown, newPage: number) =&gt; {
          setPage(newPage);
      };
  
      const handleChangeRowsPerPage = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
          setRowsPerPage(parseInt(event.target.value, 10));
          setPage(0);
      };
  
      const isSelected = (name: string) =&gt; selected.indexOf(name) !== -1;
  
      const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
  
      return (
          &lt;div className={classes.root}&gt;
              &lt;Paper className={classes.paper}&gt;
                  &lt;EnhancedTableToolbar numSelected={selected.length} /&gt;
                  &lt;TableContainer&gt;
                      &lt;Table
                          className={classes.table}
                          aria-labelledby=&quot;tableTitle&quot;
                          size={'medium'}
                          aria-label=&quot;enhanced table&quot;
                      &gt;
                          &lt;EnhancedTableHead
                              classes={classes}
                              numSelected={selected.length}
                              order={order}
                              orderBy={orderBy}
                              onSelectAllClick={handleSelectAllClick}
                              onRequestSort={handleRequestSort}
                              rowCount={rows.length}
                          /&gt;
                          &lt;TableBody&gt;
                              {stableSort(rows, getComparator(order, orderBy))
                                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                  .map((row, index) =&gt; {
                                      const isItemSelected = isSelected(row.name);
                                      const labelId = `enhanced-table-checkbox-${index}`;
  
                                      return (
                                          &lt;TableRow
                                              hover
                                              onClick={(event) =&gt; handleClick(event, row.name)}
                                              role=&quot;checkbox&quot;
                                              aria-checked={isItemSelected}
                                              tabIndex={-1}
                                              key={row.name}
                                              selected={isItemSelected}
                                          &gt;
                                              &lt;TableCell padding=&quot;checkbox&quot;&gt;
                                                  &lt;Checkbox
                                                      checked={isItemSelected}
                                                      inputProps={{ 'aria-labelledby': labelId }}
                                                  /&gt;
                                              &lt;/TableCell&gt;
                                              &lt;TableCell component=&quot;th&quot; id={labelId} scope=&quot;row&quot; padding=&quot;none&quot;&gt;
                                                  {row.name}
                                              &lt;/TableCell&gt;
                                              &lt;TableCell align=&quot;right&quot;&gt;{row.calories}&lt;/TableCell&gt;
                                              &lt;TableCell align=&quot;right&quot;&gt;{row.fat}&lt;/TableCell&gt;
                                              &lt;TableCell align=&quot;right&quot;&gt;{row.carbs}&lt;/TableCell&gt;
                                              &lt;TableCell align=&quot;right&quot;&gt;{row.protein}&lt;/TableCell&gt;
                                          &lt;/TableRow&gt;
                                      );
                                  })}
                              {emptyRows &gt; 0 &amp;&amp; (
                                  &lt;TableRow style={{ height: 53 * emptyRows }}&gt;
                                      &lt;TableCell colSpan={6} /&gt;
                                  &lt;/TableRow&gt;
                              )}
                          &lt;/TableBody&gt;
                      &lt;/Table&gt;
                  &lt;/TableContainer&gt;
                  &lt;TablePagination
                      rowsPerPageOptions={[5, 10, 25]}
                      component=&quot;div&quot;
                      count={rows.length}
                      rowsPerPage={rowsPerPage}
                      page={page}
                      onPageChange={handleChangePage}
                      onRowsPerPageChange={handleChangeRowsPerPage}
                  /&gt;
              &lt;/Paper&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>Ref: <a href="https://material-ui.com/components/tables/" rel="nofollow noreferrer">https://material-ui.com/components/tables/</a></p>
  <p>What is the proper way to build <code>Paged</code> object using <code>React-Pagination</code> with Typescript and send appropriate payload using this table?</p>