@progress/kendo-grid-react-wrapper/docs/columns.md

Kendo UI Grid wrapper for React

---
title: Column Templates
page_title: React Grid Wrapper - Column Templates - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI and learn how to configure the behavior of its columns."
slug: columntemplates_grid
position: 5
---

# Column Templates

The Kendo UI Grid wrapper for React supports options for customizing the content of its columns through templates.

Using column templates is applicable when, for example, the Grid columns are required to render complex displays (not single fields) and, as a result, you have to additionally configure the columns.

```sh
<GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" template="<span class='customElement' style='color:orange;'>#:UnitPrice#</span>" />
```

> * Templates are only supported in the form of strings. Templates in the form of [React components](https://reactjs.org/docs/react-component.html) are not currently supported.
> * The [`rowTemplate`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/rowtemplate) configuration is not currently supported.

For more information on column templates, refer to the documentation of the [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#column-templates).

{% meta height:510 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            batch: true,
            pageSize: 10,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        })
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                pageable={true} height={450}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" template="<span class='customElement' style='color:orange;'>#:UnitPrice#</span>" />
                <GridColumn field="UnitsInStock" title="Units In Stock" width="120px" />
                <GridColumn field="Discontinued" width="120px" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
* [API Reference of the Grid Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)