Detail-Row Template

Updated on Jun 29, 2026

The detail rows of the native Vue Grid by Kendo UI enable you to provide additional details about a particular row of table data through expanding or collapsing its content.

To define the detail rows:

1. Set the detail property of the Grid to a component, a render function, or a slot.
2. Define the expandField property to a field that will correspond to the expanded state of the item.

The following example demonstrates how to implement a Grid with detail rows using the template approach.

Change Theme

Theme

Loading ...

Alternatively, you can define the detail rows using the render function or named slots.

Suggested Links

• Grid with Custom Template, Row Details and Grouping
• API Reference of the Grid
• API Index of the Grid