The native Vue Grid by Kendo UI enables you to customize the rendering of its footers.
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.
To customize the footer of the Grid, apply any of the following approaches:
The following example demonstrates how to customize the Grid headers by using named slots.
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.