数据表格 - 虚拟化

该表格由于其行和列虚拟化引擎而具有高性能。

DOM 虚拟化是一项内置功能，允许数据表格处理无限*数量的行和列。 这是渲染引擎的内置功能，大大提高了渲染性能。

*无限：浏览器对滚动容器可以容纳的像素数量设置了限制：Firefox 上为 1750 万像素，Chrome、Edge 和 Safari 上为 3350 万像素。 一个 复现。

行虚拟化

行虚拟化是在数据表格垂直滚动时插入和移除行。

表格在可见行上方和下方渲染一些额外的行。 您可以使用 rowBufferPx 属性来提示 Data Grid 要渲染的区域，但此值在某些情况下可能不被遵守，例如在高速滚动期间。 行虚拟化在 Data Grid 组件中限制为 100 行。

列虚拟化

列虚拟化是在数据表格水平滚动时插入和移除列。

• 至少通过一列进行过度扫描允许箭头键聚焦到下一个（尚未可见的）项目。
• 稍微过度扫描可以减少或防止用户首次开始滚动时出现空白区域的闪烁。
• 更多地过度扫描允许浏览器的内置搜索功能找到更多匹配的单元格。
• 过度扫描太多可能会对性能产生负面影响。

默认情况下，150 像素区域以下的列在视口外渲染。 您可以使用 columnBufferPx 属性更改此选项。 至于 rowBufferPx，该值在某些情况下可能会被忽略。 以下演示总共渲染 1,000 列

您可以通过调用 apiRef.current.unstable_setColumnVirtualization(false) 或将 columnBufferPx 设置为较高的值来禁用列虚拟化。

禁用虚拟化

可以使用 disableVirtualization 属性完全禁用虚拟化。 您可能想要关闭它，以便能够使用无头浏览器（如 jsdom）测试 Data Grid。

<DataGrid {...data} disableVirtualization />

API

• DataGrid
• DataGridPro
• DataGridPremium