PrimeReact DataTable组件数据转置实现方法咨询

要实现将表头移到第一列、每列对应一个code相关数据的转置效果，核心是转换数据源的结构，让PrimeReact DataTable能按转置后的逻辑渲染。以下是具体实现步骤：

1. 转换数据源结构 #

原数据是每个对象对应一行，现在要转成每个属性对应一行，每个code对应一列。我们可以写一个转换函数，把原数组处理成符合要求的格式：

const transposeTableData = (originalData) => {
  // 提取所有需要展示的属性（以第一个对象的键为基准）
  const attributes = Object.keys(originalData[0]);

  // 生成转置后的数据数组
  return attributes.map(attr => {
    const row = { 
      attribute: attr.charAt(0).toUpperCase() + attr.slice(1) 
    };
    originalData.forEach(item => {
      row[item.code.toString()] = item[attr];
    });
    return row;
  });
};

// 调用转换函数得到转置后的数据
const transposedData = transposeTableData(tableData);

转置后的transposedData结构示例：

[
  { attribute: 'Code', '5000': 5000, '1000': 1000, '15000': 15000 },
  { attribute: 'Name', '5000': 'Plan 1', '1000': 'Plan 2', '15000': 'Plan 3' },
  { attribute: 'Category', '5000': 'Category 1', '1000': 'Category 2', '15000': 'Category 3' },
  { attribute: 'Quantity', '5000': 1, '1000': 2, '15000': 3 }
]

2. 配置DataTable组件 #

用转置后的数据源渲染表格，第一列固定展示属性名，其余列根据code动态生成：

<DataTable value={transposedData}>
  {/* 第一列：属性名称 */}
  <Column field="attribute" header="Attributes" />
  {/* 动态生成每个code对应的列 */}
  {tableData.map(item => (
    <Column 
      key={item.code} 
      field={item.code.toString()} 
      header={`Code ${item.code}`} 
    />
  ))}
</DataTable>

额外说明 #

• 如果原数据中不同对象的属性不统一，可先收集所有唯一属性名再执行转换。
• 若code为非字符串类型，需转成字符串作为对象键，避免渲染异常。
• 如需定制列的样式或内容，可在动态生成Column时通过body属性自定义渲染逻辑。

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