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

+
+ ), + showExpandColumn: true, + expandByColumnOnly: true +}; + +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 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

+
+ ), + showExpandColumn: true +}; + + +`; + +export default () => ( +
+

Only able to expand row via clicking expand column(indicator)

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 13d95dd..3dbcede 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -132,6 +132,7 @@ import BasicRowExpand from 'examples/row-expand'; import RowExpandManagement from 'examples/row-expand/expand-management'; import NonExpandableRows from 'examples/row-expand/non-expandable-rows'; import ExpandColumn from 'examples/row-expand/expand-column'; +import OnlyExpandByColumn from 'examples/row-expand/expand-by-column-only.js'; import ExpandOnlyOne from 'examples/row-expand/expand-only-one'; import CustomExpandColumn from 'examples/row-expand/custom-expand-column'; import ExpandHooks from 'examples/row-expand/expand-hooks'; @@ -323,6 +324,7 @@ storiesOf('Row Expand', module) .add('Expand Management', () => ) .add('Non Expandabled Rows', () => ) .add('Expand Indicator', () => ) + .add('Only Expand by Indicator', () => ) .add('Expand Only One Row at The Same Time', () => ) .add('Custom Expand Indicator', () => ) .add('Expand Hooks', () => );