import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 750, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 750, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 250, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 400, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 300, currentPage: 1, pageSize: 50 } render() { const {total, currentPage, pageSize} = this.state; return ( this.setState({currentPage})} onPageSizeChange={pageSize => this.setState({pageSize})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));