The native Vue Grid by Kendo UI enables you to customize the rendering of its cells.
To implement a custom cell:
- Use the
cellRenderprop that will customize all cells.
- Set the
celloption of the column to define a custom cell only for the particular column.
If you use both
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.
To customize the cells in the Grid, apply any of the following approaches:
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.