Detail RowsPremium
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.
Start Free Trial
Set the detail prop to a component that receives 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.
Controlled Expand State of Detail Rows
By default, the Grid manages which rows are expanded internally. Use 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 and update it in 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.
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.
Detail Rows and Row Reordering
You can combine detail rows with the Grid's built-in row reordering functionality. 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.