feat: Add group selection. (#343)

material-table-core · Sep 21, 2021 · 479798c · 479798c
1 parent d99e2d6
commit 479798c
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -13,17 +13,17 @@
     "types"
   ],
   "scripts": {
-    "start": "./node_modules/.bin/webpack serve --config ./__tests__/demo/webpack.config.js --mode development --progress",
+    "start": "npx webpack serve --config ./__tests__/demo/webpack.config.js --mode development --progress",
     "build:esbuild": "ts-node esbuild.config.js",
-    "build:babel": "./node_modules/.bin/babel src -d dist",
+    "build:babel": "npx babel src -d dist",
     "build": "npm run build:babel",
     "lint": "npm run eslint && npm run tsc",
-    "eslint": "./node_modules/.bin/eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore",
-    "tsc": "./node_modules/.bin/tsc --noEmit --lib es6,dom --skipLibCheck types/index.d.ts",
-    "lint:fix": "./node_modules/.bin/eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore --fix",
-    "prettify": "./node_modules/.bin/prettier -c ./.prettierrc --write **/*.js",
-    "test": "jest",
-    "test:build": "jest __tests__/post.build.test.js",
+    "eslint": "npx eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore",
+    "tsc": "npx tsc --noEmit --lib es6,dom --skipLibCheck types/index.d.ts",
+    "lint:fix": "npx eslint src/** -c ./.eslintrc --ignore-path ./.eslintignore --fix",
+    "prettify": "npx prettier -c ./.prettierrc --write **/*.js",
+    "test": "npx jest",
+    "test:build": "npx jest __tests__/post.build.test.js",
     "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major -m 'Release v%s' && npm run git:push:tags",
     "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor -m 'Release v%s' && npm run git:push:tags",
     "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch -m 'Release v%s' && npm run git:push:tags",

diff --git a/src/components/MTableGroupRow/index.js b/src/components/MTableGroupRow/index.js
@@ -1,6 +1,7 @@
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import IconButton from '@material-ui/core/IconButton';
+import Checkbox from '@material-ui/core/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -34,6 +35,7 @@ function MTableGroupRow(props) {
             level={props.level + 1}
             path={[...props.path, index]}
             onGroupExpandChanged={props.onGroupExpandChanged}
+            onGroupSelected={props.onGroupSelected}
             onRowSelected={props.onRowSelected}
             onRowClick={props.onRowClick}
             onToggleDetailPanel={props.onToggleDetailPanel}
@@ -126,6 +128,34 @@ function MTableGroupRow(props) {
 
     const separator = props.options.groupRowSeparator || ': ';
 
+    const showSelectGroupCheckbox =
+      props.options.selection && props.options.showSelectGroupCheckbox;
+
+    const mapSelectedRows = (groupData) => {
+      let totalRows = 0;
+      let selectedRows = 0;
+
+      if (showSelectGroupCheckbox) {
+        if (groupData.data.length) {
+          totalRows += groupData.data.length;
+          groupData.data.forEach(
+            (row) => row.tableData.checked && selectedRows++
+          );
+        } else {
+          groupData.groups.forEach((group) => {
+            const [groupTotalRows, groupSelectedRows] = mapSelectedRows(group);
+
+            totalRows += groupTotalRows;
+            selectedRows += groupSelectedRows;
+          });
+        }
+      }
+
+      return [totalRows, selectedRows];
+    };
+
+    const [totalRows, selectedRows] = mapSelectedRows(props.groupData);
+
     return (
       <>
         <TableRow ref={props.forwardedRef}>
@@ -149,6 +179,17 @@ function MTableGroupRow(props) {
               >
                 <props.icons.DetailPanel />
               </IconButton>
+              {showSelectGroupCheckbox && (
+                <Checkbox
+                  indeterminate={selectedRows > 0 && totalRows !== selectedRows}
+                  checked={totalRows === selectedRows}
+                  onChange={(event, checked) =>
+                    props.onGroupSelected &&
+                    props.onGroupSelected(checked, props.groupData.path)
+                  }
+                  style={{ marginRight: 8 }}
+                />
+              )}
               <b>
                 {title}
                 {separator}
@@ -196,6 +237,7 @@ MTableGroupRow.propTypes = {
   onEditingCanceled: PropTypes.func,
   onGroupExpandChanged: PropTypes.func,
   onRowClick: PropTypes.func,
+  onGroupSelected: PropTypes.func,
   onRowSelected: PropTypes.func,
   onToggleDetailPanel: PropTypes.func.isRequired,
   onTreeExpandChanged: PropTypes.func.isRequired,

diff --git a/src/components/m-table-body.js b/src/components/m-table-body.js
@@ -172,6 +172,7 @@ class MTableBody extends React.Component {
         onEditingCanceled={this.props.onEditingCanceled}
         onGroupExpandChanged={this.props.onGroupExpandChanged}
         onRowClick={this.props.onRowClick}
+        onGroupSelected={this.props.onGroupSelected}
         onRowSelected={this.props.onRowSelected}
         onToggleDetailPanel={this.props.onToggleDetailPanel}
         onTreeExpandChanged={this.props.onTreeExpandChanged}
@@ -324,6 +325,7 @@ MTableBody.propTypes = {
   onGroupExpandChanged: PropTypes.func,
   onRowClick: PropTypes.func,
   onRowDoubleClick: PropTypes.func,
+  onGroupSelected: PropTypes.func,
   onRowSelected: PropTypes.func,
   onToggleDetailPanel: PropTypes.func.isRequired,
   onTreeExpandChanged: PropTypes.func.isRequired,

diff --git a/src/defaults/props.options.js b/src/defaults/props.options.js
@@ -28,6 +28,7 @@ export default {
   showEmptyDataSourceMessage: true,
   showFirstLastPageButtons: true,
   showSelectAllCheckbox: true,
+  showSelectGroupCheckbox: true,
   search: true,
   showTitle: true,
   showTextRowsSelected: true,

diff --git a/src/material-table.js b/src/material-table.js
@@ -409,6 +409,13 @@ export default class MaterialTable extends React.Component {
     );
   };
 
+  onGroupSelected = (checked, path) => {
+    this.dataManager.changeGroupSelected(checked, path);
+    this.setState(this.dataManager.getRenderState(), () =>
+      this.onSelectionChange()
+    );
+  };
+
   onChangeColumnHidden = (column, hidden) => {
     this.dataManager.changeColumnHidden(column, hidden);
     this.setState(this.dataManager.getRenderState(), () => {
@@ -939,6 +946,7 @@ export default class MaterialTable extends React.Component {
             ).length > 0
           }
           showSelectAllCheckbox={props.options.showSelectAllCheckbox}
+          showSelectGroupCheckbox={props.options.showSelectGroupCheckbox}
           orderBy={this.state.orderBy}
           orderDirection={this.state.orderDirection}
           onAllSelected={this.onAllSelected}
@@ -976,6 +984,7 @@ export default class MaterialTable extends React.Component {
         isTreeData={this.props.parentChildData !== undefined}
         onFilterChanged={this.onFilterChange}
         onRowSelected={this.onRowSelected}
+        onGroupSelected={this.onGroupSelected}
         onToggleDetailPanel={this.onToggleDetailPanel}
         onGroupExpandChanged={this.onGroupExpandChanged}
         onTreeExpandChanged={this.onTreeExpandChanged}

diff --git a/src/prop-types.js b/src/prop-types.js
@@ -362,6 +362,7 @@ export const propTypes = {
     showEmptyDataSourceMessage: PropTypes.bool,
     showFirstLastPageButtons: PropTypes.bool,
     showSelectAllCheckbox: PropTypes.bool,
+    showSelectGroupCheckbox: PropTypes.bool,
     showTitle: PropTypes.bool,
     showTextRowsSelected: PropTypes.bool,
     sorting: PropTypes.bool,

diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
@@ -134,8 +134,7 @@ export default class DataManager {
 
     usedWidth = '(' + usedWidth.join(' + ') + ')';
     undefinedWidthColumns.forEach((columnDef) => {
-      columnDef.tableData.width =
-        columnDef.tableData.initialWidth = `calc((100% - ${usedWidth}) / ${undefinedWidthColumns.length})`;
+      columnDef.tableData.width = columnDef.tableData.initialWidth = `calc((100% - ${usedWidth}) / ${undefinedWidthColumns.length})`;
     });
   }
 
@@ -299,6 +298,33 @@ export default class DataManager {
     this.selectedCount = checked ? selectedCount : 0;
   }
 
+  changeGroupSelected = (checked, path) => {
+    let currentGroup;
+    let currentGroupArray = this.groupedData;
+
+    path.forEach((value) => {
+      currentGroup = currentGroupArray.find((group) => group.value == value);
+      currentGroupArray = currentGroup.groups;
+    });
+
+    const setCheck = (data) => {
+      data.forEach((element) => {
+        if (element.groups.length > 0) {
+          setCheck(element.groups);
+        } else {
+          element.data.forEach((d) => {
+            if (d.tableData.checked != checked) {
+              d.tableData.checked = d.tableData.disabled ? false : checked;
+              this.selectedCount = this.selectedCount + (checked ? 1 : -1);
+            }
+          });
+        }
+      });
+    };
+
+    setCheck([currentGroup]);
+  };
+
   changeOrder(orderBy, orderDirection) {
     this.orderBy = orderBy;
     this.orderDirection = orderDirection;
@@ -672,12 +698,7 @@ export default class DataManager {
   // =====================================================================================================
 
   filterData = () => {
-    this.searched =
-      this.grouped =
-      this.treefied =
-      this.sorted =
-      this.paged =
-        false;
+    this.searched = this.grouped = this.treefied = this.sorted = this.paged = false;
 
     this.filteredData = [...this.data];
 

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -367,6 +367,7 @@ export interface Options<RowData extends object> {
   showEmptyDataSourceMessage?: boolean;
   showFirstLastPageButtons?: boolean;
   showSelectAllCheckbox?: boolean;
+  showSelectGroupCheckbox?: boolean;
   showTitle?: boolean;
   showTextRowsSelected?: boolean;
   showDetailPanelIcon?: boolean;