Scrolling Configuration in React Data Grid

Scrolling configuration in the React Data Grid provides navigation through content that extends beyond the visible grid area. Scrollbars automatically appear when content exceeds the grid dimensions defined by the height and width properties.

Scrollbar behavior:

• Vertical scrollbar: Appears when total row height exceeds the grid element height.
• Horizontal scrollbar: Appears when total column width exceeds the grid element width.
• Default dimensions: Both height and width default to "auto".

Width and height configuration

Data Grid dimension settings provide precise control over scrollbar visibility and overall grid size. Exact dimensions are defined by assigning pixel values to the grid’s width and height properties.

In this demo, a slider component dynamically adjusts the grid’s dimensions. The height ranges from "200px" to "600px" using pixel values in the grid height property, while the width shifts from "50%" to "100%" using percentage values in the grid width property. This configuration ensures scrollbars appear when content overflows the defined grid dimensions.

Responsive with parent container

Responsive grid sizing allows the grid to automatically adjust to the available space by setting its width and height to "100%", ensuring it fully occupies the parent container. For the grid’s height to scale correctly, the parent container must have a defined height. This explicit setting enables the grid to calculate dimensions accurately and maintain a consistent, responsive layout.

<div style={{ height: '400px' }}>
  <Grid dataSource={data} height="100%">
    <Columns>
      <Column field="id" headerText="ID" width="80" />
      <Column field="name" headerText="Name" width="120" />
    </Columns>
  </Grid>
</div>

Explicit height on the parent container is mandatory when grid height is "100%" to ensure proper responsive behavior.

Scroll modes

Scroll mode determines how the grid manages scrolling and data loading behavior. It is configured through the scrollMode property of VirtualizationSettings, which accepts ScrollMode enum values. The default scroll mode is ScrollMode.Auto, which provides automatic DOM virtualization for local datasets without additional configuration.

Auto scroll mode (default)

Auto scroll mode provides standard scrolling with DOM virtualization based on dataset size and content. This mode improves performance for typical grids with local data without requiring additional configuration or server-side data loading setup.

Virtual scroll mode

Virtual scroll mode enables server-side data loading and handles extremely large datasets by loading only the visible rows. This mode is required for datasets exceeding 100,000 rows or when implementing server-side pagination. For detailed configuration and advanced server-side virtualization scenarios, refer to the Virtual scroll documentation.

DOM virtualization

DOM virtualization is a rendering technique that improves performance by displaying only the visible portion of data in the viewport, plus a configurable buffer zone. The Syncfusion® React Data Grid implements virtualization to handle datasets ranging from thousands to millions of rows while maintaining smooth grid interactions.

Virtualization is enabled by default with ScrollMode.Auto, providing automatic row and column virtualization for responsive performance without server-side data loading configuration.

Rendering every row and column in the DOM creates performance and memory challenges. Consider a dataset with 100,000 rows and 50 columns: without virtualization, the grid would create 5 million DOM elements. Modern browsers impose limits on DOM div heights (approximately 17.5–33.5 million pixels depending on the browser), constraining the maximum number of rows displayable at once. Virtualization addresses these constraints by rendering only cells within the current viewport, plus configurable buffer rows and columns. Memory and processing requirements remain constant regardless of dataset size since only viewport and buffer cells render at any given time.

Virtualization types and configuration

React Data Grid supports three virtualization strategies configured via the type property of VirtualizationSettings. Each virtualization type matches specific dataset characteristics and performance requirements.

Row virtualization

Row virtualization configuration renders only rows visible in the viewport, plus configurable buffer rows above and below, while all columns remain in the DOM at all times. This approach improves vertical scrolling while keeping all column headers visible and sticky.

Row virtualization is ideal for datasets with many rows (10,000+) but manageable column counts (fewer than 30). It simplifies horizontal scrolling since no columns are hidden, and ensures all columns remain accessible.

Set type to VirtualDomType.Row to enable row virtualization:

const [virtualizationSettings] = useState({ type: VirtualDomType.Row });

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Row virtualization can be disabled while keeping column virtualization enabled by setting type to VirtualDomType.Column or by setting the height property to its default value of "auto". This renders all rows to the DOM while virtualizing columns. For details on controlling row rendering when row virtualization is disabled, refer to Limit maximum rows when virtualization is disabled.

Column virtualization

Column virtualization configuration renders only columns visible during horizontal scrolling, while all rows remain in the DOM at all times. This approach improves horizontal scrolling but requires manageable row counts since all rows must fit in memory.

Column virtualization is ideal for datasets with many columns (50+) but manageable row counts (fewer than 5,000). It reduces rendering complexity with fewer columns rendered at once, and is useful when vertical scrolling performance is less critical than horizontal scrolling.

Set type to VirtualDomType.Column to enable column virtualization:

const [virtualizationSettings] = useState({ type: VirtualDomType.Column });

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

• Column virtualization can be disabled while keeping row virtualization enabled by setting type to VirtualDomType.Row instead. This renders all columns to the DOM while virtualizing rows.
• Column virtualization does not support "auto" column width values. When column virtualization is enabled, columns without explicit pixel width values default to "100px" width for proper virtualization calculations.

