React AG Grid行列数据转置失败，如何实现预期表格格式？

要实现你期望的行列转置效果，核心是转换原数据结构，把原对象的字段作为新行，原每条数据作为新列。以下是具体实现方案：

1. 数据转置逻辑 #

编写转置逻辑，将原rowData转换为符合需求的结构：

• 提取原数据的所有字段（make/model/price）作为新行的标题
• 原每条数据的对应值作为新列的内容

2. 完整实现代码 #

import React, { useState, useMemo } 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 [originalRowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 }
  ]);

  // 缓存转置后的行数据，避免重复计算
  const transposedRowData = useMemo(() => {
    if (!originalRowData.length) return [];
    const fields = Object.keys(originalRowData[0]);
    return fields.map(field => {
      // 字段名首字母大写，匹配期望格式
      const formattedField = field.charAt(0).toUpperCase() + field.slice(1);
      const row = { fieldName: formattedField };
      originalRowData.forEach((item, idx) => {
        row[`col${idx}`] = item[field];
      });
      return row;
    });
  }, [originalRowData]);

  // 缓存转置后的列定义
  const transposedColumnDefs = useMemo(() => {
    return [
      { field: 'fieldName', headerName: '', width: 120 },
      ...originalRowData.map((item, idx) => ({
        field: `col${idx}`,
        headerName: item.make,
        width: 120
      }))
    ];
  }, [originalRowData]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={transposedRowData}
        columnDefs={transposedColumnDefs}
        suppressRowClickSelection={true}
        enableCellTextSelection={true}
      />
    </div>
  );
};

export default App;

关键说明 #

• 使用useMemo缓存转置结果，提升组件渲染性能
• 对字段名做了首字母大写处理，完全匹配你期望的表格格式
• 固定列宽度让表格布局更整齐，添加suppressRowClickSelection等属性优化交互

内容的提问来源于stack exchange，提问作者John_ny