Large data sets
Reduce DOM size by rendering rows around the visible area.
Options
Changes below update the Grid and code immediately.
This example starts with 10,000 rows and pagination disabled. Check the total above the table.
View code
Sample data included in the code · 6 rows
Usage guide
#Render mainly the visible area to support scrolling through large row counts.
Try it yourself
- Inspect data volume
This example starts with 10,000 rows and pagination disabled. Check the total above the table.
- Scroll inside the table
Scroll within the Grid rather than the whole page. Orders matching the current position appear.
- Compare row counts
Change Sample row count to 120 or 1,000. Reset returns this menu to its 10,000-row example.
Browse long lists without creating a screen element for every row at once.
Changing sample row count creates new data. Virtualization reduces rendering cost; it does not replace data downloads or server search.
Useful terms
- Virtualization
- Creating and reusing screen elements around the visible area.
- DOM
- The element structure managed by the browser to display the page.
API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
string | numberDefault: undefined | Outer height — number is treated as px, strings pass through (e.g. `"60vh"`). | |
| rowHeight | numberDefault: 32 | Uniform row height in px. `rowHeightFn` overrides this when supplied. |
Other properties3
| Attribute / Property | Type / Default | Description |
|---|---|---|
| rowHeightFn | (index: number, row: GridData) => numberDefault: undefined | Optional per-row height function for variable-height virtualization. |
| virtualScroll | booleanDefault: true | Enable wrapper-level row virtualization in columnDefs mode. |
| virtualizeColumns | booleanDefault: undefined | window the scrolling middle columns: only the columns intersecting the viewport (plus overscan) render; leading / trailing spacers keep the scrollbar truthful. Pinned columns always render. Eligibility: every unpinned column needs a concrete pixel width (`width:` or a live resize) — any flex-sized middle column silently disables windowing (geometry is unknowable pre-layout). |
Methods2
| Method / Arguments | Return type | Description |
|---|---|---|
Promise<void> | discard all measured auto-height row heights and remeasure on the next render (ag-grid `resetRowHeights` parity). Call after mutating content that changes wrapping (e.g. an external font/CSS swap) when the automatic data/column/viewport-width invalidation cannot see the change. | |
Promise<void> | Scroll the column-defs viewport to the top. |
ColumnDef2
| ColumnDef | Type / Required | Description |
|---|---|---|
booleanOptional | let this column's cell text wrap onto multiple lines instead of truncating with an ellipsis (ag-grid `wrapText`). On its own the cell wraps *within* the fixed row height (overflow clipped); pair with to grow the row to fit. | |
booleanOptional | size the row to fit this column's (wrapped) content instead of the uniform `row-height` (ag-grid `autoHeight`). When any visible column sets this, the grid measures each rendered row after paint and virtualizes with the measured heights (see ). The tallest auto-height cell in a row wins. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.