# Master-Detail Grids

The KendoReact Grid provides options for visualizing the relations between its parent and child records by displaying the table data in a hierarchical order.

<CtaPanelOverview></CtaPanelOverview>

## Master-Detail

To apply a hierarchical order to the desired records, use the [`detail`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#detail) property of the master Grid. The feature allows you to load the detail component which contains the corresponding child Grid records that are filtered by the parent key field value.

The following example demonstrates a master-detail Grid where expanding a row reveals a child Grid filtered to show only the records related to that parent item.

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

## Editable Master-Detail Grid

The KendoReact Grid enables you to update and delete data records inline for the detail Grid. The following example demonstrates how to implement [inline editing](https://www.telerik.com/kendo-react-ui-develop/components/grid/editing/editing-inline) for the detail component:



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

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)
