Merge 6ffcb2d into e7edc2f

README.md

@@ -143,6 +143,7 @@ The component accepts the following props:
 |**`downloadOptions`**|object|`{filename: 'tableDownload.csv', separator: ','}`|Options to change the output of the CSV file: `filename`: string, `separator`: string, `filterOptions`: object(`useDisplayedColumnsOnly`: boolean, `useDisplayedRowsOnly`: boolean)
 |**`elevation`**|number|4|Shadow depth applied to Paper component.
 |**`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.
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar.
 |**`filterType `**|string||Choice of filtering view. `enum('checkbox', 'dropdown', 'multiselect', 'textField')`

examples/expandable-rows/index.js

@@ -82,11 +82,15 @@ class Example extends React.Component {
       responsive: 'scroll',
       expandableRows: true,
       expandableRowsOnClick: true,
+      expandableRowsHeader: true,
+      /*
       isRowExpandable: (dataIndex, expandedRows) => {
         // Prevent expand/collapse of any row after the 5th (but allow those already expanded to be collapsed)
         if (expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
         return true;
       },
+      */
+
       rowsExpanded: [0, 1],
       onRowExpansionChange: (rowExpanded, allRowsExpanded, rowsExpanded) => {
         console.log('onRowExpansionChange');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-dt",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

src/MUIDataTable.js

@@ -141,6 +141,7 @@ class MUIDataTable extends React.Component {
         }),
       }),
       expandableRows: PropTypes.bool,
+      expandableRowsHeader: PropTypes.bool,
       expandableRowsOnClick: PropTypes.bool,
       filter: PropTypes.bool,
       filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
@@ -294,6 +295,7 @@ class MUIDataTable extends React.Component {
     },
     elevation: 4,
     expandableRows: false,
+    expandableRowsHeader: true,
     expandableRowsOnClick: false,
     filter: true,
     filterType: 'dropdown',
@@ -1059,6 +1061,8 @@ class MUIDataTable extends React.Component {
   };
 
   toggleExpandRow = row => {
+    console.log('toggleExpandRow');
+
     const { dataIndex } = row;
     let removedRow;
     const { isRowExpandable } = this.options;
@@ -1104,6 +1108,64 @@ 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;
@@ -1397,6 +1459,9 @@ class MUIDataTable extends React.Component {
               selectRowUpdate={this.selectRowUpdate}
               toggleSort={this.toggleSortColumn}
               setCellRef={this.setHeadCellRef}
+              expandedRows={expandedRows}
+              toggleAllExpandableRows={this.toggleAllExpandableRows}
+              areAllRowsExpanded={this.areAllRowsExpanded}
               options={this.options} />
             <TableBody
               data={displayData}

src/components/TableHead.js

@@ -62,6 +62,10 @@ class TableHead extends React.Component {
             checkboxColor={options.checkboxColor}
             checked={isChecked}
             expandableOn={options.expandableRows}
+            expandedRows={this.props.expandedRows}
+            expandableRowsHeader={options.expandableRowsHeader}
+            areAllRowsExpanded={this.props.areAllRowsExpanded}
+            onExpand={this.props.toggleAllExpandableRows}
             fixedHeader={options.fixedHeader}
             isHeaderCell={true}
             isRowSelectable={true}

src/components/TableSelectCell.js

@@ -6,6 +6,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import TableCell from '@material-ui/core/TableCell';
 import { makeStyles } from '@material-ui/core/styles';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import Remove from '@material-ui/icons/Remove';
 
 const useStyles = makeStyles(
   theme => ({
@@ -58,6 +59,9 @@ function TableSelectCell(props) {
     selectableOn = 'none',
     selectableRowsHeader,
     setCellRef,
+    expandableRowsHeader,
+    expandedRows,
+    areAllRowsExpanded = () => (false),
     ...otherProps
   } = props;
 
@@ -72,8 +76,12 @@ function TableSelectCell(props) {
 
   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 = () => {
@@ -103,7 +111,13 @@ function TableSelectCell(props) {
   return (
     <TableCell className={cellClass} padding="checkbox" {...refProp}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
-        {expandableOn && <KeyboardArrowRight id="expandable-button" className={iconClass} onClick={onExpand} />}
+        {expandableOn && <>
+          {(isHeaderCell && !areAllRowsExpanded() && props.expandedRows.data.length > 0 ) ?
+            <Remove id="expandable-button" className={iconIndeterminateClass} onClick={onExpand} />
+            :
+            <KeyboardArrowRight id="expandable-button" className={iconClass} onClick={onExpand} />
+          }
+          </>}
         {selectableOn !== 'none' && renderCheckBox()}
       </div>
     </TableCell>