# Use Legacy Grid Templates

## Description

Use this article when maintaining an application that uses the obsolete `cellRender`, `cell`, `headerCell`, `headerCellRender`, `footerCell`, `filterCell`, or `filterCellRender` props. For new implementations, configure the corresponding option in the [`cells` prop](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#cells).

## Solution

The obsolete cell-template props remain available for applications that use earlier versions of the Grid. These props will be removed in the next major release. The snippets in this article are for maintaining existing applications and are not runnable demos.

### Use a Data Cell Template

Use `cellRender` to customize all data cells, or set `cell` on a column to customize that column.

```vue
<Grid :cell-render="'legacyDataCell'">
<template #legacyDataCell="{ props }">
<td :class="props.class">
{{ props.dataItem[props.field] }}
</td>
</template>
</Grid>
```

```vue
<Grid :columns="[{ field: 'ProductName', cell: legacyCellRender }]" />
```

### Use a Header Template

Use `headerCell` or `headerCellRender` to customize a Grid header in an earlier Grid version.

```vue
<Grid :columns="[{ field: 'ProductName', headerCell: legacyHeaderCell }]" />
```

### Use a Footer Template

Use `footerCell` to customize a Grid footer in an earlier Grid version.

```vue
<Grid :columns="[{ field: 'UnitPrice', footerCell: legacyFooterCell }]" />
```

### Use a Filter Template

Use `filterCell` on a column or `filterCellRender` on the Grid to customize a filter cell in an earlier Grid version. Replace these props with `cells.filterCell` when you update the application.

```vue
<Grid
 :filterable="true"
 :columns="[{ field: 'ProductName', filterCell: 'legacyFilterCell' }]"
>
<template #legacyFilterCell="{ props }">
<input :value="props.value" @input="props.onChange" />
</template>
</Grid>
```

## See Also

* [Kendo UI for Vue Grid Custom Cells Documentation](https://www.telerik.com/kendo-vue-ui-develop/components/grid/custom-rendering/custom-cells)
* [Kendo UI for Vue Grid Custom Headers Documentation](https://www.telerik.com/kendo-vue-ui-develop/components/grid/custom-rendering/custom-headers)
* [Kendo UI for Vue Grid Custom Footers Documentation](https://www.telerik.com/kendo-vue-ui-develop/components/grid/custom-rendering/custom-footers)
* [Kendo UI for Vue Grid API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)