diff --git a/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js b/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js
new file mode 100644
index 0000000..a7a7ea3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js
@@ -0,0 +1,188 @@
+/* eslint no-param-reassign: 0 */
+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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class DummyColumnWithRowExpand extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hoverIdx: null
+ };
+ }
+
+ expandRow = {
+ renderer: () => (
+
Content
+ ),
+ showExpandColumn: true,
+ expandByColumnOnly: true
+ };
+
+ actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+ if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ rowEvents = {
+ onMouseEnter: (e, row, rowIndex) => {
+ this.setState({ hoverIdx: rowIndex });
+ },
+ onMouseLeave: () => {
+ this.setState({ hoverIdx: null });
+ }
+ }
+
+ rowStyle = (row, rowIndex) => {
+ row.index = rowIndex;
+ const style = {};
+ if (rowIndex % 2 === 0) {
+ style.backgroundColor = 'transparent';
+ } else {
+ style.backgroundColor = 'rgba(54, 163, 173, .10)';
+ }
+ style.borderTop = 'none';
+
+ return style;
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name'
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }, {
+ text: '',
+ isDummyField: true,
+ formatter: this.actionFormater,
+ formatExtraData: { hoverIdx: this.state.hoverIdx },
+ headerStyle: { width: '50px' },
+ style: { height: '30px' }
+ }];
+ return (
+
+
+
+ );
+ }
+}
+`;
+
+export default class DummyColumnWithRowExpand extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hoverIdx: null
+ };
+ }
+
+ expandRow = {
+ renderer: () => (
+ Content
+ ),
+ showExpandColumn: true,
+ expandByColumnOnly: true
+ };
+
+ actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+ if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ rowEvents = {
+ onMouseEnter: (e, row, rowIndex) => {
+ this.setState({ hoverIdx: rowIndex });
+ },
+ onMouseLeave: () => {
+ this.setState({ hoverIdx: null });
+ }
+ }
+
+ rowStyle = (row, rowIndex) => {
+ row.index = rowIndex;
+ const style = {};
+ if (rowIndex % 2 === 0) {
+ style.backgroundColor = 'transparent';
+ } else {
+ style.backgroundColor = 'rgba(54, 163, 173, .10)';
+ }
+ style.borderTop = 'none';
+
+ return style;
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name'
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }, {
+ isDummyField: true,
+ text: '',
+ formatter: this.actionFormater,
+ formatExtraData: { hoverIdx: this.state.hoverIdx },
+ headerStyle: { width: '50px' },
+ style: { height: '30px' }
+ }];
+ return (
+
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 2c71fac..732c5b2 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -35,6 +35,7 @@ import ColumnEventTable from 'examples/columns/column-event-table';
import ColumnHiddenTable from 'examples/columns/column-hidden-table';
import ColumnAttrsTable from 'examples/columns/column-attrs-table';
import DummyColumnTable from 'examples/columns/dummy-column-table';
+import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
// work on header columns
import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -273,7 +274,8 @@ storiesOf('Work on Columns', module)
.add('Customize Column Class', () => )
.add('Customize Column Style', () => )
.add('Customize Column HTML attribute', () => )
- .add('Dummy Column', () => );
+ .add('Dummy Column', () => )
+ .add('Row Expand with Dummy Column Formatter', () => );
storiesOf('Work on Header Columns', module)
.addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js
index 3a151db..f0d9187 100644
--- a/packages/react-bootstrap-table2/src/row/aggregate-row.js
+++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js
@@ -37,10 +37,10 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
this.props.selectable !== nextProps.selectable ||
this.shouldUpdatedBySelfProps(nextProps)
) {
- this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
return true;
}
- this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
return this.shouldUpdateRowContent;
}
diff --git a/packages/react-bootstrap-table2/src/row/should-updater.js b/packages/react-bootstrap-table2/src/row/should-updater.js
index c61ae5e..fb1f1be 100644
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -48,4 +48,9 @@ export default ExtendBase =>
return this.shouldUpdateByCellEditing(nextProps) ||
this.shouldUpdatedByNormalProps(nextProps);
}
+
+ shouldRowContentUpdate(nextProps) {
+ return this.shouldUpdateChild(nextProps) ||
+ this.shouldUpdateByColumnsForSimpleCheck(nextProps);
+ }
};
diff --git a/packages/react-bootstrap-table2/src/row/simple-row.js b/packages/react-bootstrap-table2/src/row/simple-row.js
index 96ca92f..0ad992f 100644
--- a/packages/react-bootstrap-table2/src/row/simple-row.js
+++ b/packages/react-bootstrap-table2/src/row/simple-row.js
@@ -15,8 +15,7 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
shouldComponentUpdate(nextProps) {
this.shouldUpdateRowContent = false;
- this.shouldUpdateRowContent =
- this.shouldUpdateChild(nextProps) || this.shouldUpdateByColumnsForSimpleCheck(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
if (this.shouldUpdateRowContent) return true;
return this.shouldUpdatedBySelfProps(nextProps);