Merge pull request #323 from react-bootstrap-table/feat/pagination-total

Implement pagination total

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
   }, {

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) {

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 => (
+  <span>
+    &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
+  </span>
+);
+
+PaginationTotal.propTypes = {
+  from: PropTypes.number.isRequired,
+  to: PropTypes.number.isRequired,
+  dataSize: PropTypes.number.isRequired
+};
+
+export default PaginationTotal;

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 ?
+              <PaginationTotal
+                from={ from }
+                to={ to }
+                dataSize={ this.props.dataSize }
+              /> : null
+          }
         </div>
         <div className={ pageListClass }>
           <PaginationList pages={ pages } onPageChange={ this.handleChangePage } />

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 }

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();
 

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 } });