資料格 - 欄位標題

自訂您的欄位標題。

您可以使用以下屬性配置標題：

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