使用 rowspan 创建动态表

Question

I am working with React and trying to create a dynamic table. The table looks like this.

I am working with this object:

[
{category: "Type One", subCategory: "One", val: 1, rowSpan: 4},
{category: "Type One", subCategory: "Two", val: 2, rowSpan: 4},
{category: "Type One", subCategory: "three", val: 3, rowSpan: 4},
{category: "Type One", subCategory: "Four", val: 4, rowSpan: 4},
{category: "Type Two", subCategory: "Five", val: 5, rowSpan: 2},
{category: "Type Two", subCategory: "Six", val: 6, rowSpan: 2},
{category: "Type Three", subCategory: "Seven", val: 7, rowSpan: 1},
{category: "Type Four", subCategory: "Eight", val: 8, rowSpan: 1},
]

This object is dynamic in nature and we may get upto 200 rows. each row will have similar structure.

I have something like this in mind:

body = myData.map(function(value) {
    return (
      <TableRow>
        <TableCell> { value.category} </TableCell>
        <TableCell> { value.subCategory} </TableCell>
        <TableCell> { value.val} </TableCell>
      </TableRow>
    )
  })

<Table>
   <TableBody>
       {body}
   </TableBody>
</Table>

Questions:

1. How can I set the row-span for first column to achieve desired result?
2. Does it make sense to create a table to get the desired result or I can use DIV with bootstrap ?

Answer 1

Assuming you are rendering a <table> , the <td> element has a rowspan attribute you can use:

<td rowspan={...}>

Of course, only generate that cell for the first row of a "category":

body = myData.map((value, i) => {
  const firstOfCategory = (i == 0) || (value.category != myData[i-1].category); 
  return (
    <tr>
      { firstOfCategory && <td rowspan={value.rowSpan}>{value.category}</td> }
      <td>{value.subCategory}</td>
      ...
    </tr>
  );
});

Answer 2

It look like this:

 Football Dragon League 4С…4 Dragon League 4С…4 Football FIFA 20. Amateur daily league Football FIFA 21. eSports Battle. International B FIFA 21. eSports Battle. International B Football FIFA. Elite League Football Kazakhstan. Premier League Kazakhstan. Premier League Football KLASK

ie duplicated values are not going to the second columns.