React中Ag-Grid动态重组JSON数据消除表格空白行

你的问题核心是原始数据中的对象字段不统一，部分行只有a/y，部分只有b/z，导致Ag-Grid渲染时缺失字段的单元格显示空白。下面是直接可行的重组方案：

步骤1：拆分并合并异构数据 #

先把原始数据按字段类型拆分，再按最大行数补全所有字段，确保每行都包含a、y、b、z四个字段：

const randomData = [
  { a: '1', y: 10 },
  { a: '2', y: 20 },
  { b: '3', z: 30 },
  { b: '4', z: 40 },
  { b: '5', z: 50 }
];

// 拆分两类数据
const rowsWithAY = randomData.filter(item => 'a' in item);
const rowsWithBZ = randomData.filter(item => 'b' in item);

// 按最长数组长度生成完整行数据
const maxRowCount = Math.max(rowsWithAY.length, rowsWithBZ.length);
const mergedRowData = Array.from({ length: maxRowCount }, (_, idx) => ({
  a: rowsWithAY[idx]?.a || '', // 没有则设为空字符串，也可以用null
  y: rowsWithAY[idx]?.y || '',
  b: rowsWithBZ[idx]?.b || '',
  z: rowsWithBZ[idx]?.z || ''
}));

步骤2：在Ag-Grid中使用重组后的数据 #

确保你的columnDefs配置包含四个字段，然后传入重组后的mergedRowData：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const columns = [
  { field: 'a', headerName: 'A列' },
  { field: 'y', headerName: 'Y列' },
  { field: 'b', headerName: 'B列' },
  { field: 'z', headerName: 'Z列' }
];

export default function MyGrid() {
  // 上面的mergedRowData生成代码放在这里
  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={mergedRowData}
        columnDefs={columns}
      />
    </div>
  );
}

为什么之前的reduce/map没生效？ #

你之前尝试的方法可能没抓住核心：不是对单个对象做转换，而是需要将两类异构数据按行对齐补全。如果直接用map遍历原始数组，每个对象依然只有部分字段，空白问题自然无法解决；reduce如果用来累加对象，也会得到混合字段的单一行，不符合表格行数据的要求。

扩展：适配任意行数的动态数据 #

无论randomData里两类数据的行数差异多大，上面的代码都会自动取最长行数补全，确保所有字段在每行都有值（空字符串或null），彻底消除Ag-Grid的空白单元格。

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