Footer Template
The Kendo UI for Vue Native Grid enables you to customize the rendering of its footers.
Getting Started
To implement a custom footer set the [footerCell]({% slug api_grid_gridcolumnprops %}#toc-footerCell) option of the column to define a custom footer cell only for the particular column. The Grid renders a single footer cell under each column that has its footerCellfooterClassName` to set a custom class to the footer cell.
To render the desired footer, you can assign a Vue component, a render function, or a named slot to both properties.
Customization Approaches
To customize the footer of the Grid, apply any of the following approaches:
Using Named Slots
The following example demonstrates how to customize the Grid headers by using named slots.
Using the render Function
The following example demonstrates how to customize the Grid headers by using a render function. More details about the render function, you can find in this Vue documentation article.
