ag grid 本身不支持原生行列转置，需通过自定义数据转换函数将原始行数据重构为列驱动结构，并动态生成对应列定义，再传入 ag grid 渲染。本文提供完整、可运行的实现方案与关键注意事项。
在 AG Grid 中实现“行列互换”（即数据转置），本质是将原始的 每行代表一条记录 的结构（如汽车品牌、型号、价格），转换为 每行代表一个字段名、每列代表原数据中的一条记录的新结构。由于 AG Grid 并未内置 transpose 功能，我们必须在渲染前对数据进行预处理。
✅ 核心思路：数据转置 + 列定义重构
- 提取原始字段名（如 'make', 'model', 'price'）作为新表格的 行标题；
- 按字段遍历原始数据，将每个字段在所有记录中的值聚合为新行；
- 构建新的列定义：首列为字段名称（name），后续列为原数据索引（0, 1, 2…），并设置合理宽度；
- 禁用表头高度（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 的高性能与丰富功能，又灵活满足了特定业务场景下的展示需求。
