New to Kendo UI for Vue? Start a free 30-day trial

Cell Template

The Kendo UI for Vue Native Grid enables you to customize the rendering of its cells.

Getting Started

To implement a custom cell:

Use the cellRender prop that will customize all cells.
Set thecell option of the column to define a custom cell only for the particular column.

If you use both cellRender and cell, the Grid will render the specified custom column cell. To render the desired cell, you can assign a Vue component, a render function, or a named slot to both properties.

Customization Approaches

To customize the cells in the Grid, apply any of the following approaches:

Using named slots
Using the render function

Using Named Slots

Change Theme

Theme

Loading ...

Using the render Function

The following example demonstrates how to customize the Grid cells by using a render function. More details about the render function, you can find in this Vue documentation article.