javascript - React, how to construct a table by columns instead of by rows

Question

I am working with react, I want to create a material-ui table with certain caracteristics. I have an array of elements where every element represent a column of the table, each column's elemnt has a name and a number of how many cells cover.

so for example a column is something like this:

    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},
...
]

And the whole table array is something like:

table=[column1, column2,...]

the result of column1 and column2:

I need something similar to Mui.TableRow but for iterate columns.

I know that every cell would be like this:

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

But I dont know how to separate each column.

If someone could give me advice of how to do this or another approach it would be great.

Thanks!

Answer 1

等待大神答复