text: var columnDefs = [
      { field: "athlete", width: 150, rowGroupIndex: 0 },
      { field: "age", width: 90, rowGroupIndex: 1 },
      { field: "country", width: 120, rowGroupIndex: 2 },
      { field: "year", width: 90 },
      { field: "date", width: 110, rowGroupIndex: 2 }
  ];
  
  var gridOptions = {
      columnDefs: columnDefs,
      rowData: null,
      animateRows: false,
      groupUseEntireRow: true,
      onRowGroupOpened: onRowGroupOpened,
      defaultColDef: {
          editable: true,
          sortable: true,
          resizable: true,
          filter: true,
          flex: 1,
          minWidth: 100
      }
  };
  
  function onRowGroupOpened(event) {
      var rowNodeIndex = event.node.rowIndex;
      // factor in child nodes so we can scroll to correct position
      var childCount = event.node.childrenAfterSort ? event.node.childrenAfterSort.length : 0;
      var newIndex = rowNodeIndex + childCount;
      gridOptions.api.ensureIndexVisible(newIndex);
  }
  
  // setup the grid after the page has finished loading
  document.addEventListener('DOMContentLoaded', function() {
      var gridDiv = document.querySelector('#myGrid');
      new agGrid.Grid(gridDiv, gridOptions);
  
      agGrid.simpleHttpRequest({ url: 'https://www.ag-grid.com/example-assets/olympic-winners.json' })
          .then(function(data) {
              gridOptions.api.setRowData(data);
          });
  });
  