import { FirstDataRenderedEvent , GridOptions , IDetailCellRendererParams } from '@ag-grid-community/core' ; const gridOptions = { masterDetail : true , isRowMaster : function ( dataItem ) { return dataItem ? dataItem . callRecords . length > 0 : false ; } , columnDefs : [ { field : 'name' , cellRenderer : 'agGroupCellRenderer' } , { field : 'account' } , { field : 'calls' } , { field : 'minutes' , valueFormatter : "x.toLocaleString() + 'm'" } , ] , defaultColDef : { flex : 1 , } , getRowNodeId : function ( data ) { return data . account ; } , detailCellRendererParams : { detailGridOptions : { columnDefs : [ { field : 'callId' } , { field : 'direction' } , { field : 'number' , minWidth : 150 } , { field : 'duration' , valueFormatter : "x.toLocaleString() + 's'" } , { field : 'switchCode' , minWidth : 150 } , ] , defaultColDef : { flex : 1 , } , } , getDetailRowData : function ( params ) { params . successCallback ( params . data . callRecords ) ; } , } as IDetailCellRendererParams , onFirstDataRendered : onFirstDataRendered , } ; function onFirstDataRendered ( params ) { setTimeout ( function ( ) { params . api . getDisplayedRowAtIndex ( 1 ) ! . setExpanded ( true ) ; } , 0 ) ; } function onBtClearMilaCalls ( ) { var milaSmithRowNode = gridOptions . api ! . getRowNode ( '177001' ) ! ; var milaSmithData = milaSmithRowNode . data ; milaSmithData . callRecords = [ ] ; gridOptions . api ! . applyTransaction ( { update : [ milaSmithData ] } ) ; } function onBtSetMilaCalls ( ) { var milaSmithRowNode = gridOptions . api ! . getRowNode ( '177001' ) ! ; var milaSmithData = milaSmithRowNode . data ; milaSmithData . callRecords = [ { name : 'susan' , callId : 579 , duration : 23 , switchCode : 'SW5' , direction : 'Out' , number : '(02) 47485405' , } , { name : 'susan' , callId : 580 , duration : 52 , switchCode : 'SW3' , direction : 'In' , number : '(02) 32367069' , } , ] ; gridOptions . api ! . applyTransaction ( { update : [ milaSmithData ] } ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/master-detail-dynamic-data.json' ) . then ( response => response . json ( ) ) . then ( function ( data ) { gridOptions . api ! . setRowData ( data ) ; } ) ; } ) ;