Row performance and rendering

Row virtualization is a performance optimization technique used in Grid. Instead of rendering all the rows of data at once, which can be thousands of entries, row virtualization renders only the rows currently visible within the user's viewport (plus a small buffer). As the user scrolls, the Grid dynamically renders new rows and removes those that scroll out of view.

Alternatively, if you prefer to display data in discrete pages rather than continuous scrolling, you can use Pagination to also avoid rendering all rows at once.

Illustration showing virtualization of rows

This technique significantly enhances performance, leading to faster load times and efficient updates. Row virtualization reduces memory consumption, allowing the application to handle large datasets smoothly without compromising performance. Users benefit from a smoother experience with fluid scrolling and more responsive interactions such as sorting rows.

Row virtualization can be set explicitly with the virtualization option, or controlled automatically by virtualizationThreshold (default 50). Please note that large datasets also impact resizing and sorting performance. Some animations or interactions might not be smooth.

Optimizing performance

{
    rendering: {
        rows: {
            bufferSize: 3, // default is 10
            strictHeights: true // default is false
        }
    }
}

The bufferSize and strictHeights options can be adjusted to optimize performance and smoothness of scrolling based on your specific use case and preferences.

buffersize

Defines the number of rows rendered outside the viewport (the buffer) during scrolling. A small buffer leads to faster initial rendering and increased performance on sorting and scrolling. A larger buffer means slower initial rendering but might decrease the flicker effect on fast scrolling.

The default bufferSize of 10 should be optimal in most cases.

strictHeights

By default, rows adjust their height to fit all content, which can reduce performance and scrolling smoothness. Setting strictHeights: true ensures all rows have a uniform height, truncating multiline text with an ellipsis. This skips height calculations and boosts performance.

minVisibleRows

Use minVisibleRows to set a minimum tbody height based on how many rows should remain visible.

{
    rendering: {
        rows: {
            minVisibleRows: 4
        }
    }
}

Rendering

{
    rendering: {
        table: {
            className: "custom_table_class"
        },
        header: {
            enabled: false // default is true
        },
        columns: {
            resizing: {
                mode: "adjacent"
            }
        }
    }
}

These options can be used to configure how the table should be rendered.

table.className is appended to the <table> element.

header.enabled: false disables all column headers by not rendering the thead element.

columns.resizing.mode is used to configure initial column widths.

Use columns.resizing.mode to control how widths are redistributed when users resize columns:

  • adjacent: resize current column and compensate in the next column.
  • independent: resize only the current column and keep following column widths fixed.
  • distributed: resize current column and rebalance remaining flexible columns.
Edit this page