fix #788 (#797)

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -106,6 +106,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             <Footer
               data={ this.getData() }
               columns={ columns }
+              selectRow={ selectRow }
+              expandRow={ expandRow }
               className={ this.props.footerClasses }
             />
           )}

packages/react-bootstrap-table2/src/footer.js

@@ -2,31 +2,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Const from './const';
 import FooterCell from './footer-cell';
 import _ from './utils';
 
 const Footer = (props) => {
-  const { data, className, columns } = props;
+  const { data, className, columns, selectRow, expandRow } = props;
+  const SelectionFooterCellComp = () => <th />;
+  const ExpansionFooterCellComp = () => <th />;
+
+  const isRenderExpandColumnInLeft = (
+    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+
+  const childrens = columns.map((column, i) => {
+    if (column.footer === undefined || column.footer === null || column.hidden) {
+      return false;
+    }
+
+    const columnData = _.pluck(data, column.dataField);
+
+    return (
+      <FooterCell
+        index={ i }
+        key={ column.dataField }
+        column={ column }
+        columnData={ columnData }
+      />
+    );
+  });
+
+  if (selectRow && selectRow.hideSelectColumn !== true) {
+    childrens.unshift(<SelectionFooterCellComp key="selection" />);
+  }
+
+  if (expandRow.showExpandColumn) {
+    if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+      childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
+    } else {
+      childrens.push(<ExpansionFooterCellComp key="expansion" />);
+    }
+  }
 
   return (
     <tfoot>
       <tr className={ className }>
-        {columns.map((column, i) => {
-          if (column.footer === undefined || column.footer === null || column.hidden) {
-            return false;
-          }
-
-          const columnData = _.pluck(data, column.dataField);
-
-          return (
-            <FooterCell
-              index={ i }
-              key={ column.dataField }
-              column={ column }
-              columnData={ columnData }
-            />
-          );
-        })}
+        { childrens }
       </tr>
     </tfoot>
   );
@@ -35,7 +56,9 @@ const Footer = (props) => {
 Footer.propTypes = {
   data: PropTypes.array,
   className: PropTypes.string,
-  columns: PropTypes.array
+  columns: PropTypes.array,
+  selectRow: PropTypes.object,
+  expandRow: PropTypes.object
 };
 
 export default Footer;

packages/react-bootstrap-table2/test/footer.test.js

@@ -1,8 +1,9 @@
 /* eslint no-unused-vars: 0 */
 import 'jsdom-global/register';
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow, render } from 'enzyme';
 
+import Const from '../src/const';
 import Footer from '../src/footer';
 import FooterCell from '../src/footer-cell';
 
@@ -32,11 +33,29 @@ describe('Footer', () => {
     }
   ];
 
+  const selectRow = {
+    mode: Const.ROW_SELECT_DISABLED,
+    selected: [],
+    hideSelectColumn: true
+  };
+  const expandRow = {
+    renderer: undefined,
+    expanded: [],
+    nonExpandable: []
+  };
+
   const keyField = 'id';
 
   describe('simplest footer', () => {
     beforeEach(() => {
-      wrapper = shallow(<Footer data={ data } columns={ columns } />);
+      wrapper = shallow(
+        <Footer
+          data={ data }
+          columns={ columns }
+          selectRow={ selectRow }
+          expandRow={ expandRow }
+        />
+      );
     });
 
     it('should render successfully', () => {
@@ -50,7 +69,15 @@ describe('Footer', () => {
     const className = 'test-class';
 
     beforeEach(() => {
-      wrapper = shallow(<Footer data={ data } columns={ columns } className={ className } />);
+      wrapper = shallow(
+        <Footer
+          data={ data }
+          columns={ columns }
+          className={ className }
+          selectRow={ selectRow }
+          expandRow={ expandRow }
+        />
+      );
     });
 
     it('should render successfully', () => {
@@ -58,4 +85,40 @@ describe('Footer', () => {
       expect(wrapper.find(`.${className}`).length).toBe(1);
     });
   });
+
+  describe('when selecrRow prop is enable', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <Footer
+          data={ data }
+          columns={ columns }
+          selectRow={ { ...selectRow, mode: 'radio', hideSelectColumn: false } }
+          expandRow={ expandRow }
+        />
+      );
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('th').length).toBe(columns.length + 1);
+    });
+  });
+
+  describe('when expandRow prop is enable', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <Footer
+          data={ data }
+          columns={ columns }
+          selectRow={ selectRow }
+          expandRow={ { expandRow, showExpandColumn: true } }
+        />
+      );
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('th').length).toBe(columns.length + 1);
+    });
+  });
 });