Home

Awesome

material-ui-flat-pagination

Build Status Coverage Status npm version

A pagination component for Material-UI using Button component.

Compatibility

Supported Versions

material-ui-flat-paginationMaterial-UI
>=4.0.0>=4.0.0
>=3.0.0>=1.0.0
2.x0.x

Installation

npm install material-ui-flat-pagination

Demo

Demo

Demo

Example

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Pagination from "material-ui-flat-pagination";

const theme = createMuiTheme();

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { offset: 0 };
  }

  handleClick(offset) {
    this.setState({ offset });
  }

  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Pagination
          limit={10}
          offset={this.state.offset}
          total={100}
          onClick={(e, offset) => this.handleClick(offset)}
        />
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

Props

NameTypeDefaultDescription
limit *numberThe number of rows per page. Allow a number greater than or equal to 1.
offset *numberThe number of rows to skip. Allow a number greater than or equal to 0.
total *numberThe total number of rows. Allow a number greater than or equal to 0.
centerRippleboolfalseIf true, the ripples of all buttons will be centered.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
componentunion:<br> string |<br> func |<br> object'div'The component used for the root node. Either a string to use a DOM element or a component.
currentPageColorenum:<br> 'default' |<br> 'inherit' |<br> 'primary' |<br> 'secondary''secondary'The color of the current page button.
disabledboolfalseIf true, all buttons will be disabled.
disableFocusRippleboolfalseIf true, the keyboard focus ripple of all buttons will be disabled.
disableRippleboolfalseIf true, the ripple effect of all buttons will be disabled.
fullWidthboolfalseIf true, all buttons will take up the full width of its container.
innerButtonCountnumber2The number of displayed standard page buttons adjacent to the current button. Allow a number greater than or equal to 0.
nextPageLabelnode'>'The content of the next page button.
onClickfuncCallback fired when the button is clicked.<br><br>Signature:<br>function(event: object, offset: number, page: number) => void<br>event: The event source of the callback.<br>offset: The number of new offset.<br>page: The number of new page.
otherPageColorenum:<br> 'default' |<br> 'inherit' |<br> 'primary' |<br> 'secondary''primary'The color of the buttons of other pages excluding the current page.
outerButtonCountnumber2The number of standard page buttons displayed at the end. Allow a number greater than or equal to 1.
previousPageLabelnode'<'The content of the previous page button.
reducedboolfalseIf true, the number of displayed buttons will be reduced. Equivalent to innerButtonCount=1 and outerButtonCount=1.
renderButtonfuncCallback fired when the button is rendered. Main use case is to use anchor for pagination: ({ page, children }) => React.cloneElement(children as React.ReactElement, { href: `?page=${page}` })<br><br>Signature:<br>function({ offset: number, page: number, children: node}) => ReactElement<br>offset: The number of new offset.<br>page: The number of new page.<br>children: The page button component.
sizeenum:<br> 'small' |<br> 'medium' |<br> 'large''medium'The size of all buttons.

Any other properties supplied will be spread to the root element.

CSS API

NameDescription
rootStyles applied to the root element.
rootCurrentStyles applied to the root element of the current page button.
rootEllipsisStyles applied to the root element of the ellipsis page button.
rootEndStyles applied to the root element of the end page button.
rootStandardStyles applied to the root element of the standard page button.
labelStyles applied to the span element of the page button that wraps the children.
textStyles applied to the root element of the page button.
textPrimaryStyles applied to the root element of the page button if currentPageColor="primary" or otherPageColor="primary".
textSecondaryStyles applied to the root element of the page button if currentPageColor="secondary" or otherPageColor="secondary".
colorInheritStyles applied to the root element of the page button if currentPageColor="inherit" or otherPageColor="inherit".
colorInheritCurrentStyles applied to the root element of the current page button if currentPageColor="inherit".
colorInheritOtherStyles applied to the root element of the other page button if otherPageColor="inherit".
disabledStyles applied to the root element of the page button if disabled={true}.
sizeSmallStyles applied to the root element of the page button if size="small".
sizeSmallCurrentStyles applied to the root element of the current page button if size="small".
sizeSmallEllipsisStyles applied to the root element of the ellipsis page button if size="small".
sizeSmallEndStyles applied to the root element of the end page button if size="small".
sizeSmallStandardStyles applied to the root element of the standard page button if size="small".
sizeLargeStyles applied to the root element of the page button if size="large".
sizeLargeCurrentStyles applied to the root element of the current page button if size="large".
sizeLargeEllipsisStyles applied to the root element of the ellipsis page button if size="large".
sizeLargeEndStyles applied to the root element of the end page button if size="large".
sizeLargeStandardStyles applied to the root element of the standard page button if size="large".
fullWidthStyles applied to the root element of the page button if fullWidth={true}.

License

MIT, see LICENSE for details.