数据表格 - 覆盖层

各种数据表格覆盖层。

加载覆盖层

要显示加载覆盖层并表明数据表格处于加载状态，请将 loading 属性设置为 true。

数据表格开箱即用地支持 3 种加载覆盖层变体

circular-progress (默认)：圆形加载指示器。
linear-progress：不确定的线性进度条。
skeleton：数据表格的动画占位符。

要设置显示的加载覆盖层类型，可以为以下两个属性使用 slotProps.loadingOverlay

variant：当 loading 为 true 且表格中有行时。
noRowsVariant：当 loading 为 true 且表格中没有任何行时。

<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 插槽并进行渲染。

在以下演示中，在默认的“未找到结果”消息之上添加了一个插图。