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

Canonical: https://grid.syidax.com/docs/features/virtualization/

<a id="understand"></a>

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

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

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

<a id="example-2"></a>

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

<a id="example-3"></a>

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

<a id="pitfalls"></a>

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

<a id="related-api"></a>

## APIs used by this feature

- [height](https://grid.syidax.com/docs/options/height.md) — Sets the Grid container height as a number or CSS length. Account for virtual scrolling and bottom tools.
- [rowHeight](https://grid.syidax.com/docs/options/rowHeight.md) — Default row height in pixels. Choose a size suitable for text, cell editors, and touch targets.
- [rowHeightFn](https://grid.syidax.com/docs/options/rowHeightFn.md) — Calculates individual row heights from row indices and data. Call refreshRowHeights when relevant data changes.
- [virtualScroll](https://grid.syidax.com/docs/options/virtualScroll.md) — Enables vertical virtualization, rendering rows near the viewport. Does not reduce total data downloads.
- [virtualizeColumns](https://grid.syidax.com/docs/options/virtualizeColumns.md) — Enables horizontal virtualization, rendering columns near the viewport.
- [wrapText](https://grid.syidax.com/docs/columns/wrapText.md) — Allows cell text wrapping. Content may clip without sufficient height.
- [autoHeight](https://grid.syidax.com/docs/columns/autoHeight.md) — Calculates row height from cell content. Review costs with virtualization and large data sets.
- [refreshRowHeights](https://grid.syidax.com/docs/methods/refreshRowHeights.md) — Recalculates row heights after content or height callback inputs change.
- [scrollToTop](https://grid.syidax.com/docs/methods/scrollToTop.md) — Scrolls the Grid to the top.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/virtualization) — The guide describes which interactions are available to try.