From bd2ce5abf09180647ac3309e65e8225e3e233b1d Mon Sep 17 00:00:00 2001
From: Eduardo Reveles <me@osiux.ws>
Date: Thu, 6 Dec 2018 15:05:41 -0600
Subject: [PATCH 1/3] Add table footer

---
 .../examples/footer/column-align-table.js     | 52 ++++++++++++++
 .../examples/footer/column-format-table.js    | 67 +++++++++++++++++++
 .../examples/footer/footer-class-table.js     | 61 +++++++++++++++++
 .../examples/footer/function-footer.js        | 52 ++++++++++++++
 .../examples/footer/simple-footer.js          | 52 ++++++++++++++
 .../stories/index.js                          | 18 ++++-
 .../stories/stylesheet/columns/_index.scss    |  6 +-
 .../src/bootstrap-table.js                    | 58 +++++++++-------
 .../react-bootstrap-table2/src/footer-cell.js | 64 ++++++++++++++++++
 packages/react-bootstrap-table2/src/footer.js | 41 ++++++++++++
 .../test/footer.test.js                       | 61 +++++++++++++++++
 11 files changed, 505 insertions(+), 27 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/function-footer.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
 create mode 100644 packages/react-bootstrap-table2/src/footer-cell.js
 create mode 100644 packages/react-bootstrap-table2/src/footer.js
 create mode 100644 packages/react-bootstrap-table2/test/footer.test.js

diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
new file mode 100644
index 000000000..bb57fc6ae
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
@@ -0,0 +1,52 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerAlign: (column, colIndex) => 'right',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerAlign: (column, colIndex) => 'right',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
new file mode 100644
index 000000000..26fbbc08b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
@@ -0,0 +1,67 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+function priceFormatter(column, colIndex) {
+  return (
+    <h5>
+      <strong>$$ {column.text} $$</strong>
+    </h5>
+  );
+}
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerFormatter: priceFormatter
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+function priceFormatter(column, colIndex) {
+  return (
+    <h5><strong>$$ { column.text } $$</strong></h5>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerFormatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js b/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
new file mode 100644
index 000000000..3f3cd62f7
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID',
+      footer: 'Footer 1'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      footer: 'Footer 2'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      footer: 'Footer 3'
+    }
+  ];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  footerClasses="footer-class"
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } footerClasses="footer-class" />
+    <Code>{sourceCode}</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/function-footer.js b/packages/react-bootstrap-table2-example/examples/footer/function-footer.js
new file mode 100644
index 000000000..f30fe974b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/function-footer.js
@@ -0,0 +1,52 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+    dataField: 'price',
+    text: 'Product Price',
+    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+  }];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js b/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
new file mode 100644
index 000000000..b15e862d5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
@@ -0,0 +1,52 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 046154938..c2b6186b1 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -45,6 +45,13 @@ import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
 import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
 import HeaderClassTable from 'examples/header-columns/header-class-table';
 
+// footer
+import SimpleFooter from 'examples/footer/simple-footer';
+import FunctionFooter from 'examples/footer/function-footer';
+import FooterClassTable from 'examples/footer/footer-class-table';
+import FooterColumnFormatTable from 'examples/footer/column-format-table';
+import FooterColumnAlignTable from 'examples/footer/column-align-table';
+
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
 import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
@@ -199,8 +206,7 @@ import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
 
-storiesOf('Welcome', module)
-  .add('react bootstrap table 2 ', () => <Welcome />);
+storiesOf('Welcome', module).add('react bootstrap table 2 ', () => <Welcome />);
 
 storiesOf('Basic Table', module)
   .addDecorator(bootstrapStyle())
@@ -286,6 +292,14 @@ storiesOf('Work on Rows', module)
   .add('Hide Rows', () => <RowHiddenTable />)
   .add('Row Event', () => <RowEventTable />);
 
+storiesOf('Footer', module)
+  .addDecorator(bootstrapStyle())
+  .add('Simple Footer', () => <SimpleFooter />)
+  .add('Function Footer', () => <FunctionFooter />)
+  .add('Footer Class', () => <FooterClassTable />)
+  .add('Column Formatter', () => <FooterColumnFormatTable />)
+  .add('Column Align', () => <FooterColumnAlignTable />);
+
 storiesOf('Sort Table', module)
   .addDecorator(bootstrapStyle())
   .add('Enable Sort', () => <EnableSortTable />)
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
index a0ec3d187..e2700ac33 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
@@ -11,6 +11,10 @@
   background-color: $green-lighten-4;
 }
 
