如何在 React Ag-Grid 中实现行列转置（Transpose）

ag-grid 本身不支持原生行列转置，需通过预处理数据将原始行数据转换为列结构，并动态生成对应列定义，再传入 aggridreact 渲染转置后的表格。

在使用 React 版 Ag-Grid 时，若需展示「行列互换」效果（即原数据的字段名变为首行标题，每条记录变为一列），本质是数据结构的转置（transpose）操作——这并非 Ag-Grid 的内置功能，而是需要在渲染前对 rowData 和 columnDefs 进行逻辑重构。

✅ 实现原理

1. 提取原始字段名（如 make, model, price）作为新表格的首列内容（即 name 字段）；
2. 遍历每条原始记录，将其对应字段值按字段名分组，映射为新行（例如：{ name: 'make', 0: 'Toyota', 1: 'Ford', 2: 'Porsche' }）；
3. 动态生成列定义：首列为 name，后续列为 0, 1, 2… 并可自定义表头名称（如 "Toyota", "Ford" 等）；
4. 为提升可读性，建议关闭默认表头高度（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 中稳定、清晰地呈现行列转置视图，兼顾可维护性与扩展性。

AI Web Designer

AI网页设计师，快速生成个性化的网站设计

下载