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 (
    
      
    
  );
};

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 的高性能与丰富功能，又灵活满足了特定业务场景下的展示需求。

# css  # react  # app  # 字符串  # Length  # 对象  # 重构  # 字段名  # 自定义  # 原始数据  # 遍历  # 可在  # 不支持  # 可选  # 应在  # 可将 

相关文章： 如何使用Golang实现RPC重试机制_Golang RPC失败重试与容错方法  今日头条官网登录入口_今日头条网页版地址链接  动态创建可拖拽组件并绑定自定义属性的 Angular 实战教程  电梯信号王！荣耀Power2官宣搭载第二代鸿燕通信  如何在 PHP 中正确处理并转换数据库查询的多条记录为结构化数组  javascript函数式编程是什么_纯函数与副作用如何理解？  什么是JavaScript中的解构赋值_如何简化代码编写？  如何为不同团队 ID 动态生成多个“认领值班”按钮  首发自研长江SoC！摩尔线程AIBOOK笔记本图赏  Windows10如何查看蓝屏日志_Win10使用事件查看器分析Dump文件  如何在Linux中搭建Golang开发环境_Linux Golang安装配置指南  《给他爱5》麦克演员屡被报假警 甚至与警察成了朋友  铁锤守卫英雄传2测评：优点和缺点都非常鲜明  得物瑕疵盒是什么意思_得物鞋盒破损定义与购买注意事项  Safari浏览器如何调整视频清晰度 Safari浏览器视频画质调整  简历没回改：利用AI润色让你的文字更专业  如何修复轮播图中左右按钮无法点击的问题  如何在 Go 项目中将测试文件组织到子目录中？  php时间怎么计算_strtotime函数计算时间差的应用【方法】  如何正确启动 JProfiler（Linux 环境下常见误用解析）  php485在linux下权限不够怎么办_php485串口权限配置教程【技巧】  javascript的安全性如何保障_常见的Web攻击该如何防范？  在Java中如何使用Collections工具类_Java集合操作方法解析  css 绝对定位元素参与盒模型吗_position absolute 行为解析  如何使用 Go 正则表达式精准提取括号内首个字母型标识符  c++中如何判断二叉树是否是对称的_c++镜像二叉树判断算法  搜狗搜索怎么搜汽车参数配置_搜狗搜索车型库入口与详细对比【实操】  PPT如何制作动态连线演示动画_PPT逻辑关联设计教程  如何使用Golang构建简单问卷系统_Golang表单数据收集与统计示例  MAC如何安装Git版本控制工具_MAC开发环境配置与Xcode插件安装【教程】 

相关栏目： 【 行业资讯17850 】 【 软件资源51899 】 【 网站技术89748 】 【 百度推广44206 】 【 网络营销84187 】 【 运营推广93002 】 【 AI优化91086 】 【 网络优化117696 】 【 网址导航107142 】