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 63197a3..1bcb6e2 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js @@ -65,6 +65,7 @@ const options = { prePageTitle: 'Pre page', firstPageTitle: 'Next page', lastPageTitle: 'Last page', + showTotal: true, sizePerPageList: [{ text: '5', value: 5 }, { diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js index 931595f..8cfeb10 100644 --- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js +++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js @@ -1,4 +1,6 @@ /* eslint no-mixed-operators: 0 */ +import Const from './const'; + export default ExtendBase => class PageResolver extends ExtendBase { backToPrevPage() { @@ -27,6 +29,23 @@ export default ExtendBase => return pageStartIndex + totalPages - 1; } + calculateFromTo() { + const { + dataSize, + currPage, + currSizePerPage, + pageStartIndex + } = this.props; + const offset = Math.abs(Const.PAGE_START_INDEX - pageStartIndex); + + let from = ((currPage - pageStartIndex) * currSizePerPage); + from = dataSize === 0 ? 0 : from + 1; + let to = Math.min((currSizePerPage * (currPage + offset) - 1), dataSize); + if (to >= dataSize) to -= 1; + + return [from, to]; + } + calculatePages( totalPages = this.state.totalPages, lastPage = this.state.lastPage) { diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-total.js b/packages/react-bootstrap-table2-paginator/src/pagination-total.js new file mode 100644 index 0000000..a201223 --- /dev/null +++ b/packages/react-bootstrap-table2-paginator/src/pagination-total.js @@ -0,0 +1,16 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const PaginationTotal = props => ( + +  Showing rows { props.from } to { props.to + 1 } of { props.dataSize } + +); + +PaginationTotal.propTypes = { + from: PropTypes.number.isRequired, + to: PropTypes.number.isRequired, + dataSize: PropTypes.number.isRequired +}; + +export default PaginationTotal; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js index d103e4b..411dfad 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import pageResolver from './page-resolver'; import SizePerPageDropDown from './size-per-page-dropdown'; import PaginationList from './pagination-list'; +import PaginationTotal from './pagination-total'; import Const from './const'; class Pagination extends pageResolver(Component) { @@ -89,13 +90,14 @@ class Pagination extends pageResolver(Component) { render() { const { totalPages, lastPage, dropdownOpen: open } = this.state; const { + showTotal, sizePerPageList, currSizePerPage, hideSizePerPage, hidePageListOnlyOnePage } = this.props; const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage); - + const [from, to] = this.calculateFromTo(); const pageListClass = cs( 'react-bootstrap-table-pagination-list', 'col-md-6 col-xs-6 col-sm-6 col-lg-6', { @@ -117,6 +119,14 @@ class Pagination extends pageResolver(Component) { /> ) : null } + { + showTotal ? + : null + }
diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js index 5393a79..5595cea 100644 --- a/packages/react-bootstrap-table2-paginator/src/wrapper.js +++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js @@ -145,6 +145,7 @@ export default (Base, { alwaysShowAllBtns={ alwaysShowAllBtns } hideSizePerPage={ hideSizePerPage } hidePageListOnlyOnePage={ hidePageListOnlyOnePage } + showTotal={ options.showTotal } 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/page-resolver.test.js b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js index cb5d5cf..1eaf996 100644 --- a/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js +++ b/packages/react-bootstrap-table2-paginator/test/page-resolver.test.js @@ -110,6 +110,19 @@ describe('PageResolver', () => { }); }); + describe('calculateFromTo', () => { + const props = createMockProps(); + beforeEach(() => { + const mockElement = React.createElement(MockComponent, props, null); + wrapper = shallow(mockElement); + }); + + it('should return correct array with from and to value', () => { + const instance = wrapper.instance(); + expect(instance.calculateFromTo()).toEqual([1, props.currSizePerPage - 1]); + }); + }); + describe('calculateTotalPage', () => { const props = createMockProps(); diff --git a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js index acd6fee..5b50119 100644 --- a/packages/react-bootstrap-table2-paginator/test/wrapper.test.js +++ b/packages/react-bootstrap-table2-paginator/test/wrapper.test.js @@ -111,6 +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); }); describe('componentWillReceiveProps', () => { @@ -247,6 +248,20 @@ describe('Wrapper', () => { }); }); + describe('when options.showTotal is defined', () => { + const props = createTableProps({ options: { showTotal: true } }); + beforeEach(() => { + createPaginationWrapper(props); + }); + + it('should rendering Pagination correctly', () => { + const pagination = wrapper.find(Pagination); + expect(wrapper.length).toBe(1); + expect(pagination.length).toBe(1); + expect(pagination.prop('showTotal')).toBeTruthy(); + }); + }); + describe('when options.pageStartIndex is defined', () => { const pageStartIndex = -1; const props = createTableProps({ options: { pageStartIndex } });