Spanning Columns
Updated on Aug 14, 2026
The KendoReact Grid supports spanning row content across multiple cells while retaining individual header and footer cells.
Use the React Grid for FreeYou can use the free feature set of the Grid in production, with no sign-up or license required. Grid is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To try out the 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.
Loading ...
Spanned Column Headers
You can also use the colSpan prop to span multiple column headers, as demonstrated in the sample below.
The following example demonstrates how to use the colSpan prop to span header cells across multiple columns, including spanning within a nested multi-level header structure.
Loading ...