From 158067f66c4c4239437dcc55c79c345aa1990570 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <nguyenminhdangkhoa9@gmail.com>
Date: Thu, 4 Jan 2024 16:54:23 +0700
Subject: [PATCH 1/2] fix: fix pin icon loop mouse enter and over, crash when
 scroll after pin row in table enable row virtualization

---
 .../src/body/MRT_TableBody.tsx                     |  2 +-
 .../src/body/MRT_TableBodyCell.tsx                 |  2 +-
 .../src/buttons/MRT_RowPinButton.tsx               | 14 ++------------
 .../src/hooks/useMRT_RowVirtualizer.ts             |  9 +++++++--
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/material-react-table/src/body/MRT_TableBody.tsx b/packages/material-react-table/src/body/MRT_TableBody.tsx
index 443e2ca20..7ff846841 100644
--- a/packages/material-react-table/src/body/MRT_TableBody.tsx
+++ b/packages/material-react-table/src/body/MRT_TableBody.tsx
@@ -72,7 +72,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
 
   const rows = useMRT_Rows(table);
 
-  const rowVirtualizer = useMRT_RowVirtualizer(table);
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
 
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
index dd73b09ee..8b5a7fa12 100644
--- a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
+++ b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
@@ -318,7 +318,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
             <MRT_TableBodyCellValue cell={cell} table={table} />
           )}
           {cell.getIsGrouped() && !columnDef.GroupedCell && (
-            <> ({row.subRows?.length})</>
+            <>({row.subRows?.length})</>
           )}
         </>
       )}
diff --git a/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx b/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
index 54a9e3725..59cb846f0 100644
--- a/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
+++ b/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
@@ -1,4 +1,4 @@
-import { type MouseEvent, useState } from 'react';
+import { type MouseEvent } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -31,26 +31,16 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
 
   const isPinned = row.getIsPinned();
 
-  const [tooltipOpened, setTooltipOpened] = useState(false);
-
   const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
-    setTooltipOpened(false);
     event.stopPropagation();
     row.pin(isPinned ? false : pinningPosition);
   };
 
   return (
-    <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
-      open={tooltipOpened}
-      title={isPinned ? localization.unpin : localization.pin}
-    >
+    <Tooltip title={isPinned ? localization.unpin : localization.pin}>
       <IconButton
         aria-label={localization.pin}
         onClick={handleTogglePin}
-        onMouseEnter={() => setTooltipOpened(true)}
-        onMouseLeave={() => setTooltipOpened(false)}
         size="small"
         {...rest}
         sx={(theme) => ({
diff --git a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts
index 5945b2b04..0b40bc8dd 100644
--- a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts
+++ b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts
@@ -8,7 +8,11 @@ import {
   extraIndexRangeExtractor,
   parseFromValuesOrFunc,
 } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 export const useMRT_RowVirtualizer = <
   TData extends MRT_RowData,
@@ -16,6 +20,7 @@ export const useMRT_RowVirtualizer = <
   TItemElement extends Element = HTMLTableRowElement,
 >(
   table: MRT_TableInstance<TData>,
+  rows?: MRT_Row<TData>[],
 ): Virtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     getRowModel,
@@ -35,7 +40,7 @@ export const useMRT_RowVirtualizer = <
 
   const rowVirtualizer = enableRowVirtualization
     ? (useVirtualizer({
-        count: getRowModel().rows.length,
+        count: rows?.length ?? getRowModel().rows.length,
         estimateSize: () =>
           density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
         getScrollElement: () => tableContainerRef.current,

From 3a6378790faa72ea0d177a534a8beb682aeb42bb Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Thu, 4 Jan 2024 09:33:25 -0600
Subject: [PATCH 2/2] revert some

---
 .../src/body/MRT_TableBodyCell.tsx                 |  2 +-
 .../src/buttons/MRT_RowPinButton.tsx               | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
index 8b5a7fa12..dd73b09ee 100644
--- a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
+++ b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
@@ -318,7 +318,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
             <MRT_TableBodyCellValue cell={cell} table={table} />
           )}
           {cell.getIsGrouped() && !columnDef.GroupedCell && (
-            <>({row.subRows?.length})</>
+            <> ({row.subRows?.length})</>
           )}
         </>
       )}
diff --git a/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx b/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
index 59cb846f0..54a9e3725 100644
--- a/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
+++ b/packages/material-react-table/src/buttons/MRT_RowPinButton.tsx
@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -31,16 +31,26 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
 
   const isPinned = row.getIsPinned();
 
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
   const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
     event.stopPropagation();
     row.pin(isPinned ? false : pinningPosition);
   };
 
   return (
-    <Tooltip title={isPinned ? localization.unpin : localization.pin}>
+    <Tooltip
+      enterDelay={1000}
+      enterNextDelay={1000}
+      open={tooltipOpened}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
       <IconButton
         aria-label={localization.pin}
         onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
         size="small"
         {...rest}
         sx={(theme) => ({