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

Fixes : #10143

Summary by CodeRabbit

• Performance Improvements
  • Improved data grid rendering by dynamically selecting virtualization based on dataset size and visible columns.
  • Added support for configuring virtualization thresholds.
  • Smaller datasets now render with simpler static row styling for improved reliability and responsiveness.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 50114b04-ed49-4b80-a482-b17dbfecf2eb

📥 Commits

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

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

Walkthrough

DataGridView now selects virtualised or static row rendering from visible column count, row count, and an optional field override. PgReactTableStyled positions static rows relatively.

Changes

Conditional Grid Virtualisation

Layer / File(s)	Summary
Virtualisation threshold and row rendering web/pgadmin/static/js/SchemaView/DataGridView/grid.jsx, web/pgadmin/static/js/components/PgReactTableStyled.jsx	DataGridView computes a bounded threshold, switches rendering paths, and marks direct rows as static. PgReactTableStyled sets static rows to relative positioning.

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: Adds the conditional virtualisation and static-row positioning changes described by this PR.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: disabling row virtualization for small data grids.
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.

✨ 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.

[asheshv]

Validate field.virtualiseThreshold before use

const VIRTUALISE_CELL_BUDGET = 700;
const DEFAULT_VIRTUALISE_THRESHOLD = 100;
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;

field.virtualiseThreshold is only nullish-coalesced, not range/type-checked. Since it's schema-author-supplied (not user input), this isn't a security issue, but a bad value silently defeats the feature rather than erroring loudly, which makes it easy to miss in review:

• field.virtualiseThreshold = 0 → rows.length > 0 is true almost always → grid always virtualizes, even a 3-row grid, which is the opposite of the intent (virtualization is meant to kick in only past the computed/large threshold).
• field.virtualiseThreshold = -1 → same effect, virtualization always on, plus a negative number reads as a config bug rather than intent.
• field.virtualiseThreshold = NaN (e.g. a typo'd non-numeric schema field, virtualiseThreshold: parseInt(someBadString)) → rows.length > NaN is always false → virtualization is permanently disabled for that grid, silently, no matter how many rows it has. This is the worse failure mode since it reintroduces the perf problem this PR is fixing, with no error or warning.

Suggest guarding it:

const rawThreshold = field.virtualiseThreshold;
const virtualiseThreshold =
  (typeof rawThreshold === 'number' && rawThreshold > 0)
    ? rawThreshold
    : (visibleColCount > 0
      ? Math.min(400, Math.max(25, Math.round(VIRTUALISE_CELL_BUDGET / visibleColCount)))
      : DEFAULT_VIRTUALISE_THRESHOLD);

That way an invalid/omitted virtualiseThreshold always falls back to the computed default instead of one of the two silent-failure modes above.

Separately (non-blocking, FYI): useVirtualizer is still called unconditionally even when virtualise ends up false — harmless (unused virtualizer object), just noting it's not free.