diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js index 1bcb6e2..4ea5164 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js @@ -24,6 +24,12 @@ import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; // ... +const customTotal = (from, to, size) => ( + + Showing { from } to { to } of { size } Results + +); + const options = { paginationSize: 4, pageStartIndex: 0, @@ -39,6 +45,8 @@ const options = { prePageTitle: 'Pre page', firstPageTitle: 'Next page', lastPageTitle: 'Last page', + showTotal: true, + paginationTotalRenderer: customTotal, sizePerPageList: [{ text: '5', value: 5 }, { @@ -50,11 +58,18 @@ const options = { `; + +const customTotal = (from, to, size) => ( + + Showing { from } to { to } of { size } Results + +); + const options = { paginationSize: 4, pageStartIndex: 0, - // alwaysShowAllBtns: true // Always show next and previous button - // withFirstAndLast: false // Hide the going to First and Last page button + // alwaysShowAllBtns: true, // Always show next and previous button + // withFirstAndLast: false, // Hide the going to First and Last page button // hideSizePerPage: true, // Hide the sizePerPage dropdown always // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page firstPageText: 'First', @@ -66,6 +81,7 @@ const options = { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, + paginationTotalRenderer: customTotal, sizePerPageList: [{ text: '5', value: 5 }, { diff --git a/packages/react-bootstrap-table2-paginator/src/const.js b/packages/react-bootstrap-table2-paginator/src/const.js index eaa1bac..dc12066 100644 --- a/packages/react-bootstrap-table2-paginator/src/const.js +++ b/packages/react-bootstrap-table2-paginator/src/const.js @@ -3,6 +3,8 @@ export default { PAGE_START_INDEX: 1, With_FIRST_AND_LAST: true, SHOW_ALL_PAGE_BTNS: false, + SHOW_TOTAL: false, + PAGINATION_TOTAL: null, FIRST_PAGE_TEXT: '<<', PRE_PAGE_TEXT: '<', NEXT_PAGE_TEXT: '>', diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-total.js b/packages/react-bootstrap-table2-paginator/src/pagination-total.js index a201223..cb2fb38 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-total.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-total.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; const PaginationTotal = props => ( - +  Showing rows { props.from } to { props.to + 1 } of { props.dataSize } ); diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index 411dfad..cf29eb9 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -87,10 +87,28 @@ class Pagination extends pageResolver(Component) { } } + defaultTotal = (from, to, size) => ( + + ); + + setTotal = (from, to, size, total) => { + if (total && (typeof total === 'function')) { + return total(from, to, size); + } + + return this.defaultTotal(from, to, size); + }; + render() { const { totalPages, lastPage, dropdownOpen: open } = this.state; const { showTotal, + dataSize, + paginationTotalRenderer, sizePerPageList, currSizePerPage, hideSizePerPage, @@ -121,11 +139,12 @@ class Pagination extends pageResolver(Component) { } { showTotal ? - : null + this.setTotal( + from, + to, + dataSize, + paginationTotalRenderer + ) : null }
@@ -145,6 +164,8 @@ Pagination.propTypes = { onSizePerPageChange: PropTypes.func.isRequired, pageStartIndex: PropTypes.number, paginationSize: PropTypes.number, + showTotal: PropTypes.bool, + paginationTotalRenderer: PropTypes.func, firstPageText: PropTypes.string, prePageText: PropTypes.string, nextPageText: PropTypes.string, @@ -164,6 +185,8 @@ Pagination.defaultProps = { paginationSize: Const.PAGINATION_SIZE, withFirstAndLast: Const.With_FIRST_AND_LAST, alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS, + showTotal: Const.SHOW_TOTAL, + paginationTotalRenderer: Const.PAGINATION_TOTAL, firstPageText: Const.FIRST_PAGE_TEXT, prePageText: Const.PRE_PAGE_TEXT, nextPageText: Const.NEXT_PAGE_TEXT, diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index 5595cea..b220b58 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js @@ -146,6 +146,7 @@ export default (Base, { hideSizePerPage={ hideSizePerPage } hidePageListOnlyOnePage={ hidePageListOnlyOnePage } showTotal={ options.showTotal } + paginationTotalRenderer={ options.paginationTotalRenderer } firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT } prePageText={ options.prePageText || Const.PRE_PAGE_TEXT } nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT } diff --git a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js index 5b50119..b578ec1 100644 --- a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js +++ b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js @@ -15,7 +15,7 @@ const data = []; for (let i = 0; i < 100; i += 1) { data.push({ id: i, - name: `itme name ${i}` + name: `item name ${i}` }); } @@ -67,29 +67,29 @@ describe('Wrapper', () => { createPaginationWrapper(props); }); - it('should rendering correctly', () => { + it('should render correctly', () => { expect(wrapper.length).toBe(1); }); - it('should initializing state correctly', () => { + it('should initialize state correctly', () => { expect(instance.state.currPage).toBeDefined(); expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX); expect(instance.state.currSizePerPage).toBeDefined(); expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); }); - it('should saving page and sizePerPage to store correctly', () => { + it('should save page and sizePerPage to the store correctly', () => { expect(props.store.page).toBe(instance.state.currPage); expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage); }); - it('should rendering BootstraTable correctly', () => { + it('should render BootstrapTable correctly', () => { const table = wrapper.find(BootstrapTable); expect(table.length).toBe(1); expect(table.prop('data').length).toEqual(instance.state.currSizePerPage); }); - it('should rendering Pagination correctly', () => { + it('should render Pagination correctly', () => { const pagination = wrapper.find(Pagination); expect(pagination.length).toBe(1); expect(pagination.prop('dataSize')).toEqual(props.store.data.length); @@ -111,7 +111,7 @@ describe('Wrapper', () => { expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE); expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE); expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE); - expect(pagination.prop('showTotal')).toEqual(undefined); + expect(pagination.prop('showTotal')).toBeFalsy(); }); describe('componentWillReceiveProps', () => { @@ -254,7 +254,7 @@ describe('Wrapper', () => { createPaginationWrapper(props); }); - it('should rendering Pagination correctly', () => { + it('should render Pagination correctly', () => { const pagination = wrapper.find(Pagination); expect(wrapper.length).toBe(1); expect(pagination.length).toBe(1);