如何在 React 中使用 AG Grid 实现行列转置（Transpose）

ag grid 本身不支持原生行列转置，需通过自定义数据转换函数将原始行数据重构为列驱动结构，并动态生成对应列定义，再传入 ag grid 渲染。本文提供完整、可运行的实现方案与关键注意事项。

在 AG Grid 中实现“行列互换”（即数据转置），本质是将原始的 每行代表一条记录 的结构（如汽车品牌、型号、价格），转换为 每行代表一个字段名、每列代表原数据中的一条记录的新结构。由于 AG Grid 并未内置 transpose 功能，我们必须在渲染前对数据进行预处理。

✅ 核心思路：数据转置 + 列定义重构

1. 提取原始字段名（如 'make', 'model', 'price'）作为新表格的 行标题；
2. 按字段遍历原始数据，将每个字段在所有记录中的值聚合为新行；
3. 构建新的列定义：首列为字段名称（name），后续列为原数据索引（0, 1, 2…），并设置合理宽度；
4. 禁用表头高度（headerHeight={0}）以避免首列出现冗余标题，提升视觉一致性。

? 完整可运行代码示例

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ]);

  // ? 数据转置函数：将 [{a:1,b:2}, {a:3,b:4}] → [{name:'a',0:1,1:3}, {name:'b',0:2,1:4}]
  const transposeData = (data, columns) => {
    const colNames = columns.map(col => col.field);
    return colNames.map(colName => {
      const row = { name: colName };
      data.forEach((item, idx) => {
        row[idx] = item[colName];
      });
      return row;
    });
  };

  const transposedData = transposeData(rowData, columnDefs);
  const transposedColumns = [
    { field: 'name', headerName: '', suppressHeaderMenuButton: true, lockPinned: true, width: 120 },
    ...rowData.map((_, idx) => ({
      field: idx.toString(),
      headerName: `Row ${idx + 1}`, // 可选：自定义列头文字（如“Toyota”、“Ford”）
      width: 150,
      cellStyle: { textAlign: 'center' as const }
    }))
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={transposedData}
        columnDefs={transposedColumns}
        defaultColDef={{ resizable: true, sortable: false }}
        headerHeight={0} // 隐藏默认表头，让首列真正成为“行标签”
        suppressRowClickSelection={true}
      />
    </div>
  );
};

export default App;

⚠️ 注意事项与优化建议

• 字段名冲突风险：若原始数据中存在 name 或数字字符串键（如 "0"），需确保 transposeData 返回对象的 key 唯一且安全（本例中 name 和索引 0/1/2 是可控的）；
• 列头可读性：transposedColumns 中可将 headerName 替换为原始 rowData[i] 的标识字段（例如 rowData[i].make），实现 "Toyota"、"Ford" 等语义化列头；
• 响应式适配：当原始数据量较大时，列数会随 rowData.length 增长，建议配合 autoSizeColumns() 或横向滚动优化体验；
• 性能考量：转置逻辑应在 useMemo 中缓存（尤其数据频繁更新时），避免重复计算：

  const transposedData = useMemo(() => transposeData(rowData, columnDefs), [rowData, columnDefs]);

通过上述方法，你即可在 AG Grid 中稳定、清晰地呈现转置后的表格视图——既保持了 AG Grid 的高性能与丰富功能，又灵活满足了特定业务场景下的展示需求。

Joker AIx

一站式AI创意生产平台，覆盖图像、视频、音频、文案全品类创作

下载