Example of Column Spanning in React Grid Component


This sample demonstrates the Grid component with the column spanning feature. In this sample, you will see multiple columns spanning.

More Details...


This feature enables you to span multiple adjacent cells. Use the colSpan attribute to define how many cells are to be spanned in the QueryCellInfo event. Additionally, you can freeze columns at specific positions by setting the freeze property to left, right, center and fixed in the column definition.

In this demo, you can see that the employee named Davolio is analyzing data from 9.00 AM to 10.00 AM, so the cells for that time are spanned. Similarly, another employee Buchanan is doing support work from 9.30 AM to 11.00 AM, and the cells are spanned accordingly. Also, the Employee ID column is frozen to the left.

Injecting Module:

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

More information on the column spanning can be found in this documentation section.