fix(selection): update logic to fix selection of disabled rows

examples/react/row-selection/src/main.tsx

@@ -30,7 +30,7 @@ function App() {
           <IndeterminateCheckbox
             {...{
               checked: table.getIsAllRowsSelected(),
-              indeterminate: table.getIsSomeRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(true),
               onChange: table.getToggleAllRowsSelectedHandler(),
             }}
           />
@@ -110,8 +110,8 @@ function App() {
     state: {
       rowSelection,
     },
-    enableRowSelection: true, //enable row selection for all rows
-    // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
+    // enableRowSelection: true, //enable row selection for all rows
+    enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -180,7 +180,7 @@ function App() {
               <IndeterminateCheckbox
                 {...{
                   checked: table.getIsAllPageRowsSelected(),
-                  indeterminate: table.getIsSomePageRowsSelected(),
+                  indeterminate: table.getIsSomePageRowsSelected(true),
                   onChange: table.getToggleAllPageRowsSelectedHandler(),
                 }}
               />
@@ -344,9 +344,9 @@ function IndeterminateCheckbox({
 
   React.useEffect(() => {
     if (typeof indeterminate === 'boolean') {
-      ref.current.indeterminate = !rest.checked && indeterminate
+      ref.current.indeterminate = indeterminate
     }
-  }, [ref, indeterminate])
+  }, [ref, indeterminate, rest.checked])
 
   return (
     <input

packages/table-core/src/features/RowSelection.ts

@@ -1,5 +1,5 @@
 import { TableFeature } from '../core/table'
-import { OnChangeFn, Table, Row, RowModel, Updater, RowData } from '../types'
+import { OnChangeFn, Row, RowData, RowModel, Table, Updater } from '../types'
 import { getMemoOptions, makeStateUpdater, memo } from '../utils'
 
 export type RowSelectionState = Record<string, boolean>
@@ -118,7 +118,7 @@ export interface RowSelectionInstance<TData extends RowData> {
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getisallpagerowsselected)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
-  getIsAllPageRowsSelected: () => boolean
+  getIsAllPageRowsSelected: (ignoreCanSelect?: boolean) => boolean
   /**
    * Returns whether or not all rows in the table are selected.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getisallrowsselected)
@@ -130,7 +130,7 @@ export interface RowSelectionInstance<TData extends RowData> {
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getissomepagerowsselected)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
-  getIsSomePageRowsSelected: () => boolean
+  getIsSomePageRowsSelected: (ignoreCanSelect?: boolean) => boolean
   /**
    * Returns whether or not any rows in the table are selected.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#getissomerowsselected)
@@ -178,7 +178,10 @@ export interface RowSelectionInstance<TData extends RowData> {
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallpagerowsselected)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
-  toggleAllPageRowsSelected: (value?: boolean) => void
+  toggleAllPageRowsSelected: (
+    value?: boolean,
+    ignoreCanSelect?: boolean
+  ) => void
   /**
    * Selects/deselects all rows in the table.
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#toggleallrowsselected)
@@ -238,22 +241,24 @@ export const RowSelection: TableFeature = {
           })
         } else {
           preGroupedFlatRows.forEach(row => {
+            if (!row.getCanSelect()) {
+              return
+            }
             delete rowSelection[row.id]
           })
         }
 
         return rowSelection
       })
     }
-    table.toggleAllPageRowsSelected = value =>
+    table.toggleAllPageRowsSelected = (value, ignoreCanSelect) =>
       table.setRowSelection(old => {
         const resolvedValue =
           typeof value !== 'undefined'
             ? value
-            : !table.getIsAllPageRowsSelected()
+            : !table.getIsAllPageRowsSelected(ignoreCanSelect)
 
         const rowSelection: RowSelectionState = { ...old }
-
         table.getRowModel().rows.forEach(row => {
           mutateRowIsSelected(rowSelection, row.id, resolvedValue, true, table)
         })
@@ -405,17 +410,20 @@ export const RowSelection: TableFeature = {
       return isAllRowsSelected
     }
 
-    table.getIsAllPageRowsSelected = () => {
-      const paginationFlatRows = table
-        .getPaginationRowModel()
-        .flatRows.filter(row => row.getCanSelect())
+    table.getIsAllPageRowsSelected = (ignoreCanSelect?: boolean) => {
+      const paginationFlatRows = table.getPaginationRowModel().flatRows
+
+      const filterPaginationFlatRows = ignoreCanSelect
+        ? paginationFlatRows
+        : paginationFlatRows.filter(row => row.getCanSelect())
+
       const { rowSelection } = table.getState()
 
-      let isAllPageRowsSelected = !!paginationFlatRows.length
+      let isAllPageRowsSelected = !!filterPaginationFlatRows.length
 
       if (
         isAllPageRowsSelected &&
-        paginationFlatRows.some(row => !rowSelection[row.id])
+        filterPaginationFlatRows.some(row => !rowSelection[row.id])
       ) {
         isAllPageRowsSelected = false
       }
@@ -433,13 +441,25 @@ export const RowSelection: TableFeature = {
       )
     }
 
-    table.getIsSomePageRowsSelected = () => {
+    table.getIsSomePageRowsSelected = (ignoreCanSelect?: boolean) => {
       const paginationFlatRows = table.getPaginationRowModel().flatRows
-      return table.getIsAllPageRowsSelected()
+
+      const getIsSomeSelectedByCondition = () => {
+        return ignoreCanSelect
+          ? paginationFlatRows.some(
+              d => d.getIsSelected() || d.getIsSomeSelected()
+            ) &&
+              paginationFlatRows.some(
+                d => !d.getIsSelected() || !d.getIsSomeSelected()
+              )
+          : paginationFlatRows
+              .filter(row => row.getCanSelect())
+              .some(d => d.getIsSelected() || d.getIsSomeSelected())
+      }
+
+      return table.getIsAllPageRowsSelected(ignoreCanSelect)
         ? false
-        : paginationFlatRows
-            .filter(row => row.getCanSelect())
-            .some(d => d.getIsSelected() || d.getIsSomeSelected())
+        : getIsSomeSelectedByCondition()
     }
 
     table.getToggleAllRowsSelectedHandler = () => {
@@ -552,14 +572,16 @@ const mutateRowIsSelected = <TData extends RowData>(
   //   !isGrouped ||
   //   (isGrouped && table.options.enableGroupingRowSelection)
   // ) {
+
+  const canSelect = row.getCanSelect()
   if (value) {
     if (!row.getCanMultiSelect()) {
       Object.keys(selectedRowIds).forEach(key => delete selectedRowIds[key])
     }
-    if (row.getCanSelect()) {
+    if (canSelect) {
       selectedRowIds[id] = true
     }
-  } else {
+  } else if (canSelect) {
     delete selectedRowIds[id]
   }
   // }