如何在React AG Grid表格中自定义列表头以展示数据类型？

要实现表头中同时展示列名和数据类型（匹配你提供的效果图样式），可以通过AG Grid提供的两种核心方式实现，以下是具体步骤：

方法一：使用headerValueGetter快速实现（适合简单样式场景） #

通过headerValueGetter拼接列名与数据类型，结合HTML标签控制换行和样式，开启enableHeaderHtml允许表头渲染HTML内容：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const columnDefs = [
  {
    field: 'id',
    headerName: 'ID',
    // 自定义属性存储数据类型
    customProps: { dataType: 'Number' },
    headerValueGetter: (params) => {
      return `${params.colDef.headerName}<br><span style="font-size: 12px; color: #666;">${params.colDef.customProps.dataType}</span>`;
    },
    enableHeaderHtml: true // 允许表头解析HTML
  },
  {
    field: 'username',
    headerName: 'Username',
    customProps: { dataType: 'String' },
    headerValueGetter: (params) => {
      return `${params.colDef.headerName}<br><span style="font-size: 12px; color: #666;">${params.colDef.customProps.dataType}</span>`;
    },
    enableHeaderHtml: true
  }
];

const MyGrid = () => {
  const rowData = [/* 你的业务行数据 */];
  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact columnDefs={columnDefs} rowData={rowData} />
    </div>
  );
};

方法二：自定义Header Component（适合复杂样式/交互场景） #

如果需要更精细的布局控制（比如自定义间距、对齐方式），可以创建独立的表头组件：

1. 定义自定义表头组件 #

const CustomHeader = ({ displayName, dataType }) => {
  return (
    <div className="custom-header-container">
      <span className="header-title">{displayName}</span>
      <span className="header-data-type">{dataType}</span>
    </div>
  );
};

2. 添加样式（可按需调整） #

.custom-header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px;
}

.header-title {
  font-weight: 600;
  font-size: 14px;
}

.header-data-type {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

3. 在列定义中引用组件 #

const columnDefs = [
  {
    field: 'email',
    headerName: 'Email',
    headerComponent: CustomHeader,
    headerComponentParams: {
      displayName: 'Email',
      dataType: 'String' // 动态数据类型可从你的数据源直接传入
    }
  },
  {
    field: 'age',
    headerName: 'Age',
    headerComponent: CustomHeader,
    headerComponentParams: {
      displayName: 'Age',
      dataType: 'Number'
    }
  }
];

动态数据类型适配说明 #

如果数据类型是从后端接口或其他动态数据源获取的，只需遍历生成columnDefs时，将对应字段的类型赋值到customProps（方法一）或headerComponentParams（方法二）中即可。

内容的提问来源于stack exchange，提问作者Sushil Kumar