@EvgenJunior

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

Как создать таблицу, которая принимает какие-то данные и сама определяет какие строки и колонки должны схлопываться? Интересует функция, которая получается входные данные и возвращает разметку 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>
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
Элементы исходного массива - это данные столбцов. Соответственно, получаете количество строк (максимальная из длин вложенных массивов) и в качестве значения rowspan последним элементам столбцов устанавливаете

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

https://jsfiddle.net/th7w51kp/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы