import { FirstDataRenderedEvent , GridOptions , IFiltersToolPanel , } from '@ag-grid-community/core' ; const gridOptions = { rowData : getRowData ( ) , columnDefs : [ { headerName : 'Set Filter Column' , field : 'col1' , filter : 'agSetColumnFilter' , flex : 1 , editable : true , } , ] , sideBar : 'filters' , onFirstDataRendered : onFirstDataRendered , } ; function getRowData ( ) { return [ { col1 : 'A' } , { col1 : 'A' } , { col1 : 'B' } , { col1 : 'B' } , { col1 : 'C' } , { col1 : 'C' } , ] ; } function reset ( ) { gridOptions . api ! . setRowData ( getRowData ( ) ) ; } function onFirstDataRendered ( params ) { ; ( ( params . api . getToolPanelInstance ( 'filters' ) as any ) as IFiltersToolPanel ) . expandFilters ( ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;