Skip to content
A pagination component for Material-UI.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src/Pagination
.babelrc
.gitignore
LICENSE
README.md
package.json
webpack.config.js

README.md

materialui-pagination-component

A pagination component for Material-UI.

Installation:

yarn add materialui-pagination-component # Or, npm install materialui-pagination-component

Usage:

import React, { useState } from "react";
import Pagination from "materialui-pagination-component";

function App() {
  const [page, setPage] = useState(1);

  const handleOnChange = pageValue => {
    setPage(pageValue);
  };

  return (
    <Pagination
      variant="text" // Valid options are ["text", "outlined"].
      selectVariant="select" // Valid options are ["button", "tab", "select"].
      navigationVariant="icon" // Valid options are ["icon", "text"].
      pageWindowVariant="standard" // Valid options are ["standard", "ellipsis"].
      color="primary" // Passed down to Material-UI components.
      indicatorColor="primary" // Passed down to Material-UI Tabs.
      hideNavigation={false} // Hides the first, last, previous, & next page navigation buttons.
      hideFirst={false} // Hides the first page navigation button.
      hideLast={false} // Hides the last page navigation button.
      hidePrevious={false} // Hides the previous page navigation button.
      hideNext={false} // Hides the next page navigation button.
      disableFirst={false} // Disables the first page navigation button.
      disableLast={false} // Disables the last page navigation button.
      disablePrevious={false} // Disables the previous page navigation button.
      disableNext={false} // Disables the next page navigation button.
      page={page} // The current page.
      totalPages={10} // The total number of pages.
      elevation={null} // Passed down to Material-UI Paper component.
      onChange={handleOnChange} // Callback when the page changes.
    />
  );
}

Examples:

Screenshot

You can’t perform that action at this time.