import { CellClassParams , CellStyle , ColDef , ColGroupDef , GetContextMenuItemsParams , GridOptions , ICellRendererParams , MenuItemDef , NewValueParams , RowSelectedEvent , SelectionChangedEvent } from '@ag-grid-community/core' ; declare function getPersonFilter ( ) ; declare function getWinningsFilter ( ) ; declare function getCountryCellRenderer ( ) ; var colNames = [ 'Station' , 'Railway' , 'Street' , 'Address' , 'Toy' , 'Soft Box' , 'Make and Model' , 'Longest Day' , 'Shortest Night' , ] ; var countries = [ { country : 'Ireland' , continent : 'Europe' , language : 'English' } , { country : 'Spain' , continent : 'Europe' , language : 'Spanish' } , { country : 'United Kingdom' , continent : 'Europe' , language : 'English' } , { country : 'France' , continent : 'Europe' , language : 'French' } , { country : 'Germany' , continent : 'Europe' , language : 'German' } , { country : 'Luxembourg' , continent : 'Europe' , language : 'French' } , { country : 'Sweden' , continent : 'Europe' , language : 'Swedish' } , { country : 'Norway' , continent : 'Europe' , language : 'Norwegian' } , { country : 'Italy' , continent : 'Europe' , language : 'Italian' } , { country : 'Greece' , continent : 'Europe' , language : 'Greek' } , { country : 'Iceland' , continent : 'Europe' , language : 'Icelandic' } , { country : 'Portugal' , continent : 'Europe' , language : 'Portuguese' } , { country : 'Malta' , continent : 'Europe' , language : 'Maltese' } , { country : 'Brazil' , continent : 'South America' , language : 'Portuguese' } , { country : 'Argentina' , continent : 'South America' , language : 'Spanish' } , { country : 'Colombia' , continent : 'South America' , language : 'Spanish' } , { country : 'Peru' , continent : 'South America' , language : 'Spanish' } , { country : 'Venezuela' , continent : 'South America' , language : 'Spanish' } , { country : 'Uruguay' , continent : 'South America' , language : 'Spanish' } , { country : 'Belgium' , continent : 'Europe' , language : 'French' } , ] ; var games = [ 'Chess' , 'Cross and Circle' , 'Daldøs' , 'Downfall' , 'DVONN' , 'Fanorona' , 'Game of the Generals' , 'Ghosts' , 'Abalone' , 'Agon' , 'Backgammon' , 'Battleship' , 'Blockade' , 'Blood Bowl' , 'Bul' , 'Camelot' , 'Checkers' , 'Go' , 'Gipf' , 'Guess Who?' , 'Hare and Hounds' , 'Hex' , 'Hijara' , 'Isola' , 'Janggi (Korean Chess)' , 'Le Jeu de la Guerre' , 'Patolli' , 'Plateau' , 'PÜNCT' , 'Rithmomachy' , 'Sáhkku' , 'Senet' , 'Shogi' , 'Space Hulk' , 'Stratego' , 'Sugoroku' , 'Tâb' , 'Tablut' , 'Tantrix' , 'Wari' , 'Xiangqi (Chinese chess)' , 'YINSH' , 'ZÈRTZ' , 'Kalah' , 'Kamisado' , 'Liu po' , 'Lost Cities' , 'Mad Gab' , 'Master Mind' , "Nine Men's Morris" , 'Obsession' , 'Othello' , ] ; var booleanValues = [ true , 'true' , false , 'false' ] ; var firstNames = [ 'Sophie' , 'Isabelle' , 'Emily' , 'Olivia' , 'Lily' , 'Chloe' , 'Isabella' , 'Amelia' , 'Jessica' , 'Sophia' , 'Ava' , 'Charlotte' , 'Mia' , 'Lucy' , 'Grace' , 'Ruby' , 'Ella' , 'Evie' , 'Freya' , 'Isla' , 'Poppy' , 'Daisy' , 'Layla' , ] ; var lastNames = [ 'Beckham' , 'Black' , 'Braxton' , 'Brennan' , 'Brock' , 'Bryson' , 'Cadwell' , 'Cage' , 'Carson' , 'Chandler' , 'Cohen' , 'Cole' , 'Corbin' , 'Dallas' , 'Dalton' , 'Dane' , 'Donovan' , 'Easton' , 'Fisher' , 'Fletcher' , 'Grady' , 'Greyson' , 'Griffin' , 'Gunner' , 'Hayden' , 'Hudson' , 'Hunter' , 'Jacoby' , 'Jagger' , 'Jaxon' , 'Jett' , 'Kade' , 'Kane' , 'Keating' , 'Keegan' , 'Kingston' , 'Kobe' , ] ; var months = [ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'May' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Oct' , 'Nov' , 'Dec' , ] ; var dataSize = '.1x22' ; var groupColumn = { headerName : 'Group' , width : 200 , field : 'name' , valueGetter : function ( params ) { if ( params . node && params . node . group ) { return params . node . key ; } else { return params . data [ params . colDef . field ! ] ; } } , cellRenderer : 'agGroupCellRenderer' , headerCheckboxSelection : true , headerCheckboxSelectionFilteredOnly : true , cellRendererParams : { checkbox : true , } , } ; const gridOptions = { defaultColDef : { editable : true , sortable : true , minWidth : 100 , filter : true , floatingFilter : true , resizable : true , } , components : { personFilter : getPersonFilter ( ) , } , sideBar : true , rowGroupPanelShow : 'always' , pivotPanelShow : 'always' , enableRtl : true , animateRows : true , statusBar : { statusPanels : [ { statusPanel : 'agAggregationComponent' } ] , } , enableRangeSelection : true , rowSelection : 'multiple' , quickFilterText : undefined , groupSelectsChildren : true , suppressRowClickSelection : true , autoGroupColumnDef : groupColumn , onRowSelected : rowSelected , onSelectionChanged : selectionChanged , getBusinessKeyForNode : function ( node ) { if ( node . data ) { return node . data . name ; } else { return '' ; } } , getContextMenuItems : getContextMenuItems , } ; function getContextMenuItems ( params ) { var result = params . defaultItems ! . splice ( 0 ) ; result . push ( { name : 'Custom Menu Item' , icon : '<img src="https://www.ag-grid.com/examples-assets/lab.png" style="width: 14px;" />' , action : function ( ) { var value = params . value ? params . value : '<empty>' ; window . alert ( 'You clicked a custom menu item on cell ' + value ) ; } , } ) ; return result ; } var firstColumn = { headerName : 'Name' , field : 'name' , width : 200 , editable : true , enableRowGroup : true , filter : 'personFilter' , checkboxSelection : function ( params ) { return params . columnApi . getRowGroupColumns ( ) . length === 0 ; } , headerCheckboxSelection : function ( params ) { return params . columnApi . getRowGroupColumns ( ) . length === 0 ; } , headerCheckboxSelectionFilteredOnly : true , icons : { sortAscending : '<i class="fa fa-sort-alpha-up"/>' , sortDescending : '<i class="fa fa-sort-alpha-down"/>' , } , } ; var defaultCols = [ { headerName : 'Participant' , children : [ firstColumn , { field : 'language' , width : 150 , editable : true , filter : 'agSetColumnFilter' , cellRenderer : languageCellRenderer , cellEditor : 'agSelectCellEditor' , enableRowGroup : true , enablePivot : true , cellEditorParams : { values : [ 'English' , 'Spanish' , 'French' , 'Portuguese' , 'German' , 'Swedish' , 'Norwegian' , 'Italian' , 'Greek' , 'Icelandic' , 'Portuguese' , 'Maltese' , ] , } , pinned : 'right' , headerTooltip : 'Example tooltip for Language' , } , { field : 'country' , width : 150 , editable : true , cellRenderer : getCountryCellRenderer ( ) , enableRowGroup : true , enablePivot : true , cellEditor : 'agRichSelectCellEditor' , cellEditorParams : { cellRenderer : getCountryCellRenderer ( ) , values : [ 'Argentina' , 'Brazil' , 'Colombia' , 'France' , 'Germany' , 'Greece' , 'Iceland' , 'Ireland' , 'Italy' , 'Malta' , 'Portugal' , 'Norway' , 'Peru' , 'Spain' , 'Sweden' , 'United Kingdom' , 'Uruguay' , 'Venezuela' , 'Belgium' , 'Luxembourg' , ] , } , filterParams : { cellRenderer : getCountryCellRenderer ( ) , } , } , ] , } , { headerName : 'Game of Choice' , children : [ { headerName : 'Game Name' , field : 'game.name' , width : 180 , editable : true , filter : 'agSetColumnFilter' , tooltipField : 'game.name' , cellClass : function ( ) { return 'alphabet' ; } , enableRowGroup : true , enablePivot : true , pinned : 'left' , icons : { sortAscending : '<i class="fa fa-sort-alpha-up"/>' , sortDescending : '<i class="fa fa-sort-alpha-down"/>' , } , } , { headerName : 'Bought' , field : 'game.bought' , filter : 'agSetColumnFilter' , editable : true , width : 100 , enableRowGroup : true , enablePivot : true , enableValue : true , cellRenderer : booleanCellRenderer , cellStyle : { 'text-align' : 'center' } , comparator : booleanComparator , filterParams : { cellRenderer : booleanFilterCellRenderer } , } , ] , } , { groupId : 'performance' , children : [ { field : 'bankBalance' , width : 150 , editable : true , filter : getWinningsFilter ( ) , cellRenderer : currencyRenderer , cellStyle : currencyCssFunc , filterParams : { cellRenderer : currencyRenderer } , enableValue : true , icons : { sortAscending : '<i class="fa fa-sort-amount-up"/>' , sortDescending : '<i class="fa fa-sort-amount-down"/>' , } , } , { headerName : 'Extra Info 1' , columnGroupShow : 'open' , width : 150 , editable : false , sortable : false , suppressMenu : true , cellStyle : { 'text-align' : 'right' } , cellRenderer : function ( ) { return 'Abra...' ; } , } , { headerName : 'Extra Info 2' , columnGroupShow : 'open' , width : 150 , editable : false , sortable : false , suppressMenu : true , cellStyle : { 'text-align' : 'left' } , cellRenderer : function ( ) { return '...cadabra!' ; } , } , ] , } , { field : 'rating' , width : 100 , editable : true , cellRenderer : ratingRenderer , enableRowGroup : true , enablePivot : true , enableValue : true , filterParams : { cellRenderer : ratingFilterRenderer } , } , { field : 'totalWinnings' , filter : 'agNumberColumnFilter' , editable : true , newValueHandler : numberNewValueHandler , width : 150 , enableValue : true , cellRenderer : currencyRenderer , cellStyle : currencyCssFunc , icons : { sortAscending : '<i class="fa fa-sort-amount-up"/>' , sortDescending : '<i class="fa fa-sort-amount-down"/>' , } , } , ] ; var monthGroup = { headerName : 'Monthly Breakdown' , children : [ ] , } ; defaultCols . push ( monthGroup ) ; months . forEach ( function ( month ) { var child = { headerName : month , field : month . toLocaleLowerCase ( ) , width : 100 , filter : 'agNumberColumnFilter' , editable : true , enableValue : true , cellClassRules : { 'good-score' : 'typeof x === "number" && x > 50000' , 'bad-score' : 'typeof x === "number" && x < 10000' , } , newValueHandler : numberNewValueHandler , cellRenderer : currencyRenderer , cellStyle : { 'text-align' : 'right' } , } ; monthGroup . children . push ( child ) ; } ) ; function getColCount ( ) { switch ( dataSize ) { case '10x100' : return 100 ; default : return 22 ; } } function getRowCount ( ) { switch ( dataSize ) { case '.1x22' : return 100 ; case '1x22' : return 1000 ; case '10x100' : return 10000 ; case '100x22' : return 100000 ; default : return - 1 ; } } function createCols ( ) { var colCount = getColCount ( ) ; var columns = defaultCols . slice ( 0 , colCount ) ; for ( var col = 22 ; col < colCount ; col ++ ) { var colName = colNames [ col % colNames . length ] ; var colDef = { headerName : colName , field : 'col' + col , width : 200 , editable : true , } ; columns . push ( colDef ) ; } return columns ; } var loadInstance = 0 ; function createData ( ) { loadInstance ++ ; var loadInstanceCopy = loadInstance ; gridOptions . api ! . showLoadingOverlay ( ) ; var colDefs = createCols ( ) ; var rowCount = getRowCount ( ) ; var colCount = getColCount ( ) ; var row = 0 ; var data = [ ] ; var intervalId = setInterval ( function ( ) { if ( loadInstanceCopy != loadInstance ) { clearInterval ( intervalId ) ; return ; } for ( var i = 0 ; i < 1000 ; i ++ ) { if ( row < rowCount ) { var rowItem = createRowItem ( row , colCount ) ; data . push ( rowItem ) ; row ++ ; } } if ( row >= rowCount ) { clearInterval ( intervalId ) ; setTimeout ( function ( ) { gridOptions . api ! . setColumnDefs ( colDefs ) ; gridOptions . api ! . setRowData ( data ) ; } , 0 ) ; } } , 0 ) ; } function createRowItem ( row , colCount ) { var rowItem = { } ; var countriesToPickFrom = Math . floor ( countries . length * ( ( ( row % 3 ) + 1 ) / 3 ) ) ; var countryData = countries [ ( row * 19 ) % countriesToPickFrom ] ; rowItem . country = countryData . country ; rowItem . continent = countryData . continent ; rowItem . language = countryData . language ; var firstName = firstNames [ row % firstNames . length ] ; var lastName = lastNames [ row % lastNames . length ] ; rowItem . name = firstName + ' ' + lastName ; rowItem . game = { name : games [ Math . floor ( ( ( row * 13 ) / 17 ) * 19 ) % games . length ] , bought : booleanValues [ row % booleanValues . length ] , } ; rowItem . bankBalance = Math . round ( pseudoRandom ( ) * 10000000 ) / 100 - 3000 ; rowItem . rating = Math . round ( pseudoRandom ( ) * 5 ) ; var totalWinnings = 0 ; months . forEach ( function ( month ) { var value = Math . round ( pseudoRandom ( ) * 10000000 ) / 100 - 20 ; rowItem [ month . toLocaleLowerCase ( ) ] = value ; totalWinnings += value ; } ) ; rowItem . totalWinnings = totalWinnings ; for ( var col = defaultCols . length ; col < colCount ; col ++ ) { var value ; var randomBit = pseudoRandom ( ) . toString ( ) . substring ( 2 , 5 ) ; value = colNames [ col % colNames . length ] + '-' + randomBit + ' - (' + ( row + 1 ) + ',' + col + ')' ; rowItem [ 'col' + col ] = value ; } return rowItem ; } var seed = 123456789 ; var m = Math . pow ( 2 , 32 ) ; var a = 1103515245 ; var c = 12345 ; function pseudoRandom ( ) { seed = ( a * seed + c ) % m ; return seed / m ; } function selectionChanged ( event ) { console . log ( 'Callback selectionChanged: selection count = ' + gridOptions . api ! . getSelectedNodes ( ) . length ) ; } function rowSelected ( event ) { if ( Number ( event . node . id ) < 10 ) { var valueToPrint = event . node . group ? 'group (' + event . node . key + ')' : event . node . data . name ; console . log ( 'Callback rowSelected: ' + valueToPrint ) ; } } var COUNTRY_CODES = { Ireland : 'ie' , Luxembourg : 'lu' , Belgium : 'be' , Spain : 'es' , 'United Kingdom' : 'gb' , France : 'fr' , Germany : 'de' , Sweden : 'se' , Italy : 'it' , Greece : 'gr' , Iceland : 'is' , Portugal : 'pt' , Malta : 'mt' , Norway : 'no' , Brazil : 'br' , Argentina : 'ar' , Colombia : 'co' , Peru : 'pe' , Venezuela : 've' , Uruguay : 'uy' , } ; function numberNewValueHandler ( params ) { var newValue = params . newValue ; var valueAsNumber ; if ( newValue === null || newValue === undefined || newValue === '' ) { valueAsNumber = null ; } else { valueAsNumber = parseFloat ( params . newValue ) ; } var field = params . colDef . field ! ; var data = params . data ; data [ field ] = valueAsNumber ; return true ; } function currencyCssFunc ( params ) { if ( params . value !== null && params . value !== undefined && params . value < 0 ) { return { color : 'red' , 'text-align' : 'right' , 'font-weight' : 'bold' } ; } else { return { 'text-align' : 'right' } ; } } function ratingFilterRenderer ( params ) { return ratingRendererGeneral ( params . value , true ) ; } function ratingRenderer ( params ) { return ratingRendererGeneral ( params . value , false ) ; } function ratingRendererGeneral ( value , forFilter ) { if ( value === '(Select All)' ) { return value ; } var result = '<span>' ; for ( var i = 0 ; i < 5 ; i ++ ) { if ( value > i ) { result += '<img src="https://www.ag-grid.com/example-assets/gold-star.png" />' ; } } if ( forFilter && Number ( value ) === 0 ) { result += '(No stars)' ; } return result ; } function currencyRenderer ( params ) { if ( params . value === null || params . value === undefined ) { return null ; } else if ( isNaN ( params . value ) ) { return 'NaN' ; } else { if ( params . node . group && params . column ! . getAggFunc ( ) === 'count' ) { return params . value ; } else { return ( '&pound;' + Math . floor ( params . value ) . toString ( ) . replace ( /(\d)(?=(\d{3})+(?!\d))/g , '$1,' ) ) ; } } } function booleanComparator ( value1 , value2 ) { var value1Cleaned = booleanCleaner ( value1 ) ; var value2Cleaned = booleanCleaner ( value2 ) ; var value1Ordinal = value1Cleaned === true ? 0 : value1Cleaned === false ? 1 : 2 ; var value2Ordinal = value2Cleaned === true ? 0 : value2Cleaned === false ? 1 : 2 ; return value1Ordinal - value2Ordinal ; } var count = 0 ; function booleanCellRenderer ( params ) { count ++ ; if ( count <= 1 ) { } var valueCleaned = booleanCleaner ( params . value ) ; if ( valueCleaned === true ) { return "<span title='true'>&#10004;</span>" ; } else if ( valueCleaned === false ) { return "<span title='false'>&#10006;</span>" ; } else if ( params . value !== null && params . value !== undefined ) { return params . value . toString ( ) ; } else { return null ; } } function booleanFilterCellRenderer ( params ) { var valueCleaned = booleanCleaner ( params . value ) ; if ( valueCleaned === true ) { return '&#10004;' ; } else if ( valueCleaned === false ) { return '&#10006;' ; } else if ( params . value === '(Select All)' ) { return params . value ; } else { return '(empty)' ; } } function booleanCleaner ( value ) { if ( value === 'true' || value === true || value === 1 ) { return true ; } else if ( value === 'false' || value === false || value === 0 ) { return false ; } else { return null ; } } function languageCellRenderer ( params ) { if ( params . $scope ) { return ( "<span ng-click='clicked=true' ng-show='!clicked'>Click Me</span>" + "<span ng-click='clicked=false' ng-show='clicked' ng-bind='data.language'></span>" ) ; } else if ( params . value !== null && params . value !== undefined ) { return params . value ; } else { return null ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; createData ( ) ; } ) ;