syidaxgrid
Home Pricing Settings

GRID FEATURE

Large data sets

Virtualization renders only row and column DOM needed near the viewport. It is separate from row models that fetch only part of the data from a server.

Markdown source Features

How it works and when to use it

Vertical virtualization works well with a bounded Grid height. Consider column virtualization for wide tables, while also checking custom-cell rendering cost and the number of pinned columns.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Display many rows within a fixed height

Limit the rendered range independently of data loading.

javascript
grid.height = 520;
grid.virtualScroll = true;

Verify the result: Rows at the current position appear as you scroll. Not all rows exist in the DOM at once.

Example 2. Reports with many columns

Explicitly enable horizontal column virtualization.

javascript
grid.virtualizeColumns = true;

Verify the result: Reduce offscreen rendering cost in tables with hundreds of columns. Verify it alongside column movement, pinning, and resizing.

Example 3. Separate performance bottlenecks

Compare plain-text cells with complex renderers using the same data. Measure request, parsing, sorting, and scroll-frame times separately.

Verify the result: Virtualization does not eliminate data downloads or expensive formatter calculations. Adjust the row model, processing engine, and renderers to address the bottleneck.

Combining features and troubleshooting

A table initialized in a hidden tab may have different container dimensions. Check its height and layout when actually visible.

Do not calculate the total dataset size from DOM row counts. Use data APIs, displayed-row APIs, or the server's total count.

Related reading