diff --git a/packages/react-bootstrap-table2-example/examples/basic/table-with-caption.js b/packages/react-bootstrap-table2-example/examples/basic/table-with-caption.js
new file mode 100644
index 0000000..fc20418
--- /dev/null
+++ b/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 = () =>
Component as Header
;
+
+
+
+} columns={ columns } />
+`;
+
+const Caption = () => Component as Header
;
+
+export default () => (
+
+
+ } columns={ columns } />
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 26f7136..0b76845 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/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', () => )
.add('striped, hover, condensed table', () => )
.add('borderless table', () => )
- .add('Indication For Empty Table', () => );
+ .add('Indication For Empty Table', () => )
+ .add('Table with caption', () => );
storiesOf('Work on Columns', module)
.add('Display Nested Data', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index f93a30a..f4aaf8b 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/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 (
+ { caption }
{
+ if (!props.children) return null;
+ return (
+ { props.children }
+ );
+};
+
+Caption.propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.string
+ ])
+};
+
+export default Caption;
diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
index a475549..71cf0e4 100644
--- a/packages/react-bootstrap-table2/test/bootstrap-table.test.js
+++ b/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(test} 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 = {