ag-Grid Simple Example

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.0/ag-grid.js"></script>
    <script src="example-js.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.0/ag-grid.css">
</head>
<body>
    <div class=ag-grid ag-grid=gridController.options></div>
    <div id="myGrid" style="height: 115px;width:600px;" class="ag-fresh"></div>
</body>
</html>

// specify the columns
var columnDefs = [{
  headerName: "Make",
  field: "make"
}, {
  headerName: "Model",
  field: "model"
}, {
  headerName: "Price",
  field: "price"
},
{
  field: "country",
  headerName: "Country",
  headerCellTemplate: function() {
    var eCell = document.createElement('span');
    eCell.field = obj.expr;
    eCell.headerName = obj.colName;
    eCell.innerHTML = "<select>" + "<option>" +
      'United Kingdom' + "</option>" + "<option>" +
      'United States' + "</option>" + "</select>"
    var eselect = eCell.querySelector('select');
    eselect.focus();

    return eCell;
  },
  cellRenderer: function(params) { return params.value.join(", "); },
  editable: true
}, {
  headerName: "Actions", 
  width: 90,
  cellRenderer:  function () {
        return  `
<div class="btn-group" style="z-index: 10000">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Actions <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href='#'>Edit</a></li>
        <li><a href='#'">Delete</a></li>
        <li role="separator" class="divider"></li>
        <li><a href='#'>Print</a></li>
    </ul>
</div>
        `
  },
  isPopup: function() { return true; },
  suppressSorting: true
}];

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

// let the grid know which columns and what data to use
var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  onGridReady: function() {
    gridOptions.api.sizeColumnsToFit();
  }
};

// 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 ag.grid.Grid(eGridDiv, gridOptions);
});