import { ColDef , GridOptions , ICellRendererParams , IViewportDatasource , ValueFormatterParams } from '@ag-grid-community/core' ; declare function createMockServer ( ) ; declare function createViewportDatasource ( mockServer ) ; const columnDefs = [ { headerName : '#' , maxWidth : 80 , cellRenderer : 'rowIdRenderer' , } , { field : 'code' , maxWidth : 90 } , { field : 'name' , minWidth : 220 } , { field : 'bid' , cellClass : 'cell-number' , valueFormatter : numberFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'mid' , cellClass : 'cell-number' , valueFormatter : numberFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'ask' , cellClass : 'cell-number' , valueFormatter : numberFormatter , cellRenderer : 'agAnimateShowChangeCellRenderer' , } , { field : 'volume' , cellClass : 'cell-number' , cellRenderer : 'agAnimateSlideCellRenderer' , } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 140 , resizable : true , } , rowSelection : 'multiple' , rowModelType : 'viewport' , getRowNodeId : function ( data ) { return data . code ; } , components : { rowIdRenderer : function ( params ) { return '' + params . rowIndex ; } , } , } ; function numberFormatter ( params ) { if ( typeof params . value === 'number' ) { return params . value . toFixed ( 2 ) ; } else { return params . value ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/stocks.json' ) . then ( response => response . json ( ) ) . then ( function ( data ) { var mockServer = createMockServer ( ) ; mockServer . init ( data ) ; var viewportDatasource = createViewportDatasource ( mockServer ) ; gridOptions . api ! . setViewportDatasource ( viewportDatasource ) ; setTimeout ( function ( ) { gridOptions . api ! . sizeColumnsToFit ( ) ; } , 100 ) ; } ) ; } ) ;