# Spanned Columns

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

This can be achieved by easily by implementing a [`colSpan`](https://www.telerik.com/kendo-vue-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-vue-ui/grid/colspan/source.txt)

## Spanned Column Headers

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

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

## Suggested Links

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