ag-Grid Simple Example

<html>
<head>
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
    <script src="example-js.js"></script>
</head>
<body>
    
  <h3>Width in Pixels</h3>
  <div id="myGrid" style="height: 150px; width: 700px;" class="ag-fresh"></div>
  
  <br><br>
  
  <h3>Width in Percentage</h3>
  <div id="myGrid2" style="height: 150px; width: 80%;" class="ag-fresh"></div>
  
  <br><br>
  <button id="testButton">Toggle body scroll</button>

</body>
</html>

// specify the columns
var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

// specify the data
var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

// let the grid know which columns and what data to use
var gridOptions = {
    enableColResize: true,
    columnDefs: columnDefs,
    rowData: rowData,
    onGridSizeChanged: function () {
      console.log('grid width in pixels size changed');
    }
};

var gridOptions2 = {
    enableColResize: true,
    columnDefs: columnDefs,
    rowData: rowData,
    onGridSizeChanged: function () {
      console.log('grid width in a percentage size changed');
    }
};

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {

    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');
    var eGridDiv2 = document.querySelector('#myGrid2');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
    new agGrid.Grid(eGridDiv2, gridOptions2);
    
    document.querySelector('#testButton').addEventListener('click', function(){
      
      if(document.body.style.overflowY !== 'scroll'){
        document.body.style.overflowY = 'scroll';
      }
      else {
        document.body.style.overflowY = '';  
      }
      
    });
});