跳到内容
+

数据网格 - 行高

自定义您的行的高度。

静态行高

默认情况下，行的高度为 52 像素。这与 Material Design 指南中的正常高度相匹配。

使用 rowHeight 属性来更改此默认值，如下所示

按 Enter 开始编辑

可变行高

如果您需要某些行具有不同的行高，可以使用 getRowHeight 属性来实现。此函数会为每个可见行调用，如果返回值是 number，则该 number 将设置为该行的 rowHeight。如果返回值是 null 或 undefined，则 rowHeight 属性将对给定行生效。

按 Enter 开始编辑
const getRowHeight = React.useCallback(() => { ... }, []);

<DataGridPro getRowHeight={getRowHeight} />

动态行高

您可以不使用固定的行高，而是让数据网格根据其内容计算每行的高度。为此，请在传递给 getRowHeight 属性的函数中返回 "auto"。

<DataGrid getRowHeight={() => 'auto'} />

以下演示展示了此功能的实际应用

动态行高实现基于惰性方法，这意味着行是在渲染时测量的。因此，您可能会在滚动期间看到滚动条滑块的大小发生变化。发生此副作用的原因是在未渲染行时使用了行高估计值，然后在获得真实测量值后替换此值。您可以通过将函数传递给 getEstimatedRowHeight 属性来配置使用的估计值。如果未提供，则默认行高 52px 将用作估计值。如果内容与默认值偏差太大，建议传递此属性。

<DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />

列虚拟化

默认情况下，列的虚拟化被禁用，以强制同时渲染所有列并正确计算行高。但是，当渲染大量列时，这可能会导致性能不佳。

如果您需要列虚拟化，可以将 virtualizeColumnsWithAutoRowHeight 属性设置为 true。使用这种方法，数据网格会根据可见列测量行高。但是，行高可能会在水平滚动期间发生变化。

按 Enter 开始编辑

行密度

让您的用户可以选择更改默认行密度以匹配他们的偏好——紧凑、标准或舒适。密度是基于 rowHeight 和/或 columnHeaderHeight 属性（如果存在）计算的。有关详细信息，请参阅密度。

行间距

您可以使用 getRowSpacing 属性来增加行之间的间距。此属性使用 GridRowSpacingParams 对象调用。

const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
  return {
    top: params.isFirstVisible ? 0 : 5,
    bottom: params.isLastVisible ? 0 : 5,
  };
}, []);

默认情况下，设置 getRowSpacing 将更改每行的 marginXXX CSS 属性。要添加边框，请将 rowSpacingType 设置为 "border" 并自定义颜色和样式。

<DataGrid
  getRowSpacing={...}
  rowSpacingType="border"
  sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
/>

API