Как динамически назначать rowspan ячейкам таблицы?

Question

[EvgenJunior]

Как создать таблицу, которая принимает какие-то данные и сама определяет какие строки и колонки должны схлопываться? Интересует функция, которая получается входные данные и возвращает разметку JSX.
Пример входных данных:

const data = [
        ['one'],
        ['one', 'two'],
        ['one', 'two'],
        ['one'],
        ['one', 'two', 'three']
    ]

Вот пример таблицы, которая должна получится:

<table>
    <tbody>
        <tr>
            <td rowSpan={3}>1.1</td>
            <td rowSpan={2}>1.2</td>
            <td rowSpan={2}>1.3</td>
            <td rowSpan={3}>1.4</td>
            <td>1.5</td>
        </tr>
         <tr>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
    </tbody>
</table>

Answer 1

[0xD34F]

Элементы исходного массива - это данные столбцов. Соответственно, получаете количество строк (максимальная из длин вложенных массивов) и в качестве значения rowspan последним элементам столбцов устанавливаете

1 + количество_строк - количество_элементов_в_данных_текущего_столбца

https://jsfiddle.net/th7w51kp/

Comments

[EvgenJunior]

Спасибо!