agGrid not defined using ag-grid-community

I am trying the demo given in Documentation https://www.ag-grid.com/documentation/javascript/getting-started/
I am getting an error agGrid not defined.I am using html.erb files.Can someone please tell me what the error is.
main.js

import { Grid } from 'ag-grid-community';

var columnDefs = [
  { field: "make" },
  { field: "model" },
  { 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 = {
  columnDefs: columnDefs,
  rowData: rowData
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

index.html.erb

  <div class="collections_data text-center">
     <div id="myGrid"  class="ag-theme-alpine"></div>
   </div>

4 thoughts on “agGrid not defined using ag-grid-community”

Leave a Comment