From 14ac0636122e91a2cee3d359378ff1e5002d7642 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Wed, 2 Apr 2025 13:17:41 +0530
Subject: [PATCH] fix: Fixed issue on rowVirtualizer. When the rows are
 filtered, UI is getting disturbed

---
 .../_components/TableData/_components/TableRow.jsx  |  2 +-
 .../AppBuilder/Widgets/NewTable/_hooks/useTable.js  | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
index 77d759ad7d..36d2d84929 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
@@ -27,7 +27,7 @@ export const TableRow = ({
 
   return (
     <tr
-      key={row.id}
+      key={row.uniqueId}
       ref={measureElement}
       data-index={virtualRow.index}
       style={{
diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
index b31c258cf1..012c3d2d73 100644
--- a/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
+++ b/frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
@@ -7,6 +7,7 @@ import {
   getFilteredRowModel,
 } from '@tanstack/react-table';
 import { applyFilters } from '../_components/Header/_components/Filter/filterUtils';
+import { v4 as uuidv4 } from 'uuid';
 
 export function useTable({
   data,
@@ -32,7 +33,15 @@ export function useTable({
 
   // When the columns change, the data is not getting re-rendered. So, we need to create a new data array
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const newData = useMemo(() => [...data], [data, columns]);
+  const newData = useMemo(
+    () =>
+      data.map((row) => ({
+        ...row,
+        uniqueId: row.uniqueId || uuidv4(), // Use existing ID if available
+      })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, columns]
+  );
 
   const table = useReactTable({
     data: newData,
@@ -44,7 +53,7 @@ export function useTable({
     getFilteredRowModel: getFilteredRowModel(),
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
-    getRowId: (row) => row.uuid,
+    getRowId: (row) => row.uniqueId,
     enableRowSelection: true,
     enableMultiRowSelection: showBulkSelector,
     state: {