Pagination

Sizes

The controls within Pagination can be rendered in various sizes.

() => {
  const sizes = ['small', 'medium', 'large', 'jumbo']

  class Paginated extends Component {
    constructor(props) {
      super(props);

      this.state = {
        currentPage: 1
      };

      this.handlePageChange = this.handlePageChange.bind(this);
    }

    handlePageChange(currentPage) {
      this.setState({ currentPage });
    }

    render() {
      const { currentPage } = this.state;
      const { size } = this.props

      return (
        <Pagination
          size={size}
          currentPage={currentPage}
          onPageChange={this.handlePageChange}
          pageSize={10}
          totalCount={100}
        />
      );
    }
  }

  return (
    <DemoLayout>
      {sizes.map((size) => {
        return <Paginated size={size} key={size} />
      })}
    </DemoLayout>
  )
}