diff --git a/docs/row-expand.md b/docs/row-expand.md index 5f6b47a..8afb1aa 100644 --- a/docs/row-expand.md +++ b/docs/row-expand.md @@ -14,6 +14,7 @@ * [onExpandAll](#onExpandAll) * [showExpandColumn](#showExpandColumn) * [onlyOneExpanding](#onlyOneExpanding) +* [expandByColumnOnly](#expandByColumnOnly) * [expandColumnRenderer](#expandColumnRenderer) * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer) @@ -138,3 +139,14 @@ const expandRow = { onlyOneExpanding: true }; ``` + +### expandRow.expandByColumnOnly - [Bool] +Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. + +```js +const expandRow = { + renderer: (row) => ..., + showExpandColumn: true, + expandByColumnOnly: true +}; +``` diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expand-by-column-only.js b/packages/react-bootstrap-table2-example/examples/row-expand/expand-by-column-only.js new file mode 100644 index 0000000..bc8f5be --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-expand/expand-by-column-only.js @@ -0,0 +1,76 @@ +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 expandRow = { + 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
+{ \`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
+{ sourceCode }
+