# Detail Rows

The detail rows of the Grid let you reveal extra information about a record by expanding it inline. The primary table stays compact while the expanded area can hold any content — field summaries, nested Grids, charts, or custom components.

<CtaPanelOverview></CtaPanelOverview>

Set the [`detail`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#detail) prop to a component that receives [`GridDetailRowProps`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/griddetailrowprops) and returns the content to render in the expanded area. The `dataItem` on those props contains the data of the master row being expanded.

The following example demonstrates a basic detail row setup where expanding a product row shows its stock levels, reorder details, and category information.

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

## Controlled Expand State of Detail Rows

By default, the Grid manages which rows are expanded internally. Use [`defaultDetailExpand`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#defaultdetailexpand) to pre-open specific rows on first render and let the Grid handle the rest.

Switch to controlled mode when you need to drive the expand state from outside the Grid — for example, to expand rows based on a route parameter, to restore open rows after a data reload, or to let another component open or close rows programmatically. Pass the current state to [`detailExpand`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#detailexpand) and update it in [`onDetailExpandChange`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#ondetailexpandchange). The value is a `DetailExpandDescriptor` object whose keys are the `dataItemKey` values of the expanded rows.

The following example demonstrates controlled expand state with **Expand All** and **Collapse All** buttons that drive the `detailExpand` prop directly from component state.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/detail-controlled/func/source.txt)

## Nested Grids in Detail Rows

When each master record owns a collection of related items, render a second Grid in the detail row. This creates a classic master-detail layout where the outer Grid shows summary rows and the inner Grid shows the associated records for the selected row.

Pass the embedded collection from `props.dataItem` directly to the nested Grid's `data` prop. When each master record holds its own sub-collection, no extra state or remote requests are needed.

The following example demonstrates a category Grid whose detail rows each contain a nested Grid listing the products in that category.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/detail-nested-grid/func/source.txt)

## Detail Rows and Row Reordering

You can combine detail rows with the Grid's [built-in row reordering functionality](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/row-reordering). Users can drag master rows into a new order while the detail content stays accessible by expanding each row.

To enable both features together, set `rowReorderable` and `detail` on the same Grid and add a column with `columnType="reorder"` as the drag handle.

The following example demonstrates row reordering alongside expandable detail rows, so users can reorganize the product list without losing access to the per-product details.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/row-reordering/detail-row/func/source.txt)

## Suggested Links

* [Row Reordering](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/row-reordering)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [API Reference of the GridDetailRow](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/griddetailrow)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)