import { FirstDataRenderedEvent , GridOptions , ICellRendererParams , IFiltersToolPanel , } 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 ( ) , } ; const FIXED_STYLES = 'vertical-align: middle; border: 1px solid black; margin: 3px; display: inline-block; width: 10px; height: 10px' ; 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 onFirstDataRendered ( params ) { ; ( ( params . api . getToolPanelInstance ( 'filters' ) as any ) as IFiltersToolPanel ) . expandFilters ( ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { const gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;