refine #78

* refine #78

* patch docs for caption prop

Author: AllenFang

docs/README.md

@@ -8,6 +8,7 @@
 * [columns (**required**)](#columns)
 
 #### Optional
+* [caption](#caption)
 * [striped](#striped)
 * [bordered](#bordered)
 * [hover](#hover)
@@ -23,6 +24,9 @@ Assign your table data via `data` prop. It only accept an Array object.
 ### <a name='columns'>columns(**required**) - [Object]</a>
 `columns` props accept an Array object, please see [columns definition](./columns.md) for more detail.
 
+### <a name='caption'>caption - [String | Node]</a>
+Same as [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp) in HTML. You can give a String or a React JSX.
+
 ### <a name='striped'>striped - [Bool]</a>
 Same as `.table-striped` class for adding zebra-stripes to a table
 ### <a name='bordered'>bordered - [Bool]</a>

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
+import Caption from '../src/caption';
 import Header from '../src/header';
 import Body from '../src/body';
 import BootstrapTable from '../src/bootstrap-table';
@@ -91,10 +92,19 @@ 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 } />);
+      wrapper = shallow(
+        <BootstrapTable
+          caption={ <span className="table-caption">test</span> }
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          bordered={ false }
+        />
+      );
     });
 
-    it('should render caption', () => {
+    it('should render caption correctly', () => {
+      expect(wrapper.find(Caption).length).toBe(1);
       expect(wrapper.find('.table-caption').length).toBe(1);
     });
   });