import { FirstDataRenderedEvent , GridOptions , ICellRendererParams , IFiltersToolPanel , ISetFilter , } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { headerName : 'Case Insensitive (default)' , field : 'colour' , filter : 'agSetColumnFilter' , filterParams : { caseSensitive : false , cellRenderer : colourCellRenderer , } , } , { headerName : 'Case Sensitive' , field : 'colour' , filter : 'agSetColumnFilter' , filterParams : { caseSensitive : true , cellRenderer : colourCellRenderer , } , } , ] , defaultColDef : { flex : 1 , minWidth : 225 , cellRenderer : colourCellRenderer , resizable : true , floatingFilter : true , } , sideBar : 'filters' , onFirstDataRendered : onFirstDataRendered , rowData : getData ( ) , } ; var FIXED_STYLES = 'vertical-align: middle; border: 1px solid black; margin: 3px; display: inline-block; width: 10px; height: 10px' ; var FILTER_TYPES = { insensitive : 'colour' , sensitive : 'colour_1' , } ; function colourCellRenderer ( params ) { if ( ! params . value || params . value === '(Select All)' ) { return params . value ; } return `<div style="background-color: ${ params . value . toLowerCase ( ) }; ${ FIXED_STYLES }"></div>${ params . value }` ; } function setModel ( type ) { const instance = gridOptions . api ! . getFilterInstance ( FILTER_TYPES [ type ] ) ! ! ; instance . setModel ( { values : MANGLED_COLOURS } ) ; gridOptions . api ! . onFilterChanged ( ) ; } function getModel ( type ) { const instance = gridOptions . api ! . getFilterInstance ( FILTER_TYPES [ type ] ) ! ; alert ( JSON . stringify ( instance . getModel ( ) , null , 2 ) ) ; } function setFilterValues ( type ) { const instance = gridOptions . api ! . getFilterInstance ( FILTER_TYPES [ type ] ) as ISetFilter ; instance . setFilterValues ( MANGLED_COLOURS ) ; instance . applyModel ( ) ; gridOptions . api ! . onFilterChanged ( ) ; } function getValues ( type ) { const instance = gridOptions . api ! . getFilterInstance ( FILTER_TYPES [ type ] ) as ISetFilter ; alert ( JSON . stringify ( instance . getValues ( ) , null , 2 ) ) ; } function reset ( type ) { const instance = gridOptions . api ! . getFilterInstance ( FILTER_TYPES [ type ] ) as ISetFilter ; instance . resetFilterValues ( ) ; instance . setModel ( null ) ; gridOptions . api ! . onFilterChanged ( ) ; } var MANGLED_COLOURS = [ 'ReD' , 'OrAnGe' , 'WhItE' , 'YeLlOw' ] ; function onFirstDataRendered ( params ) { ( ( gridOptions . api ! . getToolPanelInstance ( 'filters' ) as any ) as IFiltersToolPanel ) . expandFilters ( ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;