From 9e553002a2cf83e22897a812daad4823dfb9064b Mon Sep 17 00:00:00 2001
From: VIBVEL47 <161462689+VIBVEL47@users.noreply.github.com>
Date: Wed, 8 Jul 2026 08:47:06 +0530
Subject: [PATCH] fix: skip row virtualization for small data grids

---
 .../js/SchemaView/DataGridView/grid.jsx       | 68 +++++++++++++------
 .../js/components/PgReactTableStyled.jsx      |  3 +
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx
index 8366cd44ccd..cea19110d8a 100644
--- a/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx
+++ b/web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx
@@ -122,6 +122,17 @@ export default function DataGridView({
     )
   ).includes(true);
 
+  const VIRTUALISE_CELL_BUDGET = 700; // Number of cells to render
+  const DEFAULT_VIRTUALISE_THRESHOLD = 100; // Number of rows to render
+  const visibleColCount = table.getVisibleLeafColumns().length;
+  const virtualiseThreshold =
+    field.virtualiseThreshold ??
+    (visibleColCount > 0
+      ? Math.min(400, Math.max(25,
+        Math.round(VIRTUALISE_CELL_BUDGET / visibleColCount)))
+      : DEFAULT_VIRTUALISE_THRESHOLD);
+  const virtualise = rows.length > virtualiseThreshold;
+
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => tableEleRef.current,
@@ -152,32 +163,51 @@ export default function DataGridView({
               ref={tableEleRef} table={table} data-test="data-grid-view"
               tableClassName='DataGridView-table'>
               <PgReactTableHeader table={table} />
-              <PgReactTableBody style={{
-                height: virtualizer.getTotalSize() + 'px'
-              }}>
-                {
-                  virtualizer.getVirtualItems().map((virtualRow) => {
-                    const row = rows[virtualRow.index];
-                    return (
+              {virtualise ?
+                <PgReactTableBody style={{
+                  height: virtualizer.getTotalSize() + 'px'
+                }}>
+                  {
+                    virtualizer.getVirtualItems().map((virtualRow) => {
+                      const row = rows[virtualRow.index];
+                      return (
+                        <PgReactTableRow
+                          key={row.id}
+                          data-index={virtualRow.index}
+                          ref={node => virtualizer.measureElement(node)}
+                          style={{
+                            // This should always be a `style` as it changes on
+                            // scroll.
+                            transform: `translateY(${virtualRow.start}px)`,
+                          }}
+                        >
+                          <GridRow
+                            rowId={virtualRow.index} isResizing={isResizing}
+                            row={row}
+                          />
+                        </PgReactTableRow>
+                      );
+                    })
+                  }
+                </PgReactTableBody>
+                :
+                <PgReactTableBody>
+                  {
+                    rows.map((row, index) => (
                       <PgReactTableRow
                         key={row.id}
-                        data-index={virtualRow.index}
-                        ref={node => virtualizer.measureElement(node)}
-                        style={{
-                          // This should always be a `style` as it changes on
-                          // scroll.
-                          transform: `translateY(${virtualRow.start}px)`,
-                        }}
+                        data-index={index}
+                        className='pgrt-row--static'
                       >
                         <GridRow
-                          rowId={virtualRow.index} isResizing={isResizing}
+                          rowId={index} isResizing={isResizing}
                           row={row}
                         />
                       </PgReactTableRow>
-                    );
-                  })
-                }
-              </PgReactTableBody>
+                    ))
+                  }
+                </PgReactTableBody>
+              }
             </PgReactTable>
           </DndProvider>
         </Box>
diff --git a/web/pgadmin/static/js/components/PgReactTableStyled.jsx b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
index 6e18e1b3357..3690a824214 100644
--- a/web/pgadmin/static/js/components/PgReactTableStyled.jsx
+++ b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
@@ -91,6 +91,9 @@ const StyledDiv = styled('div')(({theme})=>({
         flexDirection: 'column',
         position: 'absolute',
         width: '100%',
+        '&.pgrt-row--static': {
+          position: 'relative',
+        },
 
         '& .pgrt-row-content': {
           display: 'flex',