-.header-class {
+thead .header-class {
+  background-color: $green-lighten-4;
+}
+
+tfoot .footer-class {
   background-color: $green-lighten-4;
 }
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 7c3a72704..c79fdc1cd 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -7,8 +7,10 @@ import cs from 'classnames';
 import Header from './header';
 import Caption from './caption';
 import Body from './body';
+import Footer from './footer';
 import PropsBaseResolver from './props-resolver';
 import Const from './const';
+import _ from './utils';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
   constructor(props) {
@@ -25,11 +27,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     const { loading, overlay } = this.props;
     if (overlay) {
       const LoadingOverlay = overlay(loading);
-      return (
-        <LoadingOverlay>
-          { this.renderTable() }
-        </LoadingOverlay>
-      );
+      return <LoadingOverlay>{this.renderTable()}</LoadingOverlay>;
     }
     return this.renderTable();
   }
@@ -59,19 +57,25 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
 
-    const tableClass = cs('table', {
-      'table-striped': striped,
-      'table-hover': hover,
-      'table-bordered': bordered,
-      [(bootstrap4 ? 'table-sm' : 'table-condensed')]: condensed
-    }, classes);
+    const tableClass = cs(
+      'table',
+      {
+        'table-striped': striped,
+        'table-hover': hover,
+        'table-bordered': bordered,
+        [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
+      },
+      classes
+    );
+
+    const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
 
-    const tableCaption = (caption && <Caption>{ caption }</Caption>);
+    const tableCaption = caption && <Caption>{caption}</Caption>;
 
     return (
       <div className={ tableWrapperClass }>
         <table id={ id } className={ tableClass }>
-          { tableCaption }
+          {tableCaption}
           <Header
             columns={ columns }
             className={ this.props.headerClasses }
@@ -98,6 +102,9 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             rowClasses={ rowClasses }
             rowEvents={ rowEvents }
           />
+          {hasFooter && (
+            <Footer data={ data } columns={ columns } className={ this.props.footerClasses } />
+          )}
         </table>
       </div>
     );
@@ -109,9 +116,12 @@ BootstrapTable.propTypes = {
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
   bootstrap4: PropTypes.bool,
-  remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    pagination: PropTypes.bool
-  })]),
+  remote: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      pagination: PropTypes.bool
+    })
+  ]),
   noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
@@ -121,10 +131,7 @@ BootstrapTable.propTypes = {
   classes: PropTypes.string,
   wrapperClasses: PropTypes.string,
   condensed: PropTypes.bool,
-  caption: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.string
-  ]),
+  caption: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   pagination: PropTypes.object,
   filter: PropTypes.object,
   cellEdit: PropTypes.object,
@@ -168,10 +175,13 @@ BootstrapTable.propTypes = {
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   headerClasses: PropTypes.string,
-  defaultSorted: PropTypes.arrayOf(PropTypes.shape({
-    dataField: PropTypes.string.isRequired,
-    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
-  })),
+  footerClasses: PropTypes.string,
+  defaultSorted: PropTypes.arrayOf(
+    PropTypes.shape({
+      dataField: PropTypes.string.isRequired,
+      order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
+    })
+  ),
   defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
   overlay: PropTypes.func,
   onTableChange: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/footer-cell.js b/packages/react-bootstrap-table2/src/footer-cell.js
new file mode 100644
index 000000000..2995f4aa7
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/footer-cell.js
@@ -0,0 +1,64 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+import _ from './utils';
+
+const FooterCell = (props) => {
+  const { index, column, columnData } = props;
+
+  const {
+    footer,
+    footerTitle,
+    footerAlign,
+    footerFormatter,
+    footerEvents,
+    footerClasses,
+    footerStyle,
+    footerAttrs
+  } = column;
+
+  const cellAttrs = {
+    ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
+    ...footerEvents
+  };
+
+  let text = '';
+  if (_.isString(footer)) {
+    text = footer;
+  } else if (_.isFunction(footer)) {
+    text = footer(columnData, column, index);
+  }
+
+  let cellStyle = {};
+  const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
+
+  if (footerStyle) {
+    cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
+    cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
+  }
+
+  if (footerTitle) {
+    cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
+  }
+
+  if (footerAlign) {
+    cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
+  }
+
+  if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
+  if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+
+  const children = footerFormatter ? footerFormatter(column, index) : text;
+
+  return React.createElement('th', cellAttrs, children);
+};
+
+FooterCell.propTypes = {
+  columnData: PropTypes.array,
+  index: PropTypes.number,
+  column: PropTypes.object
+};
+
+export default FooterCell;
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
new file mode 100644
index 000000000..38b2bded6
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -0,0 +1,41 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FooterCell from './footer-cell';
+import _ from './utils';
+
+const Footer = (props) => {
+  const { data, className, columns } = props;
+
+  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 }
+            />
+          );
+        })}
+      </tr>
+    </tfoot>
+  );
+};
+
+Footer.propTypes = {
+  data: PropTypes.array,
+  className: PropTypes.string,
+  columns: PropTypes.array
+};
+
+export default Footer;
diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js
new file mode 100644
index 000000000..9f1024b01
--- /dev/null
+++ b/packages/react-bootstrap-table2/test/footer.test.js
@@ -0,0 +1,61 @@
+/* eslint no-unused-vars: 0 */
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import Footer from '../src/footer';
+import FooterCell from '../src/footer-cell';
+
+describe('Footer', () => {
+  let wrapper;
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'ID',
+      footer: 'Footer 1'
+    },
+    {
+      dataField: 'name',
+      text: 'Name',
+      footer: (columnData, column) => 'Footer 2'
+    }
+  ];
+
+  const data = [
+    {
+      id: 1,
+      name: 'A'
+    },
+    {
+      id: 2,
+      name: 'B'
+    }
+  ];
+
+  const keyField = 'id';
+
+  describe('simplest header', () => {
+    beforeEach(() => {
+      wrapper = shallow(<Footer data={ data } columns={ columns } />);
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('tr').length).toBe(1);
+      expect(wrapper.find(FooterCell).length).toBe(columns.length);
+    });
+  });
+
+  describe('className prop is exists', () => {
+    const className = 'test-class';
+
+    beforeEach(() => {
+      wrapper = shallow(<Footer data={ data } columns={ columns } className={ className } />);
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find(`.${className}`).length).toBe(1);
+    });
+  });
+});

