javascript - React，如何按列而不是按行构造表

Question

我正在使用 react，我想创建一个具有某些特征的材料 UI 表。我有一个元素数组，其中每个元素代表表格的一列，每一列的元素都有一个名称和一些单元格覆盖的数量。

例如，一列是这样的：

    column1 =[
{name: 'A1', cells:2 },
{name: 'A2', cells:1},
{name: 'A3', cells:2},
{name: 'A4', cells:3},
...
]

column2 =[
{name: 'B1', cells:4 },
{name: 'B2', cells:1},
{name: 'B3', cells:3},
{name: 'B4', cells:1},
...
]

整个表数组类似于：

table=[column1, column2,...]

column1 和 column2 的结果：

我需要类似于 Mui.TableRow 但用于迭代列的东西。

我知道每个单元格都是这样的：

{column1.map((e) => {
    <Mui.TableCell style={{border: '4px solid grey'}} rowSpan={e.cells} >
         {e.name}
     </Mui.TableCell>
}

但我不知道如何分隔每一列。

如果有人可以就如何执行此操作或其他方法给我建议，那就太好了。

谢谢！

标签： javascriptreactjsreact-nativematerial-uinext.js