Создать динамическую таблицу с размахом строк

Question

Я работаю с React и пытаюсь создать динамическую таблицу.Таблица выглядит следующим образом.

Я работаю с этим объектом:

[
{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},
]

ЭтоОбъект динамический по своей природе, и мы можем получить до 200 строк.каждый ряд будет иметь похожую структуру.

Я имею в виду что-то вроде этого:

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>

Вопросы:

1. Как я могу установить диапазон строк для первогоколонка для достижения желаемого результата?
2. Имеет ли смысл создать таблицу для получения желаемого результата или я могу использовать DIV с начальной загрузкой?

Answer 1

Предполагая, что вы визуализируете <table>, элемент <td> имеет атрибут rowspan, который вы можете использовать:

<td rowspan={...}>

Конечно, генерировать эту ячейку только для первого ряда «категории»:

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>
  );
});