資料格線 - 覆蓋層

各種資料格線覆蓋層。

載入覆蓋層

若要顯示載入覆蓋層並表示資料格線處於載入狀態，請將 loading 屬性設定為 true。

資料格線支援 3 種開箱即用的載入覆蓋層變體

circular-progress (預設)：圓形載入指示器。
linear-progress：不確定的線性進度列。
skeleton：資料格線的動畫佔位符。

要設定要顯示的載入覆蓋層類型，可以透過以下兩個屬性的 slotProps.loadingOverlay 進行設定

variant：當 loading 且表格中有列時。
noRowsVariant：當 loading 且表格中沒有任何列時。

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'skeleton',
    },
  }}
/>

圓形進度

圓形載入指示器，預設載入覆蓋層。

<DataGrid {...data} loading />

<DataGrid {...data} loading />

按下 Enter 開始編輯

線性進度

不確定的線性進度列。

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'linear-progress',
    },
  }}
/>

<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'linear-progress',
    },
  }}
/>

按下 Enter 開始編輯

骨架

資料格線的動畫佔位符。

<DataGridPro
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'skeleton',
      noRowsVariant: 'skeleton',
    },
  }}
  initialState={{
    pinnedColumns: {
      left: ['desk'],
    },
  }}
/>

<DataGridPro
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'skeleton',
      noRowsVariant: 'skeleton',
    },
  }}
  initialState={{
    pinnedColumns: {
      left: ['desk'],
    },
  }}
/>

按下 Enter 開始編輯

自訂組件

如果您想要自訂無列覆蓋層，可以將組件傳遞到 loadingOverlay 插槽。

在以下示範中，已標記的確定性 CircularProgress 組件取代了預設載入覆蓋層呈現，並帶有一些額外的載入列…文字。

<DataGrid
  slots={{
    loadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

<DataGrid
  slots={{
    loadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

按下 Enter 開始編輯

無列覆蓋層

當資料格線沒有列時，會顯示無列覆蓋層。

<DataGrid {...data} rows={[]} />

<DataGrid {...data} rows={[]} />

按下 Enter 開始編輯

自訂組件

如果您想要自訂無列覆蓋層，可以將組件傳遞到 noRowsOverlay 插槽並取代呈現。

在以下示範中，在預設「沒有列」訊息的頂部新增了一個插圖。

<DataGrid
  slots={{
    noRowsOverlay: CustomNoRowsOverlay,
  }}
  {...data}
  rows={[]}
/>

<DataGrid
  slots={{
    noRowsOverlay: CustomNoRowsOverlay,
  }}
  {...data}
  rows={[]}
/>

按下 Enter 開始編輯

無結果覆蓋層

當資料格線在篩選後沒有結果時，會顯示無結果覆蓋層。

自訂組件

如果您想要自訂無結果覆蓋層，可以將組件傳遞到 noResults 插槽並取代呈現。

在以下示範中，在預設「找不到結果」訊息的頂部新增了一個插圖。