如何将数据添加到MUI表列，而不是在行？

Question

我一直在为此而大脑，但似乎无法找到解决方案。如何将其添加到此表列，而不是按行添加？ 在第57-67行中，首先创建行，然后在行填充行，通过数据从左到右。

给出的数据看起来像：

const data = [
   {name: "sample_name",
    calories: "19",
    fat: "90",
    carbs: 70,
    protein: 90},

{name: "sample_name",
    calories: "19",
    fat: "90",
    carbs: 70,
    protein: 90},
]

我提到的行是需要数据中的1个对象，并将其附加在行列中。 我与看起来像这样的数据一起工作：

const name = ["richard","nixon"]
const calories = [9, 9, 0, 9, 0, 5, 8]
const fat = [10, 9 , 9]
const carbs = [11, 3, 4,5 ]
const protein = [1, 1]

我只想能够将名称数据插入“名称”列...等等...这也应该使我更容易使用Textfield+Button Action动态插入每列的更多数据

对我来说，这是一个数据问题，而不是物质UI。您需要将行和列数据提供到表格，无论您使用哪个库，这就是构建表的方式。因此，如果您通过列获得数据，则需要简化器或方法将它们转换为行。这是一个超快速又肮脏的例子：

const rawData = {
  name: ["Ice cream", "Sno cone"],
  calories: [32, 45]
};
let columns = Object.keys(rawData);
let rows = rawData.name.map((name, i) => {
  return { name, calories: rawData.calories[i] };
});
/*
rows = ["name", "calories"]
columns = [
  { name: "Ice cream", calories: 32 },
  { name: "Sno cone", calories: 45 },
];
*/

显然，这是一个快速的例子，不是很容易扩展，但应该引导您朝着良好的方向发展。也许可以更优雅地构建行数据的还原器。但是，这将使您能够按预期构建桌子：

<TableContainer component={Paper}>
  <Table>
    <TableHead>
      <TableRow>
        {columns.map((i) => (
          <TableCell>{i}</TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.calories}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

Answer 1