material-ui-flat-pagination

A pagination component for Material-UI using Button component.

Compatibility

Supported Versions, material-ui-flat-pagination, Material-UI, ---------------------------, -----------, >=4.0.0, >=4.0.0, >=3.0.0, >=1.0.0, 2.x, 0.x, ## Installation

npm install material-ui-flat-pagination

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, Name, Type, Default, Description, ----, ----, -------, -----------, limit *, number, The number of rows per page. Allow a number greater than or equal to 1., offset *, number, The number of rows to skip. Allow a number greater than or equal to 0., total *, number, The total number of rows. Allow a number greater than or equal to 0., centerRipple, bool, false, If true, the ripples of all buttons will be centered., classes, object, Override or extend the styles applied to the component. See CSS API below for more details., component, union: string | func | object, 'div', The component used for the root node. Either a string to use a DOM element or a component., currentPageColor, enum: 'default' | 'inherit' | 'primary' | 'secondary', 'secondary', The color of the current page button., disabled, bool, false, If true, all buttons will be disabled., disableFocusRipple, bool, false, If true, the keyboard focus ripple of all buttons will be disabled., disableRipple, bool, false, If true, the ripple effect of all buttons will be disabled., fullWidth, bool, false, If true, all buttons will take up the full width of its container., innerButtonCount, number, 2, The number of displayed standard page buttons adjacent to the current button. Allow a number greater than or equal to 0., nextPageLabel, node, '>', The content of the next page button., onClick, func, Callback fired when the button is clicked.Signature:function(event: object, offset: number, page: number) => voidevent: The event source of the callback.offset: The number of new offset.page: The number of new page., otherPageColor, enum: 'default' | 'inherit' | 'primary' | 'secondary', 'primary', The color of the buttons of other pages excluding the current page., outerButtonCount, number, 2, The number of standard page buttons displayed at the end. Allow a number greater than or equal to 1., previousPageLabel, node, '<', The content of the previous page button., reduced, bool, false, If true, the number of displayed buttons will be reduced. Equivalent to innerButtonCount=1 and outerButtonCount=1., renderButton, func, Callback 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}` })Signature:function({ offset: number, page: number, children: node}) => ReactElementoffset: The number of new offset.page: The number of new page.children: The page button component., size, enum: 'small' | 'medium' | 'large', 'medium', The size of all buttons., Any other properties supplied will be spread to the root element.

CSS API, Name, Description, ----, -----------, root, Styles applied to the root element., rootCurrent, Styles applied to the root element of the current page button., rootEllipsis, Styles applied to the root element of the ellipsis page button., rootEnd, Styles applied to the root element of the end page button., rootStandard, Styles applied to the root element of the standard page button., label, Styles applied to the span element of the page button that wraps the children., text, Styles applied to the root element of the page button., textPrimary, Styles applied to the root element of the page button if currentPageColor="primary" or otherPageColor="primary"., textSecondary, Styles applied to the root element of the page button if currentPageColor="secondary" or otherPageColor="secondary"., colorInherit, Styles applied to the root element of the page button if currentPageColor="inherit" or otherPageColor="inherit"., colorInheritCurrent, Styles applied to the root element of the current page button if currentPageColor="inherit"., colorInheritOther, Styles applied to the root element of the other page button if otherPageColor="inherit"., disabled, Styles applied to the root element of the page button if disabled={true}., sizeSmall, Styles applied to the root element of the page button if size="small"., sizeSmallCurrent, Styles applied to the root element of the current page button if size="small"., sizeSmallEllipsis, Styles applied to the root element of the ellipsis page button if size="small"., sizeSmallEnd, Styles applied to the root element of the end page button if size="small"., sizeSmallStandard, Styles applied to the root element of the standard page button if size="small"., sizeLarge, Styles applied to the root element of the page button if size="large"., sizeLargeCurrent, Styles applied to the root element of the current page button if size="large"., sizeLargeEllipsis, Styles applied to the root element of the ellipsis page button if size="large"., sizeLargeEnd, Styles applied to the root element of the end page button if size="large"., sizeLargeStandard, Styles applied to the root element of the standard page button if size="large"., fullWidth, Styles applied to the root element of the page button if fullWidth={true}., ## License

MIT, see LICENSE for details.