import { ColDef , GridOptions , IDoesFilterPassParams , IFilterComp , IFilterParams , } from '@ag-grid-community/core' ; const isNumeric = ( n ) => ! isNaN ( parseFloat ( n ) ) && isFinite ( parseFloat ( n ) ) ; const getNumberFilter = ( ) => { return class NumberFilter implements IFilterComp { filterParams ! : IFilterParams ; filterText : string | null = null ; eFilterText : any ; params ! : IFilterParams ; gui : any ; onFilterChanged ! : ( ) => void ; init ( params ) { this . filterParams = params ; this . filterText = null ; this . params = params ; this . setupGui ( ) ; } setupGui ( ) { this . gui = document . createElement ( 'div' ) ; this . gui . innerHTML = '<div style="padding: 4px;">' + '<div style="font-weight: bold;">Greater than: </div>' + '<div><input style="margin: 4px 0px 4px 0px;" type="number" id="filterText" placeholder="Number of medals..."/></div>' + '</div>' ; const that = this ; this . onFilterChanged = function ( ) { that . extractFilterText ( ) ; that . params . filterChangedCallback ( ) ; } ; this . eFilterText = this . gui . querySelector ( '#filterText' ) ; this . eFilterText . addEventListener ( 'input' , this . onFilterChanged ) ; } extractFilterText ( ) { this . filterText = this . eFilterText . value ; } getGui ( ) { return this . gui ; } doesFilterPass ( params ) { if ( ! this . isFilterActive ( ) ) { return false ; } const { api , colDef , column , columnApi , context } = this . filterParams ; const { node } = params ; const value = this . filterParams . valueGetter ( { api , colDef , column , columnApi , context , data : node . data , getValue : ( field ) => node . data [ field ] , node , } ) ; const filterValue = this . filterText ; if ( ! value ) return false ; return Number ( value ) > Number ( filterValue ) ; } isFilterActive ( ) { return ( this . filterText !== null && this . filterText !== undefined && this . filterText !== '' && isNumeric ( this . filterText ) ) ; } getModel ( ) { return this . isFilterActive ( ) ? Number ( this . eFilterText . value ) : null ; } setModel ( model ) { this . eFilterText . value = model ; this . extractFilterText ( ) ; } destroy ( ) { this . eFilterText . removeEventListener ( 'input' , this . onFilterChanged ) ; } getModelAsString ( ) { return this . isFilterActive ( ) ? '>' + this . filterText : '' ; } } ; } ; const columnDefs = [ { field : 'athlete' , width : 150 , filter : false } , { field : 'gold' , width : 100 , filter : 'customNumberFilter' , suppressMenu : true , } , { field : 'silver' , width : 100 , filter : 'customNumberFilter' , suppressMenu : true , } , { field : 'bronze' , width : 100 , filter : 'customNumberFilter' , suppressMenu : true , } , { field : 'total' , width : 100 , filter : 'customNumberFilter' , suppressMenu : true , } , ] ; const gridOptions = { defaultColDef : { editable : true , sortable : true , flex : 1 , minWidth : 100 , filter : true , floatingFilter : true , resizable : true , } , components : { customNumberFilter : getNumberFilter ( ) , } , columnDefs : columnDefs , rowData : null , } ; document . addEventListener ( 'DOMContentLoaded' , ( ) => { const 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 ( data => { gridOptions . api ! . setRowData ( data ) ; } ) ; } ) ;