資料格線 - 虛擬化

由於其列和欄虛擬化引擎，此格線具有高效能。

DOM 虛擬化是讓資料格線能夠處理無限*行列數的功能。這是渲染引擎的內建功能，可大幅提升渲染效能。

*無限：瀏覽器對捲動容器可以容納的像素數量設定了限制：Firefox 上為 1750 萬像素，Chrome、Edge 和 Safari 上為 3350 萬像素。重現。

列虛擬化

列虛擬化是在資料格線垂直滾動時插入和移除列的動作。

格線會在可見列的上方和下方渲染一些額外的列。您可以使用 rowBufferPx 屬性來提示資料格線要渲染的區域，但在某些情況下，例如在高速滾動期間，此值可能不會被遵守。列虛擬化在 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