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 (
+
{ + if (!props.children) return null; + return ( +
+ ); +}; + +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 = {
{ caption } { props.children }