fix: skip row virtualization for small data grids

[VIBVEL47]

Description

Switching back to a dialog tab that contains an editable data grid (e.g. Table Properties → Columns) was noticeably slow — the grid appeared to "reload" its rows on every tab switch. This PR skips row virtualization for small grids so hide/show becomes a pure CSS toggle, eliminating the jank while preserving virtualization for large grids.

Root Cause

DataGridView unconditionally virtualized rows. In SchemaView dialogs, inactive tabs stay mounted but hidden via the HTML hidden attribute (display:none) in components/TabPanel.jsx:27, so a hidden tab's scroll viewport measures 0 and the virtual window collapses.

On switching back, the viewport height goes 0 → real, the virtualizer's ResizeObserver fires, and every rendered row is re-measured through a synchronous getBoundingClientRect() via a fresh measureElement ref callback (SchemaView/DataGridView/grid.jsx:143, :177). This forced-layout settle loop is visible lag on grids with complex cell editors, and at small row counts virtualization provides no benefit — it is pure overhead.

Fix

• SchemaView/DataGridView/grid.jsx:125-134 — compute an adaptive virtualiseThreshold (overridable via field.virtualiseThreshold), scaled by visible column count as min(400, max(25, round(700 / cols))), defaulting to 100 when column count is unknown; virtualize only when rows.length > virtualiseThreshold.
• SchemaView/DataGridView/grid.jsx:166-210 — branch the table body: large grids keep the virtualizer (measureElement + absolute positioning + translateY); small grids render every row in normal document flow with className='pgrt-row--static', no measureElement.
• components/PgReactTableStyled.jsx:94-96 — add &.pgrt-row--static { position: relative } so opted-out rows escape the virtualizer's absolute layout and stack in normal flow, making tab hide/show a pure CSS toggle.

Test Plan

• npx eslint -c .eslintrc.js on both changed files — clean, no errors
• Manual: open Table Properties on a table with 30+ columns → Columns tab; switch to Constraints and back several times → rows repaint instantly, no re-load/jank
• Manual: confirm large grids (rows above threshold) still scroll and virtualize correctly
• Manual: verify small-grid rows render, edit, add/remove, and reorder correctly in normal flow

[coderabbitai]

Walkthrough

DataGridView now computes a dynamic virtualisation threshold based on visible column count, switching between virtualised rendering (via virtualizer) and static rendering (mapping all rows directly) when row count is below the threshold. PgReactTableStyled adds a CSS rule for static rows using relative positioning.

Changes

Conditional Grid Virtualisation

Layer / File(s)	Summary
Virtualisation threshold and conditional rendering web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx	Introduces constants and logic to compute a dynamic threshold from column count, sets a virtualise flag based on row count, and branches grid body rendering between virtual-item rendering and static rows.map(...) rendering with a static row CSS class.
Static row styling support web/pgadmin/static/js/components/PgReactTableStyled.jsx	Adds a nested CSS rule overriding row position to relative for elements with the pgrt-row--static class.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

• Switching back to a dialog tab containing a large data grid is slow — DataGridView re-measures every row on show #10143: Implements the same DataGridView virtualization-threshold fix, including the non-virtual static row path and styling override.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: skipping row virtualization for small data grids.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx`:
- Around line 166-210: The static-row path in DataGridView still relies on the
virtualizer for index-based scrolling, which can misplace the viewport when rows
are auto-height. Update the scroll handling in DataGridHeader and
DataGridFormHeader so `scrollToIndex()` is only used when `virtualise` is
enabled; in the non-virtualized branch, use a DOM-based scroll target instead.
Keep the fix aligned with the existing `virtualise`, `virtualizer`, and
`GridRow` flow so the behavior matches the rendered mode.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d14ff283-30a4-4d36-a005-65c9ad66811e

📥 Commits

Reviewing files that changed from the base of the PR and between dfc4ef3 and 9e55300.

📒 Files selected for processing (2)

• web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx
• web/pgadmin/static/js/components/PgReactTableStyled.jsx

[Copilot]

Pull request overview

This PR improves UI responsiveness in SchemaView dialogs by disabling row virtualization for “small” editable data grids, preventing expensive re-measure/layout work when tabs are hidden/shown (e.g., Table Properties → Columns).

Changes:

• Adds an adaptive virtualiseThreshold (optionally overridable via field.virtualiseThreshold) based on visible column count, and only virtualizes when rows.length exceeds that threshold.
• Splits table-body rendering: virtualized mode uses the existing virtualizer path; non-virtualized mode renders rows in normal document flow with a static-row class.
• Updates shared table row styling so static rows are positioned normally (non-absolute) while preserving existing virtualized-row layout.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx	Introduces adaptive virtualization thresholding and a non-virtualized rendering branch for small grids.
web/pgadmin/static/js/components/PgReactTableStyled.jsx	Adds styling for pgrt-row--static to opt rows out of the absolute-position virtualized layout.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.