ag-grid 本身不支持原生行列转置，需通过预处理数据将原始行数据转换为列结构，并动态生成对应列定义，再传入 aggridreact 渲染转置后的表格。
在使用 React 版 Ag-Grid 时，若需展示「行列互换」效果（即原数据的字段名变为首行标题，每条记录变为一列），本质是数据结构的转置（transpose）操作——这并非 Ag-Grid 的内置功能，而是需要在渲染前对 rowData 和 columnDefs 进行逻辑重构。
✅ 实现原理
- 提取原始字段名（如 make, model, price）作为新表格的首列内容（即 name 字段）；
- 遍历每条原始记录，将其对应字段值按字段名分组，映射为新行（例如：{ name: 'make', 0: 'Toyota', 1: 'Ford', 2: 'Porsche' }）；
- 动态生成列定义：首列为 name，后续列为 0, 1, 2… 并可自定义表头名称（如 "Toyota", "Ford" 等）；
- 为提升可读性，建议关闭默认表头高度（headerHeight={0}）并设置 defaultColDef 控制列宽。
? 示例代码（完整可运行）
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 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 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' }
]);
const transposedData = transposeData(rowData, columnDefs);
const transposedColumns = [
{
field: 'name',
headerName: '',
width: 120,
suppressMenu: true,
sortable: false,
filter: false
},
...rowData.map((_, index) => ({
field: index.toString(),
headerName: rowData[index].make || `Row ${index + 1}`, // 可选：用 make 值作列头（更语义化）
width: 150,
cellStyle: { textAlign: 'center' }
}))
];
return (
<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
<AgGridReact
rowData={transposedData}
columnDefs={transposedColumns}
defaultColDef={{ resizable: true, sortable: false, filter: false }}
headerHeight={0} // 隐藏默认表头，由 columnDefs.headerName 控制
domLayout="normal"
/>
</div>
);
};
export default App;⚠️ 注意事项
- 列头语义化：示例中使用 rowData[index].make 作为列标题，实际项目中可根据业务选择更合适的标识（如添加 id 字段或使用索引+别名组合）；
- 类型安全：若字段值含 null/undefined，建议在 transposeData 中做空值兜底（如 row[idx] = item[colName] ?? '-'）；
- 性能考量：仅适用于中小型数据集（≤ 数千行），超大数据转置可能导致内存压力，此时应考虑服务端转置或虚拟滚动优化；
- 样式兼容性：禁用 headerHeight={0} 后，若需保留顶部栏，可改用 headerComponent 自定义静态标题区。
通过该方案，你即可在 Ag-Grid 中稳定、清晰地呈现行列转置视图，兼顾可维护性与扩展性。
