Transpose table data in js

Question

I'm working with the datatable component from prime react. This component takes an array of objects and creates a column for each key of the object and a row for each object in the array. This means that this object:

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>

Will produce a table like this:

And so far so good. However, I need a way to manipulate the data so the table will be rendered like this:

As you can see, the headers are now in the first column and each column represents the values for a given code

I think that what I'm basically looking for is a way to transpose the data. I just can't find how to do it.

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;

This is my actual Idea and Not the Exact Answer since we need to transpose the data in a column-wise. Also checked on Prime React Documentation. You can check it out here for your reference.