From 00202acd1168d68cb9e275fcfefa2df7ec4a194b Mon Sep 17 00:00:00 2001
From: Mathieu-COSYNS <64072917+Mathieu-COSYNS@users.noreply.github.com>
Date: Thu, 28 Aug 2025 10:33:36 +0200
Subject: [PATCH] fix: rows and cells don't have a stable keys if the row is
 move to another index

close #1459
---
 .../src/components/body/MRT_TableBody.tsx         |  5 ++---
 .../src/components/body/MRT_TableBodyRow.tsx      |  5 ++---
 .../src/hooks/useMRT_TableInstance.ts             | 15 +++++++++++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/material-react-table/src/components/body/MRT_TableBody.tsx b/packages/material-react-table/src/components/body/MRT_TableBody.tsx
index 1f6edae72..e53860d4e 100644
--- a/packages/material-react-table/src/components/body/MRT_TableBody.tsx
+++ b/packages/material-react-table/src/components/body/MRT_TableBody.tsx
@@ -175,11 +175,10 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                     ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
                 };
-                const key = `${row.id}-${row.index}`;
                 return memoMode === 'rows' ? (
-                  <Memo_MRT_TableBodyRow key={key} {...props} />
+                  <Memo_MRT_TableBodyRow key={row.id} {...props} />
                 ) : (
-                  <MRT_TableBodyRow key={key} {...props} />
+                  <MRT_TableBodyRow key={row.id} {...props} />
                 );
               })}
             </>
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
index 5d42b84c6..2aa80aec0 100644
--- a/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
+++ b/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
@@ -248,7 +248,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               staticRowIndex,
               table,
             };
-            const key = `${cell.id}-${staticRowIndex}`;
             return cell ? (
               memoMode === 'cells' &&
               cell.column.columnDef.columnDefType === 'data' &&
@@ -256,9 +255,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               !draggingRow &&
               editingCell?.id !== cell.id &&
               editingRow?.id !== row.id ? (
-                <Memo_MRT_TableBodyCell key={key} {...props} />
+                <Memo_MRT_TableBodyCell key={cell.id} {...props} />
               ) : (
-                <MRT_TableBodyCell key={key} {...props} />
+                <MRT_TableBodyCell key={cell.id} {...props} />
               )
             ) : null;
           },
diff --git a/packages/material-react-table/src/hooks/useMRT_TableInstance.ts b/packages/material-react-table/src/hooks/useMRT_TableInstance.ts
index be0939ec5..64aff22e9 100644
--- a/packages/material-react-table/src/hooks/useMRT_TableInstance.ts
+++ b/packages/material-react-table/src/hooks/useMRT_TableInstance.ts
@@ -229,9 +229,11 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
             ...Array(
               Math.min(statefulTableOptions.state.pagination.pageSize, 20),
             ).fill(null),
-          ].map(() =>
+          ].map((_, index) =>
             Object.assign(
-              {},
+              {
+                'mrt-skeleton-id': `skeleton-${index}`,
+              },
               ...getAllLeafColumnDefs(statefulTableOptions.columns).map(
                 (col) => ({
                   [getColumnId(col)]: null,
@@ -247,6 +249,15 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     ],
   );
 
+  statefulTableOptions.getRowId = useMemo(() => {
+    const getRowId = statefulTableOptions.getRowId;
+    return (originalRow, index, parentRow) => {
+      if ('mrt-skeleton-id' in originalRow)
+        return originalRow['mrt-skeleton-id'];
+      return getRowId?.(originalRow, index, parentRow);
+    };
+  }, [statefulTableOptions.getRowId]);
+
   //@ts-expect-error
   const table = useReactTable({
     onColumnOrderChange,