Fix row selection when used with grouping

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 90080,
+    "bundled": 90278,
-    "minified": 43077,
+    "minified": 43057,
-    "gzipped": 11412
+    "gzipped": 11502
   },
   "dist/index.es.js": {
-    "bundled": 89497,
+    "bundled": 89695,
-    "minified": 42569,
+    "minified": 42549,
-    "gzipped": 11292,
+    "gzipped": 11382,
     "treeshaked": {
       "rollup": {
         "code": 450,

examples/pagination-controlled/src/App.js

@@ -82,7 +82,6 @@ function Table({
 
   // Listen for changes in pagination and use the state to fetch our new data
   React.useEffect(() => {
-    console.log(pageIndex)
     fetchData({ pageIndex, pageSize })
   }, [fetchData, pageIndex, pageSize])
 

src/plugin-hooks/useGroupBy.js

@@ -50,6 +50,7 @@ function useMain(instance) {
   const {
     debug,
     rows,
+    flatRows,
     flatColumns,
     flatHeaders,
     groupByFn = defaultGroupByFn,
@@ -152,9 +153,9 @@ function useMain(instance) {
     return row
   })
 
-  const groupedRows = React.useMemo(() => {
+  const [groupedRows, groupedFlatRows] = React.useMemo(() => {
     if (manualGroupBy || !groupBy.length) {
-      return rows
+      return [rows, flatRows]
     }
 
     if (process.env.NODE_ENV === 'development' && debug)
@@ -209,10 +210,16 @@ function useMain(instance) {
       return values
     }
 
+    let groupedFlatRows = []
+
     // Recursively group the data
     const groupRecursively = (rows, depth = 0, parentPath = []) => {
       // This is the last level, just return the rows
       if (depth >= groupBy.length) {
+        rows.forEach(row => {
+          row.path = [...parentPath, ...row.path]
+        })
+        groupedFlatRows = groupedFlatRows.concat(rows)
         return rows
       }
 
@@ -244,6 +251,8 @@ function useMain(instance) {
             path,
           }
 
+          groupedFlatRows.push(row)
+
           return row
         }
       )
@@ -251,13 +260,16 @@ function useMain(instance) {
       return groupedRows
     }
 
+    const groupedRows = groupRecursively(rows)
+
     // Assign the new data
-    return groupRecursively(rows)
+    return [groupedRows, groupedFlatRows]
   }, [
     manualGroupBy,
     groupBy,
     debug,
     rows,
+    flatRows,
     flatColumns,
     userAggregations,
     groupByFn,
@@ -267,6 +279,7 @@ function useMain(instance) {
     ...instance,
     toggleGroupBy,
     rows: groupedRows,
+    flatRows: groupedFlatRows,
     preGroupedRows: rows,
   }
 }

src/plugin-hooks/useRowSelect.js

@@ -29,15 +29,10 @@ function useRows(rows, instance) {
 
   instance.selectedFlatRows = React.useMemo(() => {
     const selectedFlatRows = []
+
     rows.forEach(row => {
-      if (row.isAggregated) {
+      row.isSelected = getRowIsSelected(row, selectedRowPaths)
-        const subRowPaths = row.subRows.map(row => row.path)
+
-        row.isSelected = subRowPaths.every(path =>
-          selectedRowPaths.includes(path.join('.'))
-        )
-      } else {
-        row.isSelected = selectedRowPaths.includes(row.path.join('.'))
-      }
       if (row.isSelected) {
         selectedFlatRows.push(row)
       }
@@ -193,74 +188,36 @@ function useMain(instance) {
   }
 
   hooks.prepareRow.push(row => {
-    // Aggregate rows have entirely different select logic
+    row.toggleRowSelected = set => toggleRowSelected(row.path, set)
-    if (row.isAggregated) {
+    row.getToggleRowSelectedProps = props => {
-      const subRowPaths = row.subRows.map(row => row.path)
+      let checked = false
-      row.toggleRowSelected = set => {
+
-        set = typeof set !== 'undefined' ? set : !row.isSelected
+      if (row.original && row.original[manualRowSelectedKey]) {
-        subRowPaths.forEach(path => {
+        checked = true
-          toggleRowSelected(path, set)
+      } else {
-        })
+        checked = row.isSelected
       }
-      row.getToggleRowSelectedProps = props => {
-        let checked = false
 
-        if (row.original && row.original[manualRowSelectedKey]) {
+      return mergeProps(
-          checked = true
+        {
-        } else {
+          onChange: e => {
-          checked = row.isSelected
+            row.toggleRowSelected(e.target.checked)
-        }
-
-        return mergeProps(
-          {
-            onChange: e => {
-              row.toggleRowSelected(e.target.checked)
-            },
-            style: {
-              cursor: 'pointer',
-            },
-            checked,
-            title: 'Toggle Row Selected',
           },
-          applyPropHooks(
+          style: {
-            instanceRef.current.hooks.getToggleRowSelectedProps,
+            cursor: 'pointer',
-            row,
-            instanceRef.current
-          ),
-          props
-        )
-      }
-    } else {
-      row.toggleRowSelected = set => toggleRowSelected(row.path, set)
-      row.getToggleRowSelectedProps = props => {
-        let checked = false
-
-        if (row.original && row.original[manualRowSelectedKey]) {
-          checked = true
-        } else {
-          checked = row.isSelected
-        }
-
-        return mergeProps(
-          {
-            onChange: e => {
-              row.toggleRowSelected(e.target.checked)
-            },
-            style: {
-              cursor: 'pointer',
-            },
-            checked,
-            title: 'Toggle Row Selected',
           },
-          applyPropHooks(
+          checked,
-            instanceRef.current.hooks.getToggleRowSelectedProps,
+          title: 'Toggle Row Selected',
-            row,
+        },
-            instanceRef.current
+        applyPropHooks(
-          ),
+          instanceRef.current.hooks.getToggleRowSelectedProps,
-          props
+          row,
-        )
+          instanceRef.current
-      }
+        ),
+        props
+      )
     }
+    // }
 
     return row
   })
@@ -273,3 +230,13 @@ function useMain(instance) {
     isAllRowsSelected,
   }
 }
+
+function getRowIsSelected(row, selectedRowPaths) {
+  if (row.isAggregated) {
+    return row.subRows.every(subRow =>
+      getRowIsSelected(subRow, selectedRowPaths)
+    )
+  }
+
+  return selectedRowPaths.includes(row.path.join('.'))
+}