import { ColDef , GridOptions , ICellRendererParams } from '@ag-grid-community/core' ; const rowData = createData ( 100 , 'body' ) ; const pinnedTopRowData = createData ( 3 , 'pinned' ) ; const pinnedBottomRowData = createData ( 3 , 'pinned' ) ; function getColumnDefs ( ) { const columnDefs = [ ] ; alphabet ( ) . forEach ( function ( letter ) { const colDef = { headerName : letter , field : letter , width : 150 , } ; if ( letter === 'A' ) { colDef . pinned = 'left' ; } if ( letter === 'Z' ) { colDef . pinned = 'right' ; } columnDefs . push ( colDef ) ; } ) ; return columnDefs ; } const gridOptions = { columnDefs : getColumnDefs ( ) , rowData : rowData , pinnedTopRowData : pinnedTopRowData , pinnedBottomRowData : pinnedBottomRowData , isFullWidthCell : function ( rowNode ) { return rowNode . data . fullWidth ; } , fullWidthCellRenderer : function ( params ) { let cssClass ; let message ; if ( params . node . rowPinned ) { cssClass = 'example-full-width-pinned-row' ; message = 'Pinned full width row at index ' + params . rowIndex ; } else { cssClass = 'example-full-width-row' ; message = 'Normal full width row at index' + params . rowIndex ; } const eDiv = document . createElement ( 'div' ) ; eDiv . innerHTML = '<div class="' + cssClass + '"><button>Click</button> ' + message + '</div>' ; const eButton = eDiv . querySelector ( 'button' ) ! ; eButton . addEventListener ( 'click' , function ( ) { alert ( 'button clicked' ) ; } ) ; return eDiv . firstChild as any ; } , getRowHeight : function ( params ) { const isBodyRow = params . node . rowPinned === undefined ; const isFullWidth = params . node . data . fullWidth ; if ( isBodyRow && isFullWidth ) { return 75 ; } } , } ; function alphabet ( ) { return 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' . split ( '' ) ; } function createData ( count , prefix ) { const rowData = [ ] ; for ( let i = 0 ; i < count ; i ++ ) { const item = { } ; item . fullWidth = i % 3 === 2 ; alphabet ( ) . forEach ( function ( letter ) { item [ letter ] = prefix + ' (' + letter + ',' + i + ')' ; } ) ; rowData . push ( item ) ; } return rowData ; } document . addEventListener ( 'DOMContentLoaded' , ( ) => { const gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;