const columnDefs = [

  { field: 'athlete', headerTooltip: "The athlete's name" },

  { field: 'age', headerTooltip: 'The athlete`s age' },

  { field: 'country' },

  { field: 'year',cellStyle: { 'text-align': "right" }, },

  { field: 'date', headerTooltip: 'The date of the Olympics' },

  { field: 'sport', headerTooltip: 'The sport the medal was for' },

  { field: 'gold', headerTooltip: 'How many gold medals' },

  { field: 'silver', headerTooltip: 'How many silver medals' },

  { field: 'bronze', headerTooltip: 'How many bronze medals' },

  { field: 'total', headerTooltip: 'The total number of medals' },

];

​

const gridOptions = {

  columnDefs: columnDefs,

  defaultColDef: {

    width: 150,

  },

  tooltipShowDelay: 500,

};

​

// setup the grid after the page has finished loading

document.addEventListener('DOMContentLoaded', () => {

  const gridDiv = document.querySelector('#myGrid');

  new agGrid.Grid(gridDiv, gridOptions);

​

  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')

    .then((response) => response.json())

    .then((data) => gridOptions.api.setRowData(data));

});

const columnDefs = [

  { field: 'athlete', headerTooltip: "The athlete's name" },

  { field: 'age', headerTooltip: 'The athlete`s age' },

  { field: 'country' },

  { field: 'year', cellStyle: { 'text-align': "right" }, },

  { field: 'date', headerTooltip: 'The date of the Olympics' },

  { field: 'sport', headerTooltip: 'The sport the medal was for' },

  { field: 'gold', headerTooltip: 'How many gold medals' },

  { field: 'silver', headerTooltip: 'How many silver medals' },

  { field: 'bronze', headerTooltip: 'How many bronze medals' },

  { field: 'total', headerTooltip: 'The total number of medals' },

];

​

const gridOptions = {

  columnDefs: columnDefs,

  defaultColDef: {

    width: 150,

  },

  tooltipShowDelay: 500,

};

​

// setup the grid after the page has finished loading

document.addEventListener('DOMContentLoaded', () => {

  const gridDiv = document.querySelector('#myGrid');

  new agGrid.Grid(gridDiv, gridOptions);

​

  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')

    .then((response) => response.json())

    .then((data) => gridOptions.api.setRowData(data));

});