fix #993

Author: AllenFang

docs/row-expand.md

@@ -18,6 +18,7 @@
 * [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
 
@@ -165,3 +166,24 @@ const expandRow = {
   expandColumnPosition: 'right'
 };
 ```
+
+### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
+Apply the custom class name on parent row of expanded row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: 'foo'
+};
+```
+Below case is more flexible way to custom the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```

packages/react-bootstrap-table2-example/examples/row-expand/parent-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 = {
+  parentClassName: 'parent-expand-foo',
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+const expandRow2 = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: 'parent-expand-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -165,6 +165,7 @@ import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 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';
 
 // pagination
 import PaginationTable from 'examples/pagination';
@@ -414,7 +415,8 @@ storiesOf('Row Expand', module)
   .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
   .add('Expand Column Position', () => <ExpandColumnPosition />)
-  .add('Expand Hooks', () => <ExpandHooks />);
+  .add('Expand Hooks', () => <ExpandHooks />)
+  .add('Custom Parent Row ClassName', () => <ParentRowClassName />);
 
 storiesOf('Pagination', module)
   .addDecorator(bootstrapStyle())

packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss

@@ -0,0 +1,7 @@
+.parent-expand-foo {
+  background-color: coral;
+}
+
+.parent-expand-bar {
+  background-color: aqua;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -12,3 +12,4 @@
 @import "sort/index";
 @import "search/index";
 @import "loading-overlay/index";
+@import "row-expand/index";

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -189,7 +189,8 @@ BootstrapTable.propTypes = {
     expandColumnPosition: PropTypes.oneOf([
       Const.INDICATOR_POSITION_LEFT,
       Const.INDICATOR_POSITION_RIGHT
-    ])
+    ]),
+    parentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
   }),
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,

packages/react-bootstrap-table2/src/row-expand/row-consumer.js

@@ -1,23 +1,32 @@
 /* eslint react/prop-types: 0 */
 import React from 'react';
+import cs from 'classnames';
 import ExpandRow from './expand-row';
 import _ from '../utils';
 import ExpansionContext from '../contexts/row-expand-context';
 
 export default (Component) => {
   const renderWithExpansion = (props, expandRow) => {
+    let parentClassName = '';
     const key = props.value;
 
     const expanded = _.contains(expandRow.expanded, key);
     const isClosing = _.contains(expandRow.isClosing, key);
     const expandable = !expandRow.nonExpandable || !_.contains(expandRow.nonExpandable, key);
+    if (expanded) {
+      parentClassName = _.isFunction(expandRow.parentClassName) ?
+        expandRow.parentClassName(expanded, props.row, props.rowIndex) :
+        (expandRow.parentClassName || '');
+    }
+
     return [
       <Component
         { ...props }
         key={ key }
         expanded={ expanded }
         expandable={ expandable }
         expandRow={ { ...expandRow } }
+        className={ cs(props.className, parentClassName) }
       />,
       expanded || isClosing ? <ExpandRow
         key={ `${key}-expanding` }