add more examples to storybook

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 } />

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

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

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

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

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

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

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

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,