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 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 footerCell property set. That cell will appear at the bottom of the column and will be always visible regardless of the vertical scrolling of the Grid. One can also set the footerClassName 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
Use a named slot to fully control the content of a Grid footer cell with standard Vue template syntax. The slot receives a props object that contains information about the current footer cell, such as:
dataItem—The data item for the current row.field—The field name of the current column.class—The CSS class of the current footer cell.
The following example demonstrates how to customize the Grid footers by using named slots.
Using the render Function
Use a render function to customize the content of Grid footer cells programmatically. This approach is useful when you need reusable rendering logic or when generating footer content dynamically.
The render function receives footer cell properties that provide access to the current row data, column field, and Grid-generated styling information.
The following example demonstrates how to customize the Grid footers by using a render function. More details about the render function, you can find in this Vue documentation article.