Detail RowsPremium
The detail rows of the Grid enable you to provide additional details about a particular row of table data through expanding or collapsing its content.
Start Free Trial
To define the detail rows, set the detail property of the Grid to a custom function that returns a GridDetailRow component. The detailExpand prop is responsible for the expand state of the rows and expects an object of type DetailExpandDescriptor if you prefer to use the expand state in controlled mode.
The following example demonstrates how to enable detail rows, where clicking the expand icon on a row reveals additional information such as stock and order details.
Detail Rows Reordering
You can also combine the combine the Detail rows feature of the Grid with its built-in reordering functionality.
Below is a demo showcasing this functionality in action.