<!DOCTYPE html>
<html>
  <head>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
    <script src="https://www.ag-grid.com/dist/ag-grid-enterprise/ag-grid-enterprise.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="grid" class="ag-fresh" style="width: 100%; height: 200px"></div>
  </body>
</html>
var data = [
  { model: 'Audi' },
  { model: 'BMW' }
];
  
var dataSource = {
  rowCount: data.length,
  getRows: function (params) {
    params.successCallback(data, data.length);
  }
};

var columnDefs = [
  {
    headerName: 'Car',
    field: 'model'
  }
];

var gridOptions = {
    columnDefs: columnDefs,
    datasource: dataSource,
    enableFilter: true,
    floatingFilter: true,
    rowModelType: 'infinite'
};

agGrid.LicenseManager.setLicenseKey('');

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#grid');
    new agGrid.Grid(gridDiv, gridOptions);
});