text: var columnDefs = [
      {headerName: 'Athlete', field: 'athlete', width: 150, suppressSizeToFit: true},
      {headerName: 'Age', field: 'age', width: 90, minWidth: 50, maxWidth: 100},
      {headerName: 'Country', field: 'country', width: 120},
      {headerName: 'Year', field: 'year', width: 90},
      {headerName: 'Date', field: 'date', width: 110},
      {headerName: 'Sport', field: 'sport', width: 110},
      {headerName: 'Gold', field: 'gold', width: 100},
      {headerName: 'Silver', field: 'silver', width: 100},
      {headerName: 'Bronze', field: 'bronze', width: 100},
      {headerName: 'Total', field: 'total', width: 100}
  ];
  
  var gridOptions = {
      defaultColDef: {
          resizable: true
      },
      columnDefs: columnDefs,
      rowData: null,
      onFirstDataRendered: onFirstDataRendered
  };
  
  function onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
  }
  
  // setup the grid after the page has finished loading
  document.addEventListener('DOMContentLoaded', function () {
      new agGrid.Grid(document.getElementById('myGrid'), gridOptions);
  
      var httpRequest = new XMLHttpRequest();
      httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json');
      httpRequest.send();
      httpRequest.onreadystatechange = function () {
          if (httpRequest.readyState === 4 && httpRequest.status === 200) {
              var httpResult = JSON.parse(httpRequest.responseText);
              gridOptions.api.setRowData(httpResult);
          }
      };
  });
  