Example of Row Spanning in React Tree Grid Component

/
/
RowSpanningAPI

This sample demonstrates how the Tree Grid automatically merges adjacent cells containing same value across both rows and columns.

More Details...

Loading....
Description

In this demo, the "Start Date", "End Date", "Status", and "Permit Status" columns are merged when they share the same value. Row and column spanning can be enabled by setting enableRowSpan and enableColumnSpan to true, allowing the Tree Grid to merge adjacent cells both horizontally and vertically.

The "Phase Name" column remains frozen on the left side, achieved using the freeze property in the column definition.

Tree Grid features are separated into feature-wise modules. To use the frozen rows and columns feature, inject the Freeze module using the TreeGrid.Inject(Freeze) method

More information on the Tree Grid component can be found in this documentation section.