在js中转置表数据

Question

我正在使用 prime React 的 datatable 组件。该组件采用一个对象数组，并为对象的每个键创建一列，并为数组中的每个对象创建一行。这意味着这个对象：

const tableData = [
    {
         code: 5000,
         name: 'Plan 1',
         category: 'Category 1',
         quantity: 1,
    },
    {
         code: 1000,
         name: 'Plan 2',
         category: 'Category 2',
         quantity: 2,
    },
    
    {    
         code: 15000,
         name: 'Plan 3',
         category: 'Category 3',
         quantity: 3,
    },
]

<DataTable value={tableData}>
    <Column field="code" header="Code" />
    <Column field="name" header="Name" />
    <Column field="category" header="Category" />
    <Column field="quantity" header="Quantity" />
</DataTable>

将生成一个如下所示的表格：

到目前为止一切都很好。但是，我需要一种方法来操作数据，以便表将呈现如下：

如您所见，标题现在位于第一列中，每列代表给定的值

code

我认为我基本上寻找的是一种转置数据的方法。我只是不知道该怎么做。

Answer 1

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { ColumnGroup } from "primereact/columngroup";
import { Row } from "primereact/row";

const TransposedTable = () => {
  const tableData = [
    { header: "Code", values: [5000, 1000, 15000] },
    { header: "Name", values: ["Plan 1", "Plan 2", "Plan 3"] },
    { header: "Category", values: ["Category 1", "Category 2", "Category 3"] },
    { header: "Quantity", values: [1, 2, 3] },
  ];
  const headerGroup = (
    <ColumnGroup>
      <Row>
        {tableData.map((data) => (
          <Column key={data.header} field={data.header} header={data.header} />
        ))}
      </Row>
    </ColumnGroup>
  );
  const dataRows = tableData[0].values.map((_, idx) => (
    <Row key={idx}>
      {tableData.map((data) => (
        <Column
          key={data.header}
          field={data.header}
          header={data.header}
          body={data.values[idx]}
        />
      ))}
    </Row>
  ));
  return (
    <div className="card">
      <DataTable value={[{}]} resizableColumns columnResizeMode="expand">
        <thead> {headerGroup} </thead> <tbody> {dataRows} </tbody>
      </DataTable>
    </div>
  );
};

export default TransposedTable;

这是我的实际想法，而不是确切的答案，因为我们需要以

column

方式转置数据。 还检查了 Prime React 文档。您可以查看这里供您参考。