Spanned Columns

The KendoReact Grid supports the spanning of the row content over multiple cells of data while the individual header and footer cells are retained.

Use the React Data Grid for FreeYou can use the free feature set of the Data Grid in production, with no sign-up or license required. Data Grid is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To try out the Data Grid premium functionality, start a 30-day trial.

This can be achieved by easily by implementing a colSpan callback to control the visibility of the chosen column. It will make the row content to span over multiple cells.

In the sample below, the colSpan prop is configured for the Product Name column which will be spanned to the Category Name one.

Change Theme
Theme
Loading ...

Spanned Column Headers

You can also use the colSpan prop in order to span multiple columns headers like demonstrated in the sample below.

Change Theme
Theme
Loading ...
In this article
Spanned Column HeadersSuggested Links
Not finding the help you need?
Contact Support