release v2.11.1 - batch select bug fix

Author: KevinVandy

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,11 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.11.1 - 2024-02-05
+
+- Fixed bug where new batch row selection feature did not account for `manualPagination`
+- Fixed bug where parent selected checkbox should not be indeterminate when the row itself is selected
+
 #### Version 2.11.0 - 2024-02-05
 
 - Added new `enableBatchRowSelection` table option that is enabled by default that allows users to select multiple rows at once by holding down the shift key and clicking on a row
@@ -235,8 +240,8 @@ See the old [V1 Changelog](https://v1.material-react-table.com/changelog)
 
 ## Roadmap
 
-### Version 2 Roadmap (2023)
+### Version 2 Roadmap (2024)
 
-Material React Table V2 was a big release months in the making that mostly focussed on the new `useMaterialReactTable` hook and paradigms. New features will be added and many bug fixes around virtualization compatibility with advanced features will be prioritized first.
+Most large 
 
 A lighter weight `useMaterialReactTableLight` hook is also being considered in the near future that will be a bit more bare-bones and tree-shakable. All features will be opt-in and will not be enabled by default.

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.0",
+  "version": "2.11.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -129,8 +129,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       ) : (
         <Checkbox
           indeterminate={
-            selectAll
-              ? table.getIsSomeRowsSelected() && !allRowsSelected
+            !isChecked && selectAll
+              ? table.getIsSomeRowsSelected()
               : row?.getIsSomeSelected() && row.getCanSelectSubRows()
           }
           {...commonProps}

packages/material-react-table/src/utils/row.utils.ts

@@ -152,6 +152,7 @@ export const getMRT_RowSelectionHandler =
       options: {
         enableBatchRowSelection,
         enableRowPinning,
+        manualPagination,
         rowPinningDisplayMode,
       },
       refs: { lastSelectedRowId: lastSelectedRowId },
@@ -160,12 +161,14 @@ export const getMRT_RowSelectionHandler =
       pagination: { pageIndex, pageSize },
     } = getState();
 
-    const isChecked = getIsRowSelected({ row, table });
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+
+    const isCurrentRowChecked = getIsRowSelected({ row, table });
 
     const isStickySelection =
       enableRowPinning && rowPinningDisplayMode?.includes('select');
 
-    // toggle selected of this row
+    // toggle selection of this row
     row.getToggleSelectedHandler()(event);
 
     // if shift key is pressed, select all rows between last selected and this one
@@ -175,24 +178,34 @@ export const getMRT_RowSelectionHandler =
       lastSelectedRowId.current !== null
     ) {
       const rows = getMRT_Rows(table, undefined, true);
+
       const lastIndex = rows.findIndex(
         (r) => r.id === lastSelectedRowId.current,
       );
+
       if (lastIndex !== -1) {
-        const currentIndex = staticRowIndex + pageSize * pageIndex;
+        const isLastIndexChecked = getIsRowSelected({
+          row: rows?.[lastIndex],
+          table,
+        });
+
+        const currentIndex = staticRowIndex + paginationOffset;
         const [start, end] =
           lastIndex < currentIndex
             ? [lastIndex, currentIndex]
             : [currentIndex, lastIndex];
-        if (
-          rows[currentIndex].getIsSelected() !== rows[lastIndex].getIsSelected()
-        ) {
+
+        // toggle selection of all rows between last selected and this one
+        // but only if the last selected row is not the same as the current one
+        if (isCurrentRowChecked !== isLastIndexChecked) {
           for (let i = start; i <= end; i++) {
-            rows[i].toggleSelected(!isChecked);
+            rows[i].toggleSelected(!isCurrentRowChecked);
           }
         }
       }
     }
+
+    // record the last selected row id
     lastSelectedRowId.current = row.id;
 
     // if all sub rows were selected, unselect them
@@ -202,7 +215,7 @@ export const getMRT_RowSelectionHandler =
 
     if (isStickySelection) {
       row.pin(
-        !row.getIsPinned() && isChecked
+        !row.getIsPinned() && isCurrentRowChecked
           ? rowPinningDisplayMode?.includes('bottom')
             ? 'bottom'
             : 'top'