Virtual Rendering Disabled (virtualX / virtualY set to false)

When virtualX or virtualY is set to false, pqGrid disables its virtual rendering behavior for that axis.

• virtualX: false — All columns are rendered in the DOM at once, regardless of whether they are currently visible in the horizontal scroll area.
• virtualY: false — All rows are rendered in the DOM at once, regardless of whether they are currently visible in the vertical scroll area.

This can significantly increase DOM size and memory usage, especially for large datasets, because the grid no longer optimizes rendering for off-screen rows or columns.

Disabling virtual rendering is generally only recommended for small datasets or special cases where custom rendering logic requires all rows/columns to be present in the DOM simultaneously.

Default Virtual Rendering – Efficient by Design

By default, pqGrid uses virtual rendering to keep the DOM lean and responsive. Instead of rendering every cell in a large dataset, it creates only those rows and columns that are visible inside the grid’s own scrollable viewport.

This approach dramatically improves performance for large datasets by:

• Reducing the number of DOM elements at any given time
• Speeding up initial grid rendering
• Keeping scrolling smooth and responsive
• Lowering browser memory usage

Limitations of Default Virtual Rendering

• pqGrid’s virtual rendering normally cares only about the grid’s own scrollable viewport. And this works great in most of the cases.
• However if you set height: 'flex' and have ~10,000 records, the grid grows to match all rows — its viewport is basically the whole list.
• In that case, the "viewport" is huge, so all cells in that giant grid get rendered at once — virtual rendering no longer helps much.
• This can blow up DOM size and even crash the browser.

• Changes the rule: the grid now also intersects its rendering area with the browser’s visible window.
• Meaning: even if the grid is 50,000 px tall, it will still only render rows and cells that are both:
  • In the grid’s scrollable area, and
  • Currently visible in the browser window.
• As you scroll the page (not just the grid), rows enter/leave the DOM.
• This keeps DOM size small, even with height: 'flex' and a huge dataset.
• Result: fast page load + smooth scrolling without browser crashes.

In short

• virtualX / virtualY = false: Draw all rows or columns for that axis, regardless of visibility.
• Virtual Rendering: “Draw only what’s visible inside the grid’s own viewport.” Works fine in most of the cases.
• virtualWin: “Draw only what’s visible inside the grid’s viewport and inside the browser window.” Useful only if the grid viewport is very large as in this example.