3.2.13 Merge cells in the table with variable number of columns

The introduction

This example as well as the previous one, demonstrates the ability to dynamically merge cells vertically and horizontally - for example, it would be useful for building complex headers of dynamic tables. Such association is performed by the component «Resizable pattern» (with the option of spanning rows/ columns).

Let's build extemporaneous Gantt chart - is a table with the not fixed number of columns. Part of the columns (static) will always be present in the table (Phase, Task, Duration). Another part of the columns (dynamic) will be specified by the number of days in a randomly chosen month. At the same time, the header of the dynamic columns will be represented by 3 hierarchical levels:

  1. Month (the cell spans all columns are assigned to days)

  2. Week (the cell spans a few day columns within the week)

  3. Day (the cell does not span)

Also there are vertical cells merging: spanning rows (Project phase column).