Row and column virtualization

Row and column virtualization configuration virtualizes both rows during vertical scrolling and columns during horizontal scrolling, rendering only viewport cells plus buffer cells in both dimensions. This approach improves memory usage and rendering performance across both axes with equal smoothness in both directions.

Row and column virtualization is recommended as the default for all grid configurations. It is ideal for datasets with many rows and many columns (typical production scenarios), improves performance when both vertical and horizontal scrolling occur frequently, and is critical for large datasets where memory efficiency is essential.

Set type to VirtualDomType.Both for row and column virtualization:

const [virtualizationSettings] = useState({ type: VirtualDomType.Both });

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Important: Virtualization remains the recommended approach for large datasets. Disabling virtualization is applicable only for small datasets or testing scenarios. To disable row and column virtualization entirely, set enabled to false on the virtualizationSettings property. For details on controlling row rendering when virtualization is disabled, refer to Limit maximum rows when virtualization is disabled.

Viewport buffer configuration

Buffer configuration defines how many extra rows and columns the grid renders beyond the visible area. This behavior is controlled by the viewPortBuffer property. The default buffer values are rows: 5 and columns: 5, which balance scroll smoothness against DOM size.

const [virtualizationSettings] = useState({
  type: VirtualDomType.Both,
  viewPortBuffer: { rows: 10, columns: 8 }
});

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Buffer Tuning: Larger buffers (5-10) reduce visible gaps during fast scrolling but increase DOM nodes and memory. Smaller buffers (2-3) minimize DOM nodes but may show gaps during very fast scrolling. Start with default values and adjust based on scroll speed and device constraints. For server-side loading, balance buffer size against network latency.

Row height configuration impact on virtualization

Row height configuration affects how virtualization performs. Different row height approaches have different implications for virtualization and memory usage.

For comprehensive row height configuration options including static, dynamic, and auto height approaches, refer to the Row height configuration documentation.

Row height considerations for virtualization:

• Static row height: The rowHeight property performs virtualization calculations instantly without measurement overhead, ideal for large datasets since all rows have equal height.
• Dynamic row height: ThegetRowHeight callback customizes heights based on row data while maintaining column virtualization capability since heights are calculated without requiring all columns in the DOM. For a real-world example, refer to Dynamic row height configuration.
• Auto row height with templates: The autoHeight: true on columns with templates disables column DOM virtualization since the grid must render all columns to the DOM to measure template content and calculate final row heights. When templates contain wrapped text content requiring height adjustment, autoHeight is necessary. See Component integration in templates for template examples. For understanding lazy height calculation during scrolling with autoHeight, refer below.

Dynamic row height with lazy height calculation

Both auto height and dynamic row height approaches enable the grid to render content dynamically as rows enter the viewport during scrolling. The grid measures row heights only for visible and buffer rows, not upfront for all rows, providing optimal performance with large datasets containing templates or custom height calculations.

Scenarios with lazy height calculation:

• Auto height on templates (autoHeight: true on columns): The grid renders content dynamically and measures heights as rows enter the viewport.
• Dynamic row height callbacks (getRowHeight callback): The grid calls the callback function to calculate heights incrementally for visible rows during scrolling.

Lazy height behavior during scrolling:

• Dynamic scroll range: As new rows are measured, the vertical scroll range adjusts. The scroll thumb may lag or jump if row heights vary significantly.
• Row position shifts: When scrolling up and revealing previously unmeasured rows, their calculated heights may cause rows below to shift down.
• Variable scroll speed: Scrolling speed appears variable if row heights differ substantially due to content variation or callback-determined heights.

These behaviors are inherent to lazy height calculation and occur because heights are measured incrementally as rows enter the DOM, not calculated upfront. This trade-off enables efficient handling of large datasets with complex templates or custom height logic.

Limit maximum rows when virtualization is disabled

The preventMaxRenderedRows property is a boolean flag that controls row rendering when virtualization is disabled or only column virtualization is enabled.

When preventMaxRenderedRows is false (default behavior), the grid automatically sets rowBuffer: 500 instead of the default "5". However, if virtualizationSettings.rowBuffer is explicitly set, that explicit value is used as the rendering limit. Only the configured rows render to the DOM. This applies when virtualization is disabled or only columns are virtualized, preventing excessive DOM nodes when row virtualization cannot be used.

When preventMaxRenderedRows is true (override behavior), the buffer limit is removed. All available rows render to the DOM. Use this only for small datasets or testing scenarios (jsdom, Puppeteer, headless browsers).

Configuration options include:

• Default column virtualization automatically applies the 500-row buffer without additional configuration
• Override row limit with column virtualization by setting preventMaxRenderedRows: true when all rows must render with column virtualization enabled
• Override row limit without virtualization by setting both enabled: false and preventMaxRenderedRows: true to render all rows without virtualization (only for small datasets)

• Row and column virtualization (type: VirtualDomType.Both) is recommended for datasets with more than 1,000 rows. Disabling virtualization with large datasets should be avoided, as DOM size and memory usage increase significantly.
• This row rendering limit affects only the DOM. Data operations such as sorting, filtering, and searching work on the complete dataSource regardless of the rendered row limit.

Browser support and massive row count handling

Browser virtualization capabilities vary across modern browsers, each with specific DOM height limitations. These limitations determine the maximum number of rows the grid can virtualize within browser constraints.

Browser DOM height limits

Each browser imposes a maximum height for DOM elements:

When datasets exceed these browser limits, virtualization alone is insufficient. The grid applies row offset calculations to map logical row positions to physical screen positions, enabling display of 500,000+ rows while remaining within browser constraints.

Configuration for massive row count datasets (100,000+)

Massive row count handling is a core DOM virtualization capability that works with the default scroll mode. The grid uses row offset calculations to map logical row positions to physical screen positions, enabling support for 100,000+ rows while remaining within browser DOM height constraints.

Configuration approach: Enable row and column virtualization (type: VirtualDomType.Both) with minimal buffer size (rows: 2, columns: 2) to reduce DOM node count while maintaining smooth scrolling performance.

Constraints with massive datasets

Grids handling very large row counts have specific characteristics:

• Scroll speed: Apparent scroll speed increases due to row offset calculations. For example, 1,000,000 rows compress into available browser height, making scroll motion faster than standard visualization.
• Scroll thumb position: Scroll thumb represents logical row position, not physical screen position.
• Row rendering: Only viewport and buffer rows render to the DOM, memory usage remains constant regardless of dataset size.
• Pagination alternative: For datasets significantly exceeding browser limits, combine virtualization with pagination or implement progressive data loading from the server.

Performance best practices

Performance optimization with DOM virtualization requires specific recommended patterns and approaches.

• Enable virtualization for large datasets: Virtualization for large datasets (1,000+ rows) maintains responsive performance and prevents excessive DOM creation.

• Use Row and column virtualization: Row and column virtualization (type: VirtualDomType.Both) improves performance when handling datasets with many rows and many columns across both scroll directions.

• Adjust buffer size based on dataset characteristics: Buffer size adjustment based on dataset characteristics: Larger buffers (8-10) reduce visible gaps during fast scrolling with local data. Smaller buffers (2-3) minimize DOM nodes for memory-constrained devices. Balance buffer size with server latency for remote data.

• Use fixed row height for large datasets: Fixed row height (rowHeight property) for very large datasets avoids measurement overhead. Use getRowHeight callback for dynamic heights when column virtualization is critical.

• Improve column templates: Avoid autoHeight with 100,000+ rows since it disables column virtualization. Use simple text or lightweight inline elements in column templates without complex components to reduce render time.

Troubleshooting

This section provides solutions to common issues encountered when using DOM virtualization.

Blank rows or gaps appear while scrolling

• Symptoms: White space or missing rows visible briefly during scrolling.

• Cause: Buffer size configured too small for current scroll pattern or virtualization disabled.

• Solution: Increase buffer size to 8-10 or verify virtualization is enabled.

const [virtualizationSettings] = useState({
  type: VirtualDomType.Both,
  viewPortBuffer: { rows: 8, columns: 8 }
});

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Grid freezes or becomes unresponsive

• Symptoms: Grid becomes unresponsive during scrolling or data interaction.

• Cause: Too many DOM nodes being rendered due to virtualization being disabled or buffer being too large.

• Solution: For datasets exceeding 100,000 rows, reduce buffer to 2-3 and ensure row and column virtualization is enabled.

// For datasets exceeding 100,000 rows
const [virtualizationSettings] = useState({
  type: VirtualDomType.Both,
  viewPortBuffer: { rows: 2, columns: 2 }
});

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Scrollbar position appears incorrect

• Symptoms: Scrollbar thumb position does not match expected row position or scrollbar jumps.

• Cause: Row heights are inconsistent or dynamic height calculations conflict with DOM virtualization.

• Solution: Use consistent row heights with fixed rowHeight property or implement getRowHeight callback that returns consistent values based on row data.

const [virtualizationSettings] = useState({ type: VirtualDomType.Both });

<Grid
  dataSource={data}
  rowHeight={40}
  virtualizationSettings={virtualizationSettings}
/>

Memory usage increases during extended scrolling

• Symptoms: Browser memory increases over time during prolonged grid usage.

• Cause: Buffer size too large or caching accumulating data.

• Solution: Reduce buffer size to 2-3 and disable automatic cache management if necessary.

const [virtualizationSettings] = useState({
  type: VirtualDomType.Both,
  viewPortBuffer: { rows: 2, columns: 2 },
  enableCache: false
});

<Grid
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>

Data misalignment after sorting or filtering

• Symptoms: After sort or filter operation, rows appear blank, misaligned, or in wrong position.

• Cause: Virtualization state not synchronized with data changes.

• Solution: Force grid re-render by updating the Grid component's key or id when data changes.

const [virtualizationSettings] = useState({ type: VirtualDomType.Both });

<Grid
  key={JSON.stringify(data)}
  dataSource={data}
  virtualizationSettings={virtualizationSettings}
/>