AG-Gird Master Detail Grid (detail can be a component) - angular

 Initialization : 

https://www.ag-grid.com/archive/25.0.0/documentation/angular/master-detail-custom-detail/

Key info: 

[masterDetail]="true" [detailCellRenderer]="detailCellRenderer" [frameworkComponents]="frameworkComponents"

{ field: 'name', cellRenderer: 'agGroupCellRenderer', // default ag-grid renderer for the selector },

 Detail gird panel height:

https://www.ag-grid.com/react-data-grid/master-detail-height/#:~:text=Detail%20Height%20Options,display%20in%20the%20detail%20section.

gridOptions.getRowHeight

getRowHeight = params => { const isDetailRow = params.node.detail; // for all rows that are not detail rows, return nothing if (!isDetailRow) { return undefined; } // otherwise return height based on number of rows in detail grid const detailPanelHeight = params.data.children.length * 50; return detailPanelHeight; };

 Master grid selectable row:

https://stackoverflow.com/questions/62304785/ag-grid-master-detail-hide-chevron-icon-when-there-is-no-detail-data

gridOptions.isRowMaster

this.isRowMaster = function(dataItem) {
  return dataItem ? dataItem.callRecords.length > 0 : false;
};