The "Detail Row" feature displays data row details on an expandable pane. The pane can be expanded and collapsed either programmatically or via the Grid's UI.
The "Detail Row" feature requires the following plugins:
Note that the plugin order is important.
Add the required plugins listed above to the Grid and specify the detail row component via the
contentComponent property to set up a simple Grid with detail rows.
NOTE: The Detail Row identifies rows by their sequence number. However, data processing plugins can change this number. For example, when rows are sorted or grouped by pages. Use the Grid's getRowId function to specify a static row identifier.
In uncontrolled mode, you can specify the initially expanded detail rows using the
In controlled mode, pass an array of the expanded row IDs to the
expandedRowIds property and handle the
onExpandedRowIdsChange event to control the detail rows' expanded state externally.