Added expandable row header (expandableRowsHeader option)

README.md

@@ -148,6 +148,7 @@ The component accepts the following props:
 |**`isRowExpandable`**|function||Enable/disable expansion or collapse on certain expandable rows with custom function. Will be considered true if not provided. `function(dataIndex: number, expandedRows: object(lookup: {dataIndex: number}, data: arrayOfObjects: {index: number, dataIndex: number})) => boolean`.
 |**`selectableRowsHeader`**|boolean|true|Show/hide the select all/deselect all checkbox header for selectable rows
 |**`expandableRows`**|boolean|false|Enable/disable expandable rows
+|**`expandableRowsHeader`**|boolean|true|Show/hide the expand all/collapse all row header for expandable rows.
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
 |**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component`
 |**`resizableColumns`**|boolean|false|Enable/disable resizable columns

examples/expandable-rows/index.js

@@ -82,6 +82,7 @@ class Example extends React.Component {
       filterType: 'dropdown',
       responsive: 'scrollMaxHeight',
       expandableRows: true,
+      expandableRowsHeader: true,
       expandableRowsOnClick: true,
       isRowExpandable: (dataIndex, expandedRows) => {
         // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed)

src/MUIDataTable.js

@@ -141,6 +141,7 @@ class MUIDataTable extends React.Component {
       textLabels: PropTypes.object,
       pagination: PropTypes.bool,
       expandableRows: PropTypes.bool,
+      expandableRowsHeader: PropTypes.bool,
       expandableRowsOnClick: PropTypes.bool,
       renderExpandableRow: PropTypes.func,
       customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
@@ -303,6 +304,7 @@ class MUIDataTable extends React.Component {
     textLabels,
     serverSideFilterList: [],
     expandableRows: false,
+    expandableRowsHeader: true,
     expandableRowsOnClick: false,
     resizableColumns: false,
     selectableRows: 'multiple',
@@ -1139,6 +1141,62 @@ class MUIDataTable extends React.Component {
     );
   };
 
+  // Collapses or expands all expanded rows
+  toggleAllExpandableRows = () => {
+    let expandedRowsData = [...this.state.expandedRows.data];
+    const { isRowExpandable } = this.options;
+    let affecttedRows = [];
+
+    if (expandedRowsData.length > 0) {
+      // collapse all
+      for (let ii = expandedRowsData.length - 1; ii >= 0; ii--) {
+        let item = expandedRowsData[ii];
+        if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {
+          affecttedRows.push(expandedRowsData.splice(ii, 1));
+        }
+      }
+
+    } else {
+      // expand all
+      for (let ii = 0; ii < this.state.data.length; ii++) {
+        let item = this.state.data[ii];
+        if (!isRowExpandable || (isRowExpandable && isRowExpandable(item.dataIndex, this.state.expandedRows))) {
+          if ( this.state.expandedRows.lookup[item.index] !== true ) {
+            let newItem = {
+              index: ii,
+              dataIndex: item.index
+            };
+            expandedRowsData.push(newItem);
+            affecttedRows.push(newItem);
+          }
+        }
+      }
+    }
+
+    this.setState(
+      {
+        expandedRows: {
+          lookup: buildMap(expandedRowsData),
+          data: expandedRowsData,
+        },
+      },
+      () => {
+        this.setTableAction('expandRow');
+        if (this.options.onRowExpansionChange) {
+          this.options.onRowExpansionChange(
+            affecttedRows,
+            this.state.expandedRows.data,
+            this.state.expandedRows.data.map(item => item.dataIndex),
+          );
+        }
+      },
+    );
+  }
+
+  areAllRowsExpanded = () => {
+    return this.state.expandedRows.data.length === this.state.data.length;
+  }
+
   selectRowUpdate = (type, value, shiftAdjacentRows = []) => {
     // safety check
     const { selectableRows } = this.options;
@@ -1435,6 +1493,9 @@ class MUIDataTable extends React.Component {
               selectRowUpdate={this.selectRowUpdate}
               toggleSort={this.toggleSortColumn}
               setCellRef={this.setHeadCellRef}
+              expandedRows={expandedRows}
+              areAllRowsExpanded={this.areAllRowsExpanded}
+              toggleAllExpandableRows={this.toggleAllExpandableRows}
               options={this.options}
             />
             <TableBody

src/components/TableHead.js

@@ -30,7 +30,7 @@ class TableHead extends React.Component {
   };
 
   render() {
-    const { classes, columns, count, options, data, setCellRef, selectedRows } = this.props;
+    const { classes, columns, count, options, data, setCellRef, selectedRows, expandedRows } = this.props;
 
     const numSelected = (selectedRows && selectedRows.data.length) || 0;
     let isIndeterminate = numSelected > 0 && numSelected < count;
@@ -65,11 +65,14 @@ class TableHead extends React.Component {
             indeterminate={isIndeterminate}
             checked={isChecked}
             isHeaderCell={true}
+            expandedRows={expandedRows}
+            expandableRowsHeader={options.expandableRowsHeader}
             expandableOn={options.expandableRows}
             selectableOn={options.selectableRows}
             fixedHeader={options.fixedHeader}
             fixedHeaderOptions={options.fixedHeaderOptions}
             selectableRowsHeader={options.selectableRowsHeader}
+            onExpand={this.props.toggleAllExpandableRows}
             isRowSelectable={true}
           />
           {columns.map(

src/components/TableSelectCell.js

@@ -6,6 +6,7 @@ import TableCell from '@material-ui/core/TableCell';
 import IconButton from '@material-ui/core/IconButton';
 import { withStyles } from '@material-ui/core/styles';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import Remove from '@material-ui/icons/Remove';
 
 const defaultSelectCellStyles = theme => ({
   root: {},
@@ -90,6 +91,9 @@ class TableSelectCell extends React.Component {
       isRowSelectable,
       selectableRowsHeader,
       hideExpandButton,
+      expandableRowsHeader,
+      expandedRows,
+      areAllRowsExpanded = () => (false),
       ...otherProps
     } = this.props;
     let fixedHeaderClasses;
@@ -117,8 +121,12 @@ class TableSelectCell extends React.Component {
 
     const iconClass = classNames({
       [classes.icon]: true,
-      [classes.hide]: isHeaderCell,
-      [classes.expanded]: isRowExpanded,
+      [classes.hide]: isHeaderCell && !expandableRowsHeader,
+      [classes.expanded]: isRowExpanded || (isHeaderCell && areAllRowsExpanded()),
+    });
+    const iconIndeterminateClass = classNames({
+      [classes.icon]: true,
+      [classes.hide]: isHeaderCell && !expandableRowsHeader,
     });
 
     const renderCheckBox = () => {
@@ -144,9 +152,17 @@ class TableSelectCell extends React.Component {
       <TableCell className={cellClass} padding="checkbox">
         <div style={{ display: 'flex', alignItems: 'center' }}>
           {expandableOn && (
-            <IconButton onClick={onExpand} disabled={isHeaderCell} className={buttonClass}>
-              <KeyboardArrowRight id="expandable-button" className={iconClass} />
-            </IconButton>
+            <React.Fragment>
+              {(isHeaderCell && !areAllRowsExpanded() && expandedRows && expandedRows.data.length > 0 ) ?
+                <IconButton onClick={onExpand} style={{padding:0}} disabled={expandableRowsHeader === false}>
+                  <Remove id="expandable-button" className={iconIndeterminateClass} />
+                </IconButton>
+                :
+                <IconButton onClick={onExpand} style={{padding:0}} disabled={expandableRowsHeader === false}>
+                  <KeyboardArrowRight id="expandable-button" className={iconClass} />
+                </IconButton>
+              }
+            </React.Fragment>
           )}
           {selectableOn !== 'none' && renderCheckBox()}
         </div>