fix: let parent rows unselect child rows when not itself selected (TanStack#6364)

- Updated checkbox selection logic to account for sub-row selections in various examples (Alpine, Angular, React, Preact, Solid, Svelte, Vue).
- Refactored core row selection feature to include memoization for `getIsAllSubRowsSelected` and `getCanSelectSubRows` functions.
- Improved performance by optimizing selection checks in utility functions.

Author: KevinVandy

examples/alpine/expanding/index.html

@@ -97,7 +97,7 @@
                       <input
                         type="checkbox"
                         style="cursor: pointer"
-                        :checked="cell.row.getIsSelected()"
+                        :checked="cell.row.getIsSelected() || (cell.row.getCanSelectSubRows() && cell.row.getIsAllSubRowsSelected())"
                         x-effect="$el.indeterminate = !cell.row.getIsSelected() && cell.row.getIsSomeSelected()"
                         @change="cell.row.getToggleSelectedHandler()($event)"
                       />

examples/angular/expanding/src/app/expandable-cell/expandable-cell.ts

@@ -43,7 +43,10 @@ export class ExpandableHeaderCell<T extends RowData> {
         <input
           type="checkbox"
           [indeterminate]="row.getIsSomeSelected()"
-          [checked]="row.getIsSelected()"
+          [checked]="
+            row.getIsSelected() ||
+            (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
+          "
           (change)="row.getToggleSelectedHandler()($event)"
         />
         {{ ' ' }}

examples/lit/expanding/src/main.ts

@@ -123,7 +123,9 @@ const columns: Array<ColumnDef<typeof features, Person>> = [
     cell: ({ row, getValue }) => html`
       <div style="padding-left:${row.depth * 2}rem">
         ${indeterminateCheckbox({
-          checked: row.getIsSelected(),
+          checked:
+            row.getIsSelected() ||
+            (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()),
           indeterminate: row.getIsSomeSelected(),
           onChange: row.getToggleSelectedHandler(),
         })}

examples/preact/expanding/src/main.tsx

@@ -68,7 +68,10 @@ function App() {
             >
               <div>
                 <IndeterminateCheckbox
-                  checked={row.getIsSelected()}
+                  checked={
+                    row.getIsSelected() ||
+                    (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
+                  }
                   indeterminate={row.getIsSomeSelected()}
                   onChange={row.getToggleSelectedHandler()}
                 />{' '}

examples/react/expanding/src/main.tsx

@@ -69,7 +69,10 @@ function App() {
             >
               <div>
                 <IndeterminateCheckbox
-                  checked={row.getIsSelected()}
+                  checked={
+                    row.getIsSelected() ||
+                    (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
+                  }
                   indeterminate={row.getIsSomeSelected()}
                   onChange={row.getToggleSelectedHandler()}
                 />{' '}
@@ -129,6 +132,7 @@ function App() {
       // filterFromLeafRows: true,
       // maxLeafRowFilterDepth: 0,
       debugTable: true,
+      debugRows: true,
     },
     (state) => state, // default selector
   )
@@ -343,7 +347,7 @@ function IndeterminateCheckbox({
     if (typeof indeterminate === 'boolean') {
       ref.current.indeterminate = !rest.checked && indeterminate
     }
-  }, [ref, indeterminate])
+  }, [ref, indeterminate, rest.checked])
 
   return (
     <input

examples/solid/expanding/src/App.tsx

@@ -59,7 +59,10 @@ function App() {
         <div style={{ 'padding-left': `${row.depth * 2}rem` }}>
           <div>
             <IndeterminateCheckbox
-              checked={row.getIsSelected()}
+              checked={
+                row.getIsSelected() ||
+                (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
+              }
               indeterminate={row.getIsSomeSelected()}
               onChange={row.getToggleSelectedHandler()}
             />{' '}

examples/svelte/expanding/src/App.svelte

@@ -156,7 +156,9 @@
                   <div>
                     <input
                       type="checkbox"
-                      checked={row.getIsSelected()}
+                      checked={row.getIsSelected() ||
+                        (row.getCanSelectSubRows() &&
+                          row.getIsAllSubRowsSelected())}
                       use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()}
                       onchange={row.getToggleSelectedHandler()}
                       class="sortable-header"

examples/vue/expanding/src/App.tsx

@@ -156,7 +156,10 @@ export default defineComponent({
           <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
             <div>
               <IndeterminateCheckbox
-                checked={row.getIsSelected()}
+                checked={
+                  row.getIsSelected() ||
+                  (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
+                }
                 indeterminate={row.getIsSomeSelected()}
                 onChange={row.getToggleSelectedHandler()}
               />{' '}

packages/table-core/src/features/row-selection/rowSelectionFeature.ts

@@ -61,9 +61,19 @@ export const rowSelectionFeature: TableFeature = {
       },
       row_getIsSomeSelected: {
         fn: (row) => row_getIsSomeSelected(row),
+        memoDeps: (row) => [
+          row.subRows,
+          row.table.atoms.rowSelection?.get(),
+          row.table.options.enableRowSelection,
+        ],
       },
       row_getIsAllSubRowsSelected: {
         fn: (row) => row_getIsAllSubRowsSelected(row),
+        memoDeps: (row) => [
+          row.subRows,
+          row.table.atoms.rowSelection?.get(),
+          row.table.options.enableRowSelection,
+        ],
       },
       row_getCanSelect: {
         fn: (row) => row_getCanSelect(row),

packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts

@@ -497,10 +497,6 @@ export function row_toggleSelected<
   table_setRowSelection(row.table, (old) => {
     value = typeof value !== 'undefined' ? value : !isSelected
 
-    if (row_getCanSelect(row) && isSelected === value) {
-      return old
-    }
-
     const rowSelection = Object.assign(makeObjectMap<true>(), old)
 
     mutateRowIsSelected(
@@ -787,13 +783,15 @@ export function isSubRowSelected<
 
   const rowSelection = row.table.atoms.rowSelection?.get() ?? {}
 
-  let allChildrenSelected = true
   let someSelected = false
+  let allChildrenSelected = true
+
+  for (let i = 0; i < row.subRows.length; i++) {
+    const subRow = row.subRows[i]!
 
-  row.subRows.forEach((subRow) => {
     // Bail out early if we know both of these
     if (someSelected && !allChildrenSelected) {
-      return
+      break
     }
 
     if (row_getCanSelect(subRow)) {
@@ -816,8 +814,7 @@ export function isSubRowSelected<
         allChildrenSelected = false
       }
     }
-  })
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   return allChildrenSelected ? 'all' : someSelected ? 'some' : false
 }