diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-with-expansion.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-with-expansion.js
new file mode 100644
index 0000000..e1cd4a3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-with-expansion.js
@@ -0,0 +1,84 @@
+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 selectRow = {
+ mode: 'checkbox'
+};
+
+const expandRow = {
+ showExpandColumn: true,
+ renderer: row => (
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+ )
+};
+
+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 selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+const expandRow = {
+ showExpandColumn: true,
+ renderer: row => (
+
+
{ \`This Expand row is belong to rowKey $\{row.id}\` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+ )
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 2941f37..7e0aca7 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -115,6 +115,7 @@ import ClickToSelectTable from 'examples/row-selection/click-to-select';
import DefaultSelectTable from 'examples/row-selection/default-select';
import SelectionManagement from 'examples/row-selection/selection-management';
import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
+import SelectionWithExpansionTable from 'examples/row-selection/selection-with-expansion';
import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
@@ -303,6 +304,7 @@ storiesOf('Row Selection', module)
.add('Default Select', () => )
.add('Selection Management', () => )
.add('Click to Select and Edit Cell', () => )
+ .add('Row Select and Expand', () => )
.add('Selection without Data', () => )
.add('Selection Style', () => )
.add('Selection Class', () => )