diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js new file mode 100644 index 0000000..d726c89 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js @@ -0,0 +1,107 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(87); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const options = { + custom: true, + totalSize: products.length +}; + + + { + ({ + paginationProps, + paginationTableProps + }) => ( +
+ + + +
+ ) + } +
+`; + +const options = { + custom: true, + totalSize: products.length +}; + +export default class StandalonePaginationList extends React.Component { + render() { + return ( +
+ + { + ({ + paginationProps, + paginationTableProps + }) => ( +
+ + + +
+ ) + } +
+ { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index e26f29d..4265375 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -169,6 +169,7 @@ import CustomSizePerPageTable from 'examples/pagination/custom-size-per-page'; import CustomPageListTable from 'examples/pagination/custom-page-list'; import StandalonePaginationList from 'examples/pagination/standalone-pagination-list'; import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page'; +import StandalonePaginationTotal from 'examples/pagination/standalone-pagination-total'; import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination'; import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination'; import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter'; @@ -408,6 +409,7 @@ storiesOf('Pagination', module) .add('Custom SizePerPage', () => ) .add('Standalone Pagination List', () => ) .add('Standalone SizePerPage Dropdown', () => ) + .add('Standalone Pagination Total', () => ) .add('Fully Custom Pagination', () => ) .add('Remote Fully Custom Pagination', () => ) .add('Custom Pagination with Filter', () => )