資料格線 - 捲動

本節介紹如何以程式方式控制捲動。

捲動到特定儲存格

您可以呼叫 apiRef.current.scrollToIndexes() 來捲動到特定儲存格。唯一必須傳遞的引數是一個物件，其中包含要捲動的儲存格的列索引和欄索引。如果列或欄索引不存在，資料格線將不會在缺少的軸向上進行任何移動。

以下示範展示此 API 的用法

捲動復原

您可以透過定義 initialState.scroll 值 { top: number, left: number }，將捲動復原到先前的位置。資料格線將以指定的捲動偏移量（以像素為單位）掛載。

以下示範展示捲動復原的用法

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

<Box sx={{ height: 400 }}>
  <DataGridPro
    apiRef={apiRef}
    onCellClick={handleCellClick}
    hideFooter
    loading={loading}
    {...data}
    initialState={{
      ...data.initialState,
      scroll: { top: 1000, left: 1000 },
    }}
  />
</Box>

按下 Enter 鍵開始編輯

apiRef

格線公開了一組方法，可使用命令式 apiRef 啟用所有這些功能。若要瞭解如何使用它，請查看 API 物件章節。

getScrollPosition()

傳回目前的捲動位置。

簽名

getScrollPosition: () => GridScrollParams

scroll()

觸發視窗捲動到給定的位置（以像素為單位）。

簽名

scroll: (params: Partial<GridScrollParams>) => void

scrollToIndexes()

觸發視窗捲動到 params 給定索引的儲存格。如果格線必須捲動才能到達目標，則傳回 true。

簽名

scrollToIndexes: (params: Partial<GridCellIndexCoordinates>) => boolean