implemented new feature Expand/Collapse All header cell

Author: rajaramg

css/react-bootstrap-table.css

@@ -261,6 +261,11 @@ td.react-bs-table-expand-cell {
     cursor: pointer;
 }
 
+th.react-bs-table-expand-cell {
+  cursor: pointer;
+}
+
+
 @keyframes shake {
   from, to {
     transform: translate3d(0, 0, 0);

examples/js/expandRow/custom-expand-indicator.js

@@ -81,9 +81,19 @@ export default class ExpandRow extends React.Component {
     );
   }
 
+  expandedColumnHeaderComponent({ expandAllChilds }) {
+    const content = (expandAllChilds ? '(-)' : '(+)' );
+    return (
+      <div>
+        { content }
+      </div>
+    );
+  }
+
   render() {
     const options = {
-      expandRowBgColor: 'rgb(242, 255, 163)'
+      expandRowBgColor: 'rgb(242, 255, 163)',
+      expandAllChilds: false
     };
     return (
       <BootstrapTable data={ products }
@@ -93,7 +103,8 @@ export default class ExpandRow extends React.Component {
         expandColumnOptions={ {
           expandColumnVisible: true,
           expandColumnComponent: this.expandColumnComponent,
-          columnWidth: 50
+          columnWidth: 50,
+          expandedColumnHeaderComponent: this.expandedColumnHeaderComponent
         } }
         search>
         <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>

src/BootstrapTable.js

@@ -44,14 +44,24 @@ class BootstrapTable extends Component {
     this._adjustHeaderWidth = this._adjustHeaderWidth.bind(this);
     this._adjustHeight = this._adjustHeight.bind(this);
     this._adjustTable = this._adjustTable.bind(this);
+    this.toggleExpandAllChilds = this.toggleExpandAllChilds.bind(this);
+
+    let expandedKeys = [];
+    if (this.props.options.expandAllChilds !== null &&
+      this.props.options.expandAllChilds !== undefined && this.props.options.expandAllChilds) {
+      expandedKeys = this.store.getAllRowkey();
+    } else if (this.props.options.expanding !== undefined && this.props.options.expanding !== null) {
+      expandedKeys = this.props.options.expanding;
+    }
 
     this.state = {
       data: this.getTableData(),
       currPage: currPage,
-      expanding: this.props.options.expanding || [],
+      expanding: expandedKeys,
       sizePerPage: this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0],
       selectedRowKeys: this.store.getSelectedRowKeys(),
       reset: false,
+      expandAllChilds: this.props.options.expandAllChilds,
       x: this.props.keyBoardNav ? 0 : -1,
       y: this.props.keyBoardNav ? 0 : -1
     };
@@ -467,6 +477,9 @@ class BootstrapTable extends Component {
             reset={ this.state.reset }
             expandColumnVisible={ expandColumnOptions.expandColumnVisible }
             expandColumnComponent={ expandColumnOptions.expandColumnComponent }
+            expandedColumnHeaderComponent={ expandColumnOptions.expandedColumnHeaderComponent }
+            expandAllChilds={ this.state.expandAllChilds }
+            toggleExpandAllChilds={ this.toggleExpandAllChilds }
             expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
             { this.props.children }
           </TableHeader>
@@ -616,6 +629,28 @@ class BootstrapTable extends Component {
     });
   }
 
+  toggleExpandAllChilds() {
+    const { expandAllChilds } = this.state;
+    const compScope = this;
+    if (expandAllChilds) {
+      this.setState(() => {
+        return {
+          expanding: [],
+          expandAllChilds: !expandAllChilds,
+          reset: false
+        };
+      });
+    } else {
+      this.setState(() => {
+        return {
+          expanding: compScope.store.getAllRowkey(),
+          expandAllChilds: !expandAllChilds,
+          reset: false
+        };
+      });
+    }
+  }
+
   handlePaginationData = (page, sizePerPage) => {
     const { onPageChange, pageStartIndex } = this.props.options;
     const emptyTable = this.store.isEmpty();
@@ -1691,7 +1726,8 @@ BootstrapTable.propTypes = {
     beforeShowError: PropTypes.func,
     printToolBar: PropTypes.bool,
     insertFailIndicator: PropTypes.string,
-    noAutoBOM: PropTypes.bool
+    noAutoBOM: PropTypes.bool,
+    expandAllChilds: PropTypes.bool
   }),
   fetchInfo: PropTypes.shape({
     dataTotalSize: PropTypes.number
@@ -1710,6 +1746,7 @@ BootstrapTable.propTypes = {
     columnWidth: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
     expandColumnVisible: PropTypes.bool,
     expandColumnComponent: PropTypes.func,
+    expandedColumnHeaderComponent: PropTypes.func,
     expandColumnBeforeSelectColumn: PropTypes.bool
   }),
   footer: PropTypes.bool
@@ -1723,6 +1760,7 @@ BootstrapTable.defaultProps = {
   expandColumnOptions: {
     expandColumnVisible: false,
     expandColumnComponent: undefined,
+    expandedColumnHeaderComponent: undefined,
     expandColumnBeforeSelectColumn: true
   },
   height: '100%',
@@ -1858,7 +1896,8 @@ BootstrapTable.defaultProps = {
     beforeShowError: undefined,
     printToolBar: true,
     insertFailIndicator: Const.INSERT_FAIL_INDICATOR,
-    noAutoBOM: true
+    noAutoBOM: true,
+    expandAllChilds: false
   },
   fetchInfo: {
     dataTotalSize: 0

src/ExpandRowHeaderColumn.js

@@ -3,18 +3,35 @@ import PropTypes from 'prop-types';
 
 class ExpandRowHeaderColumn extends Component {
 
+  constructor(props) {
+    super(props);
+    this.toggleExpandAllChilds = this.toggleExpandAllChilds.bind(this);
+  }
+
+  toggleExpandAllChilds() {
+    this.props.toggleExpandAllChilds();
+  }
+
   render() {
+    const { expandedColumnHeaderComponent, expandAllChilds } = this.props;
+    const defaultExpandedHeaderComponent = (expandAllChilds ? '(-)' : '(+)' );
+    const ExpandedColumnHeaderComponent = expandedColumnHeaderComponent;
+
     return (
       <th rowSpan={ this.props.rowCount } style={ { textAlign: 'center' } }
         className='react-bs-table-expand-cell'
-        data-is-only-head={ false }>
-        { this.props.children }
+        data-is-only-head={ false } onClick={ this.toggleExpandAllChilds }>
+        { this.props.expandedColumnHeaderComponent ?
+          <ExpandedColumnHeaderComponent
+            expandAllChilds={ this.props.expandAllChilds } /> : defaultExpandedHeaderComponent }
       </th>
     );
   }
 }
 ExpandRowHeaderColumn.propTypes = {
-  children: PropTypes.node,
-  rowCount: PropTypes.number
+  expandedColumnHeaderComponent: PropTypes.func,
+  rowCount: PropTypes.number,
+  expandAllChilds: PropTypes.bool,
+  toggleExpandAllChilds: PropTypes.func
 };
 export default ExpandRowHeaderColumn;

src/TableHeader.js

@@ -38,7 +38,8 @@ function getSortOrder(sortList, field, enableSort) {
 class TableHeader extends Component {
 
   render() {
-    const { sortIndicator, sortList, onSort, reset, version, condensed, bordered } = this.props;
+    const { sortIndicator, sortList, onSort, reset, version, condensed, bordered,
+      expandedColumnHeaderComponent, expandAllChilds, toggleExpandAllChilds } = this.props;
     const containerClasses = classSet(
       'react-bs-container-header',
       'table-header-wrapper',
@@ -64,13 +65,19 @@ class TableHeader extends Component {
     rows[0].push( [
       this.props.expandColumnVisible &&
         this.props.expandColumnBeforeSelectColumn &&
-          <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }/>
+          <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
+            expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
+            expandAllChilds={ expandAllChilds }
+            toggleExpandAllChilds={ toggleExpandAllChilds }/>
     ], [
       this.renderSelectRowHeader(rowCount + 1, rowKey++)
     ], [
       this.props.expandColumnVisible &&
         !this.props.expandColumnBeforeSelectColumn &&
-          <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }/>
+          <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
+            expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
+            expandAllChilds={ expandAllChilds }
+            toggleExpandAllChilds={ toggleExpandAllChilds }/>
     ]);
 
     React.Children.forEach(this.props.children, (elm) => {
@@ -166,8 +173,11 @@ TableHeader.propTypes = {
   reset: PropTypes.bool,
   expandColumnVisible: PropTypes.bool,
   expandColumnComponent: PropTypes.func,
+  expandedColumnHeaderComponent: PropTypes.func,
   expandColumnBeforeSelectColumn: PropTypes.bool,
-  version: PropTypes.string
+  version: PropTypes.string,
+  expandAllChilds: PropTypes.bool,
+  toggleExpandAllChilds: PropTypes.func
 };
 
 export default TableHeader;