fix #77

* Implement basic usage of table <caption> element

Add tableCaption prop, which can be a component / string

Add simple test and an example to Storybook

* Fix Caption example & Code syle fix for return statement

* Rename tableCaption > caption

packages/react-bootstrap-table2-example/examples/basic/table-with-caption.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+
+<BootstrapTableful keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+
+<BootstrapTableful keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
+`;
+
+const Caption = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+
+export default () => (
+  <div>
+    <BootstrapTableful keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+    <BootstrapTableful keyField="id" data={ products } caption={<Caption />} columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
 import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
 import NoDataTable from 'examples/basic/no-data-table';
+import TableWithCaption from 'examples/basic/table-with-caption';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -61,7 +62,8 @@ storiesOf('Basic Table', module)
   .add('basic table', () => <BasicTable />)
   .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
   .add('borderless table', () => <BorderlessTable />)
-  .add('Indication For Empty Table', () => <NoDataTable />);
+  .add('Indication For Empty Table', () => <NoDataTable />)
+  .add('Table with caption', () => <TableWithCaption />);
 
 storiesOf('Work on Columns', module)
   .add('Display Nested Data', () => <NestedDataTable />)

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import cs from 'classnames';
 
 import Header from './header';
+import Caption from './caption';
 import Body from './body';
 import Store from './store/base';
 import PropsBaseResolver from './props-resolver';
@@ -38,7 +39,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       hover,
       bordered,
       condensed,
-      noDataIndication
+      noDataIndication,
+      caption
     } = this.props;
 
     const tableClass = cs('table', {
@@ -57,6 +59,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     return (
       <div className="react-bootstrap-table-container">
         <table className={ tableClass }>
+          <Caption>{ caption }</Caption>
           <Header
             columns={ columns }
             sortField={ this.store.sortField }
@@ -131,6 +134,10 @@ BootstrapTable.propTypes = {
   bordered: PropTypes.bool,
   hover: PropTypes.bool,
   condensed: PropTypes.bool,
+  caption: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string
+  ]),
   cellEdit: PropTypes.shape({
     mode: PropTypes.oneOf([Const.CLICK_TO_CELL_EDIT, Const.DBCLICK_TO_CELL_EDIT]).isRequired,
     onEditing: PropTypes.func.isRequired,

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

@@ -0,0 +1,19 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Caption = (props) => {
+  if (!props.children) return null;
+  return (
+    <caption>{ props.children }</caption>
+  );
+};
+
+Caption.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string
+  ])
+};
+
+export default Caption;

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

@@ -89,6 +89,16 @@ describe('BootstrapTable', () => {
     });
   });
 
+  describe('when table should have a caption', () => {
+    beforeEach(() => {
+      wrapper = shallow(<BootstrapTable caption={<span className="table-caption">test</span>} keyField="id" columns={ columns } data={ data } bordered={ false } />);
+    });
+
+    it('should render caption', () => {
+      expect(wrapper.find('.table-caption').length).toBe(1);
+    });
+  });
+
   describe('when cellEdit props is defined', () => {
     const nonEditableRows = [data[1].id];
     const cellEdit = {