# Spanning Columns

The KendoReact Grid supports spanning row content across multiple cells while retaining individual header and footer cells.

<CtaPanelOverview title="Use the React @Subject for Free" message="You can use the free feature set of the @Subject in production, with no sign-up or license required. @Subject is part of KendoReact, an enterprise-grade UI library with 120+ @FreemiumShortLink and premium components. To try out the @Subject premium functionality, @StartTrialLink."></CtaPanelOverview>

This can be achieved by easily by implementing a [`colSpan`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumnprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/colspan/func/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/colspan-headers/func/source.txt)

## Suggested Links

* [GridColumnProps](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumnprops)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)