diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js
new file mode 100644
index 0000000..c6e977d
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow1 = {
+ className: 'expanding-foo',
+ 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 expandRow2 = {
+ className: (isExpanded, row, rowIndex) => {
+ if (rowIndex > 2) return 'expanding-foo';
+ return 'expanding-bar';
+ },
+ 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 sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+ className: 'expanding-foo',
+ renderer: row => (
+ .....
+ )
+};
+
+
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+ className: (isExpanded, row, rowIndex) => {
+ if (rowIndex > 2) return 'expanding-foo';
+ return 'expanding-bar';
+ },
+ renderer: row => (
+ ...
+ )
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode1 }
+
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index e9012a5..283278c 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -167,6 +167,7 @@ import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
import ExpandHooks from 'examples/row-expand/expand-hooks';
import ParentRowClassName from 'examples/row-expand/parent-row-classname';
+import ExpandingRowClassName from 'examples/row-expand/expanding-row-classname';
// pagination
import PaginationTable from 'examples/pagination';
@@ -420,7 +421,8 @@ storiesOf('Row Expand', module)
.add('Custom Expand Indicator', () => )
.add('Expand Column Position', () => )
.add('Expand Hooks', () => )
- .add('Custom Parent Row ClassName', () => );
+ .add('Custom Parent Row ClassName', () => )
+ .add('Custom Expanding Row ClassName', () => );
storiesOf('Pagination', module)
.addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss
index 0693da3..a5a5f2f 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss
@@ -1,7 +1,7 @@
-.parent-expand-foo {
+.expanding-foo, .parent-expand-foo {
background-color: coral;
}
-.parent-expand-bar {
+.expanding-bar, .parent-expand-bar {
background-color: aqua;
}
\ No newline at end of file