import { ColDef , GridOptions , RowNode } from '@ag-grid-community/core' ; var dateFilterParams = { comparator : function ( filterLocalDateAtMidnight , cellValue ) { var cellDate = asDate ( cellValue ) ; if ( filterLocalDateAtMidnight . getTime ( ) === cellDate . getTime ( ) ) { return 0 ; } if ( cellDate < filterLocalDateAtMidnight ) { return - 1 ; } if ( cellDate > filterLocalDateAtMidnight ) { return 1 ; } } , } ; const columnDefs = [ { field : 'athlete' , minWidth : 180 } , { field : 'age' , filter : 'agNumberColumnFilter' , maxWidth : 80 } , { field : 'country' } , { field : 'year' , maxWidth : 90 } , { field : 'date' , filter : 'agDateColumnFilter' , filterParams : dateFilterParams , } , { field : 'gold' , filter : 'agNumberColumnFilter' } , { field : 'silver' , filter : 'agNumberColumnFilter' } , { field : 'bronze' , filter : 'agNumberColumnFilter' } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 120 , filter : true , } , animateRows : true , isExternalFilterPresent : isExternalFilterPresent , doesExternalFilterPass : doesExternalFilterPass , } ; var ageType = 'everyone' ; function isExternalFilterPresent ( ) { return ageType !== 'everyone' ; } function doesExternalFilterPass ( node ) { switch ( ageType ) { case 'below25' : return node . data . age < 25 ; case 'between25and50' : return node . data . age >= 25 && node . data . age <= 50 ; case 'above50' : return node . data . age > 50 ; case 'dateAfter2008' : return asDate ( node . data . date ) > new Date ( 2008 , 1 , 1 ) ; default : return true ; } } function asDate ( dateAsString ) { var splitFields = dateAsString . split ( '/' ) ; return new Date ( Number . parseInt ( splitFields [ 2 ] ) , Number . parseInt ( splitFields [ 1 ] ) - 1 , Number . parseInt ( splitFields [ 0 ] ) ) ; } function externalFilterChanged ( newValue ) { ageType = newValue ; gridOptions . api ! . onFilterChanged ( ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/olympic-winners.json' ) . then ( response => response . json ( ) ) . then ( function ( data ) { ( document . querySelector ( '#everyone' ) as HTMLInputElement ) . checked = true ; gridOptions . api ! . setRowData ( data ) ; } ) ; } ) ;