Pagination Positioning

The pagination can be positioned using the flex alignemnt property "justifyContent".

Props

Field	Type	Description
options.paginationAlignment	justify-content	The position of the pagination using the flex box

Usage

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

<MaterialTable

// ...

options={{ paginationAlignment: "center" }}

/>;

Live Demo

note

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

Live Editor

function PaginationDemo() { const [paginationAlignment, setOptions] = React.useState("flex-end"); return ( <> <TextField select={true} label="Select position" value={paginationAlignment} onChange={(e) => setOptions(e.target.value)} > <MenuItem value={"flex-end"}>flex-end</MenuItem> <MenuItem value={"flex-start"}>flex-start</MenuItem> <MenuItem value={"center"}>center</MenuItem> </TextField> <MaterialTable data={Array(50) .fill() .map((_, i) => ({ id: i, name: `name ${i + 1}` }))} columns={DEMO_COLS} options={{ paginationAlignment, }} /> </> ); }

function PaginationDemo() {
  const [paginationAlignment, setOptions] = React.useState("flex-end");
  return (
    <>
      <TextField
        select={true}
        label="Select position"
        value={paginationAlignment}
        onChange={(e) => setOptions(e.target.value)}
      >
        <MenuItem value={"flex-end"}>flex-end</MenuItem>
        <MenuItem value={"flex-start"}>flex-start</MenuItem>
        <MenuItem value={"center"}>center</MenuItem>
      </TextField>
      <MaterialTable
        data={Array(50)
          .fill()
          .map((_, i) => ({ id: i, name: `name ${i + 1}` }))}
        columns={DEMO_COLS}
        options={{
          paginationAlignment,
        }}
      />
    </>
  );
}

Result