数据表格 - 列标题

自定义您的列标题。

您可以使用以下属性配置标题：

headerName：在列标题单元格中渲染的列标题。
description：列的描述，如果列标题名称未完全显示，则渲染为工具提示。

<DataGrid
  columns={[
    {
      field: 'username',
      headerName: 'Username',
      description:
        'The identification used by the person with access to the online service.',
    },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={rows}
/>

<DataGrid
  columns={[
    {
      field: 'username',
      headerName: 'Username',
      description:
        'The identification used by the person with access to the online service.',
    },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={rows}
/>

按 Enter 键开始编辑

自定义标题渲染器

您可以使用 renderHeader 方法自定义每个标题的外观。它优先于 headerName 属性。

const columns: GridColDef[] = [
  {
    field: 'date',
    width: 150,
    type: 'date',
    renderHeader: (params: GridColumnHeaderParams) => (
      <strong>
        {'Birthday '}
        <span role="img" aria-label="enjoy">
          🎂
        </span>
      </strong>
    ),
  },
];

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

按 Enter 键开始编辑

标题高度

默认情况下，列标题的高度为 56 像素。这与Material Design 指南中的高度相匹配。

可以使用 columnHeaderHeight 属性来覆盖默认值。

<DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />

<DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />

按 Enter 键开始编辑

样式化标题

您可以查看样式化标题部分以获取更多信息。

数据表格 - 列标题

自定义标题渲染器

标题高度

样式化标题

API