# Detail-Row Template

The detail rows of the 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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#detail) property of the Grid to a component, a render function, or a slot.
2. Define the [`expandField`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/custom-rendering/detail/source.txt)

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

## Suggested Links

* [Grid with Custom Template, Row Details and Grouping](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-details-template-with-grouping)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)