Pagination

We've created this special component due to the fact that you would have needed to write a lot of code to obtain a small component. So, it was done to make your life easier.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/paginationStyle.js.

Overview

View Example Code

import React from "react";
// core components
import Pagination from "components/Pagination/Pagination.js";

export default function PaginationDocs() {
  return (
    <Pagination
      pages={[
        { text: "Previous" },
        { text: 1 },
        { text: 2 },
        { text: 3 },
        { text: "Next" }
      ]}
    />
  );
}

Disabled and active states

Pagination links are customizable for different circumstances. Use disabled: true for links that appear un-clickable and active: true to indicate the current page.

View Example Code

import React from "react";
// core components
import Pagination from "components/Pagination/Pagination.js";

export default function PaginationDocs() {
  return (
    <Pagination
      pages={[
        { disabled: true, text: "Previous" },
        { text: 1 },
        { active: true, text: 2 },
        { text: 3 },
        { text: "Next" }
      ]}
    />
  );
}

Alignment

Change the alignment of pagination components with flexbox utilities.

View Example Code

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Pagination from "components/Pagination/Pagination.js";

const style = {
  justifyContentCenter: {
    "& > ul": {
      justifyContent: "center!important"
    }
  }
};

const useStyles = makeStyles(style);

export default function PaginationDocs() {
  const classes = useStyles();
  return (
    <div className={classes.justifyContentCenter}>
      <Pagination
        pages={[
          { text: "Previous" },
          { text: 1 },
          { text: 2 },
          { text: 3 },
          { text: "Next" }
        ]}
      />
    </div>
  );
}

View Example Code

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Pagination from "components/Pagination/Pagination.js";

const style = {
  justifyContentEnd: {
    "& > ul": {
      justifyContent: "flex-end!important"
    }
  }
};

const useStyles = makeStyles(style);

export default function PaginationDocs() {
  const classes = useStyles();
  return (
    <div className={classes.justifyContentEnd}>
      <Pagination
        pages={[
          { text: "Previous" },
          { text: 1 },
          { text: 2 },
          { text: 3 },
          { text: "Next" }
        ]}
      />
    </div>
  );
}

Props

Pagination.defaultProps = {
  color: "primary"
};

Pagination.propTypes = {
  pages: PropTypes.arrayOf(
    PropTypes.shape({
      active: PropTypes.bool,
      disabled: PropTypes.bool,
      text: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
        .isRequired,
      onClick: PropTypes.func
    })
  ).isRequired,
  color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]),
  className: PropTypes.string
};