跳到內容
+

數據網格 - 列更新

始終保持您的列為最新狀態。

rows 屬性

更新列最簡單的方法是使用 rows 屬性提供新的列。它會替換先前的值。這種方法有一些缺點

  • 您需要提供所有列。
  • 當準備要提供給數據網格的列陣列時,您可能會產生效能瓶頸。

updateRows 方法

如果您只想更新部分列,可以使用 apiRef.current.updateRows 方法。

updateRows API 的預設行為是 upsert 列。因此,如果某列的 ID 不在目前的列列表中,則會將其新增至數據網格。

或者,如果您想刪除列,則需要在更新物件中傳遞額外的 _action 屬性,如下所示。

apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);

無限滾動載入

網格提供了一個 onRowsScrollEnd 屬性,可用於在滾動條到達視口區域底部時載入額外的列。

此外,可以使用 scrollEndThreshold 變更呼叫 onRowsScrollEnd 的區域。

延遲載入

延遲載入的工作方式類似於分頁系統,但它不是基於頁面載入新列,而是基於視口載入。當使用者滾動數據網格並顯示空白列時,它會分批載入新列。

數據網格建立垂直滾動條,彷彿所有列都已存在,並在載入資料時顯示空白(骨架)列。只有顯示的列才會被提取。

若要啟用延遲載入,您需要遵循幾個步驟

首先,設定 rowsLoadingMode="server"。然後,設定 rowCount 以反映伺服器上可用的列數。第三,在 onFetchRows 上設定一個回呼函式,以載入與 GridFetchRowsParams 中傳遞的列索引相對應的資料。最後,使用 apiRef.current.unstable_replaceRows() 將空白列替換為新提取的列,如下面的示範所示。

按下 Enter 鍵開始編輯

高頻率

每當列更新時,數據網格都必須應用排序和篩選。如果您有高頻率更新,這可能會成為問題。為了保持良好的效能,數據網格允許批次處理更新,並僅在一段時間後應用它們。throttleRowsMs 屬性可用於定義應用列更新的頻率(以毫秒為單位)。

當接收更新的頻率高於此閾值時,數據網格將等待然後再更新列。

以下示範每 10 毫秒更新列,但它們僅每 2 秒應用一次。

按下 Enter 鍵開始編輯