How to dynamically assign rowspan to table cells?

Question

JavaScript

How to create a table that accepts some data and determines by itself which rows and columns should collapse? Interested in a function that takes input and returns JSX markup.
Input example:

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

Here is an example of a table that should turn out:

<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

The elements of the original array are the column data. Accordingly, you get the number of rows (the maximum of the lengths of the nested arrays) and set the rowspan value to the last elements of the columns

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

https://jsfiddle.net/th7w51kp/