React中ag-grid导出时拆分日期列为日期和时间列的实现方案

需求是将AG Grid中原本的date列，在导出CSV/Excel时拆分为独立的Date和Time列，同时不能让额外的列出现在网格的列菜单中。以下是可行的实现方案：

核心思路 #

不修改原columnDefs添加隐藏列，直接在导出API的配置中自定义导出的数据结构，把原date字段拆分为两个独立列，同时指定导出的表头和对应数据。

1. CSV导出实现 #

使用gridApi.exportDataAsCsv()，通过processRowCallback处理每行数据，结合columnKeys和columnHeaders定义导出列：

// 拆分日期时间的工具函数
const splitDateTime = (dateStr) => {
  const [datePart, timePart] = dateStr.split(' ');
  return { date: datePart, time: timePart };
};

// 触发CSV导出的函数
const exportAsCsv = () => {
  gridApi.exportDataAsCsv({
    columnKeys: ['name', 'exportDate', 'exportTime'],
    columnHeaders: ['Name', 'Date', 'Time'],
    processRowCallback: (params) => {
      const { date, time } = splitDateTime(params.data.date);
      return {
        name: params.data.name,
        exportDate: date,
        exportTime: time
      };
    }
  });
};

2. Excel导出实现 #

使用gridApi.exportDataAsExcel()，通过columns定义导出列，customData处理每行数据：

// 复用之前的splitDateTime工具函数
const exportAsExcel = () => {
  gridApi.exportDataAsExcel({
    columns: [
      { headerName: 'Name', field: 'name' },
      { headerName: 'Date', field: 'exportDate' },
      { headerName: 'Time', field: 'exportTime' }
    ],
    customData: (params) => {
      const { date, time } = splitDateTime(params.data.date);
      return {
        name: params.data.name,
        exportDate: date,
        exportTime: time
      };
    }
  });
};

方案优势 #

• 无需改动原网格列配置，不会在列菜单中出现额外列
• 导出逻辑独立，不影响网格的正常展示
• 拆分逻辑封装在工具函数中，便于后续调整维护

内容的提问来源于stack exchange，提问作者César Santos