ag grid

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/13.1.2/ag-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/13.1.2/styles/ag-grid.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/13.1.2/styles/theme-fresh.css"/>

    
  </head>

  <body>
    <!-- Put your html here! -->
    <p>Test Grid with filter cell render</p>
    <p>Click on filter , and see console logs</p>
    <div id="myGrid" style="height:250px;" class="ag-fresh"></div>
    <div id="log"></div>
  </body>

</html>

// this example has items declared globally. bad javascript. but keeps the example simple.

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

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

function onCellClick(){
  log('cellClicked');
}
const cellClickedEvent = 'cellClicked';

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: (grid) => {
      log('ready, start clicking cells now. It will stop listening in 5 seconds');
      grid.api.addEventListener(cellClickedEvent, onCellClick);
      setTimeout(() => {
        grid.api.removeEventListener(cellClickedEvent, onCellClick);
        log('Should have stop listening for click event. Try clicking');
      }, 5000);
    }
}

// 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');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

function log(message) {
  const element = document.getElementById('log');
  const currentText = element.innerText;
  element.innerText = message + '\n' + currentText;
}

/* Put your css in here */

h1 {
  color: red;
}