From 78d5164056b0e1d6da23e75a7ef18f1ca873f7a8 Mon Sep 17 00:00:00 2001
From: Eduardo Reveles <me@osiux.ws>
Date: Wed, 12 Dec 2018 20:14:37 -0600
Subject: [PATCH 2/3] add more examples to storybook

---
 .../examples/footer/column-align-table.js     |  3 +-
 .../examples/footer/column-attrs-table.js     | 54 +++++++++++++
 .../examples/footer/column-class-table.js     | 60 +++++++++++++++
 .../examples/footer/column-event-table.js     | 56 ++++++++++++++
 .../examples/footer/column-style-table.js     | 76 +++++++++++++++++++
 .../examples/footer/column-title-table.js     | 53 +++++++++++++
 .../stories/index.js                          | 14 +++-
 .../stories/stylesheet/columns/_index.scss    |  4 +-
 .../src/bootstrap-table.js                    | 50 ++++++------
 9 files changed, 339 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-title-table.js

diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
index bb57fc6ae..df77d04fc 100644
--- a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
@@ -38,7 +38,8 @@ const columns = [{
   footer: 'Footer 2'
 }, {
   dataField: 'price',
-  text: 'Product Price'
+  text: 'Product Price',
+  footer: 'Footer 3'
 }];
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js
new file mode 100644
index 000000000..ca02cfe44
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js
@@ -0,0 +1,54 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1',
+  footerAttrs: { title: 'ID footer column' }
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1',
+    footerAttrs: { title: 'ID footer column' }
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
new file mode 100644
index 000000000..60bc9e64c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
@@ -0,0 +1,60 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerClasses: 'demo-row-odd'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerClasses: (column, colIndex) => {
+    if (colIndex % 2 === 0) return 'demo-row-even';
+    return 'demo-row-odd';
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerClasses: 'demo-row-odd'
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerClasses: (column, colIndex) => {
+      if (colIndex % 2 === 0) return 'demo-row-even';
+      return 'demo-row-odd';
+    }
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
new file mode 100644
index 000000000..6837eee0f
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerEvents: {
+    onClick: () => alert('Click on Product ID footer column')
+  },
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footerEvents: {
+      onClick: () => alert('Click on Product ID footer column')
+    },
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
new file mode 100644
index 000000000..52939f16c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
@@ -0,0 +1,76 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerStyle: {
+    backgroundColor: '#c8e6c9'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerStyle: (column, colIndex) => {
+    if (colIndex % 2 === 0) {
+      return {
+        backgroundColor: '#81c784'
+      };
+    }
+    return {
+      backgroundColor: '#c8e6c9'
+    };
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerStyle: {
+      backgroundColor: '#c8e6c9'
+    }
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerStyle: (column, colIndex) => {
+      if (colIndex % 2 === 0) {
+        return {
+          backgroundColor: '#81c784'
+        };
+      }
+      return {
+        backgroundColor: '#c8e6c9'
+      };
+    }
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js
new file mode 100644
index 000000000..f6efed948
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js
@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerTitle: true,
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerTitle: (column, colIndex) => `this is custom title for ${column.text}`,
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerTitle: true,
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`,
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index c2b6186b1..855287d75 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -51,6 +51,11 @@ import FunctionFooter from 'examples/footer/function-footer';
 import FooterClassTable from 'examples/footer/footer-class-table';
 import FooterColumnFormatTable from 'examples/footer/column-format-table';
 import FooterColumnAlignTable from 'examples/footer/column-align-table';
+import FooterColumnTitleTable from 'examples/footer/column-title-table.js';
+import FooterColumnEventsTable from 'examples/footer/column-event-table.js';
+import FooterColumnClassTable from 'examples/footer/column-class-table.js';
+import FooterColumnStyleTable from 'examples/footer/column-style-table.js';
+import FooterColumnAttrsTable from 'examples/footer/column-attrs-table.js';
 
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
@@ -296,9 +301,14 @@ storiesOf('Footer', module)
   .addDecorator(bootstrapStyle())
   .add('Simple Footer', () => <SimpleFooter />)
   .add('Function Footer', () => <FunctionFooter />)
-  .add('Footer Class', () => <FooterClassTable />)
   .add('Column Formatter', () => <FooterColumnFormatTable />)
-  .add('Column Align', () => <FooterColumnAlignTable />);
+  .add('Column Align', () => <FooterColumnAlignTable />)
+  .add('Column Title', () => <FooterColumnTitleTable />)
+  .add('Column Events', () => <FooterColumnEventsTable />)
+  .add('Customize Column Class', () => <FooterColumnClassTable />)
+  .add('Customize Column Style', () => <FooterColumnStyleTable />)
+  .add('Customize Column HTML attribute', () => <FooterColumnAttrsTable />)
+  .add('Footer Class', () => <FooterClassTable />);
 
 storiesOf('Sort Table', module)
   .addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
index e2700ac33..c91518d67 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
@@ -11,10 +11,10 @@
   background-color: $green-lighten-4;
 }
 
-thead .header-class {
+.header-class {
   background-color: $green-lighten-4;
 }
 
-tfoot .footer-class {
+.footer-class {
   background-color: $green-lighten-4;
 }
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index c79fdc1cd..343fda5c8 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -27,7 +27,11 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     const { loading, overlay } = this.props;
     if (overlay) {
       const LoadingOverlay = overlay(loading);
-      return <LoadingOverlay>{this.renderTable()}</LoadingOverlay>;
+      return (
+        <LoadingOverlay>
+          { this.renderTable() }
+        </LoadingOverlay>
+      );
     }
     return this.renderTable();
   }
@@ -57,25 +61,21 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
 
-    const tableClass = cs(
-      'table',
-      {
-        'table-striped': striped,
-        'table-hover': hover,
-        'table-bordered': bordered,
-        [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
-      },
-      classes
-    );
+    const tableClass = cs('table', {
+      'table-striped': striped,
+      'table-hover': hover,
+      'table-bordered': bordered,
+      [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
+    }, classes);
 
     const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
 
-    const tableCaption = caption && <Caption>{caption}</Caption>;
+    const tableCaption = (caption && <Caption>{ caption }</Caption>);
 
     return (
       <div className={ tableWrapperClass }>
         <table id={ id } className={ tableClass }>
-          {tableCaption}
+          { tableCaption }
           <Header
             columns={ columns }
             className={ this.props.headerClasses }
@@ -116,12 +116,9 @@ BootstrapTable.propTypes = {
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
   bootstrap4: PropTypes.bool,
-  remote: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.shape({
-      pagination: PropTypes.bool
-    })
-  ]),
+  remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    pagination: PropTypes.bool
+  })]),
   noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
@@ -131,7 +128,10 @@ BootstrapTable.propTypes = {
   classes: PropTypes.string,
   wrapperClasses: PropTypes.string,
   condensed: PropTypes.bool,
-  caption: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  caption: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string
+  ]),
   pagination: PropTypes.object,
   filter: PropTypes.object,
   cellEdit: PropTypes.object,
@@ -176,12 +176,10 @@ BootstrapTable.propTypes = {
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   headerClasses: PropTypes.string,
   footerClasses: PropTypes.string,
-  defaultSorted: PropTypes.arrayOf(
-    PropTypes.shape({
-      dataField: PropTypes.string.isRequired,
-      order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
-    })
-  ),
+  defaultSorted: PropTypes.arrayOf(PropTypes.shape({
+    dataField: PropTypes.string.isRequired,
+    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
+  })),
   defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
   overlay: PropTypes.func,
   onTableChange: PropTypes.func,

From 58cfdacfd1d99a7a2529351d6bdd39a804a33386 Mon Sep 17 00:00:00 2001
From: Eduardo Reveles <me@osiux.ws>
Date: Wed, 16 Jan 2019 00:11:27 -0600
Subject: [PATCH 3/3] fix error

---
 packages/react-bootstrap-table2/src/bootstrap-table.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 343fda5c8..37ced35bf 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -103,7 +103,11 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             rowEvents={ rowEvents }
           />
           {hasFooter && (
-            <Footer data={ data } columns={ columns } className={ this.props.footerClasses } />
+            <Footer
+              data={ this.getData() }
+              columns={ columns }
+              className={ this.props.footerClasses }
+            />
           )}
         </table>
       </div>