From 76f479540058ffcde3f741770b89baaa81bb54da Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 7 Dec 2019 13:29:19 +0800
Subject: [PATCH] add story for caption table for bootstrap4

---
 .../examples/bootstrap4/caption-table.js      | 49 +++++++++++++++++++
 .../stories/index.js                          |  2 +
 2 files changed, 51 insertions(+)
 create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js

diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js
new file mode 100644
index 0000000..1c23a3c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js
@@ -0,0 +1,49 @@
+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'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+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>;
+
+<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+
+<BootstrapTable bootstrap4 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>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index bb587b0..059e85c 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -18,6 +18,7 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4CaptionTable from 'examples/bootstrap4/caption-table';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
 import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
@@ -268,6 +269,7 @@ storiesOf('Basic Table', module)
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
+  .add('Table Caption bootstrap 4', () => <Bootstrap4CaptionTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
   .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
   .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)