Pagination

The table has built in pagination. This is enabled by default. Several props are available to adjust the pagination.

Props

Field	Type	Description
options.paging	boolean	Toggle pagination
options.emptyRowsWhenPaging	boolean	If a page does not contain enough data to fill all rows, should the rows be displayed
options.paginationType	'normal' /'stepped'	Toggle between the default mui pagination or a stepped pagination
options.paginationPosition	'bottom' /'top' / 'both'	Adjusts the pagination position in relation to the body
options.numberOfPagesAround	1 - 10	In combination with the stepped pagination adjusts the pages around current page
localization	The texts	The text displayed on hover over the pagination elements
showFirstLastPageButtons	boolean or Partial<{ first: boolean; last: boolean }>	Controls the first and last buttons for pagination, defaults to true

Usage

import MaterialTable from "@material-table/core";

<MaterialTable

// ...

options={{ paginationType: "stepped", paginationPosition: "top" }}

/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function PaginationDemo() { const showFirstLastPageButtonsStates = { all: true, first: { last: false }, last: { first: false }, none: false, }; const [ { paging, emptyRowsWhenPaging, paginationType, numberOfPagesAround, paginationPosition, showFirstLastPageButtonsState, }, setOptions, ] = React.useState({ paging: true, emptyRowsWhenPaging: true, paginationType: "normal", paginationPosition: "bottom", numberOfPagesAround: 1, showFirstLastPageButtonsState: "all", }); const showFirstLastPageButtons = showFirstLastPageButtonsStates[showFirstLastPageButtonsState]; return ( <> <FormGroup> <FormControlLabel control={ <Switch checked={paging} onChange={(e) => { setOptions((prev) => ({ ...prev, paging: e.target.checked })); }} /> } label="Paging" /> <FormControlLabel control={ <Switch checked={emptyRowsWhenPaging} onChange={(e) => { setOptions((prev) => ({ ...prev, emptyRowsWhenPaging: e.target.checked, })); }} /> } label="Empty Rows When Paging" /> <Button variant="contained" sx={{ mb: 1 }} onClick={() => { setOptions(({ paginationPosition: prevPos, ...prev }) => ({ ...prev, paginationPosition: prevPos === "bottom" ? "top" : prevPos === "top" ? "both" : "bottom", })); }} > Pagination Position: {paginationPosition} </Button> <Button variant="contained" sx={{ mb: 1 }} onClick={() => { setOptions(({ paginationType: prevType, ...prev }) => ({ ...prev, paginationType: prevType === "normal" ? "stepped" : "normal", })); }} > Pagination Type: {paginationType} </Button> {paginationType === "stepped" ? ( <Button variant="contained" sx={{ mb: 1 }} onClick={() => { setOptions(({ numberOfPagesAround: prevPages, ...prev }) => ({ ...prev, numberOfPagesAround: Math.max((prevPages + 1) % 11, 1), })); }} > Number Of Pages Around: {numberOfPagesAround} </Button> ) : null} </FormGroup> <FormControl> <FormLabel id="demo-controlled-radio-buttons-group"> Show First/Last Buttons </FormLabel> <RadioGroup row={true} name="controlled-radio-buttons-group" value={showFirstLastPageButtonsState} onChange={(e) => { setOptions((prev) => ({ ...prev, showFirstLastPageButtonsState: e.target.value, })); }} > <FormControlLabel value="all" control={<Radio />} label="All" /> <FormControlLabel value="none" control={<Radio />} label="None" /> <FormControlLabel value="first" control={<Radio />} label="First only" /> <FormControlLabel value="last" control={<Radio />} label="Last Only" /> </RadioGroup> </FormControl> <MaterialTable data={Array(50) .fill() .map((_, i) => ({ id: i, name: `name ${i + 1}` }))} columns={DEMO_COLS} options={{ paging, emptyRowsWhenPaging, paginationType, numberOfPagesAround, paginationPosition, showFirstLastPageButtons, }} /> </> ); }

function PaginationDemo() {
  const showFirstLastPageButtonsStates = {
    all: true,
    first: { last: false },
    last: { first: false },
    none: false,
  };
  const [
    {
      paging,
      emptyRowsWhenPaging,
      paginationType,
      numberOfPagesAround,
      paginationPosition,
      showFirstLastPageButtonsState,
    },
    setOptions,
  ] = React.useState({
    paging: true,
    emptyRowsWhenPaging: true,
    paginationType: "normal",
    paginationPosition: "bottom",
    numberOfPagesAround: 1,
    showFirstLastPageButtonsState: "all",
  });

  const showFirstLastPageButtons =
    showFirstLastPageButtonsStates[showFirstLastPageButtonsState];
  return (
    <>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={paging}
              onChange={(e) => {
                setOptions((prev) => ({ ...prev, paging: e.target.checked }));
              }}
            />
          }
          label="Paging"
        />
        <FormControlLabel
          control={
            <Switch
              checked={emptyRowsWhenPaging}
              onChange={(e) => {
                setOptions((prev) => ({
                  ...prev,
                  emptyRowsWhenPaging: e.target.checked,
                }));
              }}
            />
          }
          label="Empty Rows When Paging"
        />
        <Button
          variant="contained"
          sx={{ mb: 1 }}
          onClick={() => {
            setOptions(({ paginationPosition: prevPos, ...prev }) => ({
              ...prev,
              paginationPosition:
                prevPos === "bottom"
                  ? "top"
                  : prevPos === "top"
                  ? "both"
                  : "bottom",
            }));
          }}
        >
          Pagination Position: {paginationPosition}
        </Button>
        <Button
          variant="contained"
          sx={{ mb: 1 }}
          onClick={() => {
            setOptions(({ paginationType: prevType, ...prev }) => ({
              ...prev,
              paginationType: prevType === "normal" ? "stepped" : "normal",
            }));
          }}
        >
          Pagination Type: {paginationType}
        </Button>
        {paginationType === "stepped" ? (
          <Button
            variant="contained"
            sx={{ mb: 1 }}
            onClick={() => {
              setOptions(({ numberOfPagesAround: prevPages, ...prev }) => ({
                ...prev,
                numberOfPagesAround: Math.max((prevPages + 1) % 11, 1),
              }));
            }}
          >
            Number Of Pages Around: {numberOfPagesAround}
          </Button>
        ) : null}
      </FormGroup>
      <FormControl>
        <FormLabel id="demo-controlled-radio-buttons-group">
          Show First/Last Buttons
        </FormLabel>
        <RadioGroup
          row={true}
          name="controlled-radio-buttons-group"
          value={showFirstLastPageButtonsState}
          onChange={(e) => {
            setOptions((prev) => ({
              ...prev,
              showFirstLastPageButtonsState: e.target.value,
            }));
          }}
        >
          <FormControlLabel value="all" control={<Radio />} label="All" />
          <FormControlLabel value="none" control={<Radio />} label="None" />
          <FormControlLabel
            value="first"
            control={<Radio />}
            label="First only"
          />
          <FormControlLabel
            value="last"
            control={<Radio />}
            label="Last Only"
          />
        </RadioGroup>
      </FormControl>
      <MaterialTable
        data={Array(50)
          .fill()
          .map((_, i) => ({ id: i, name: `name ${i + 1}` }))}
        columns={DEMO_COLS}
        options={{
          paging,
          emptyRowsWhenPaging,
          paginationType,
          numberOfPagesAround,
          paginationPosition,
          showFirstLastPageButtons,
        }}
      />
    </>
  );
}

Result