add stories for expand row

packages/react-bootstrap-table2-example/examples/row-expand/expand-management.js

@@ -0,0 +1,138 @@
+/* eslint no-unused-vars: 0 */
+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 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'
+}];
+
+class RowExpandManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.expanded.includes(2)) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnExpand = (row, isExpand, rowIndex, e) => {
+    if (isExpand) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  render() {
+    const expandRow = {
+      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>
+      ),
+      expanded: this.state.expanded,
+      onExpand: this.handleOnExpand
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Expand/Collapse 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } expandRow={ expandRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class RowExpandManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.expanded.includes(2)) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnExpand = (row, isExpand, rowIndex, e) => {
+    if (isExpand) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  render() {
+    const expandRow = {
+      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>
+      ),
+      expanded: this.state.expanded,
+      onExpand: this.handleOnExpand
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Expand/Collapse 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } expandRow={ expandRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/row-expand/index.js

@@ -0,0 +1,72 @@
+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 => (
+    <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 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 => (
+    <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>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-expand/non-expandable-rows.js

@@ -0,0 +1,75 @@
+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 => (
+    <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>
+  ),
+  nonExpandable: [1, 3]
+};
+
+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 => (
+    <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>
+  ),
+  nonExpandable: [1, 3]
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>The second and fourth row is not expandable</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -68,3 +68,17 @@ export const stockGenerator = (quantity = 5) =>
   }));
 
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+export const productsExpandRowsGenerator = (quantity = 5, callback) => {
+  if (callback) return Array.from({ length: quantity }, callback);
+
+  // if no given callback, retrun default product format.
+  return (
+    Array.from({ length: quantity }, (value, index) => ({
+      id: index,
+      name: `Item name ${index}`,
+      price: 2100 + index,
+      expand: productsQualityGenerator(index)
+    }))
+  );
+};

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

@@ -113,6 +113,11 @@ import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
 
+// work on row expand
+import BasicRowExpand from 'examples/row-expand';
+import RowExpandManagement from 'examples/row-expand/expand-management';
+import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
+
 // pagination
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
@@ -261,6 +266,11 @@ storiesOf('Row Selection', module)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />);
 
+storiesOf('Row Expand', module)
+  .add('Basic Row Expand', () => <BasicRowExpand />)
+  .add('Expand Management', () => <RowExpandManagement />)
+  .add('Non Expandabled Rows', () => <NonExpandableRows />);
+
 storiesOf('Pagination', module)
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)