0

Only the first column header is being drawn correctly, all subsequent items in the columnDef array are drawn below it. If I populate the table with data, all column data is stacked to the left as well.

Here's what it looks like; the gray band in the row, below Country is actually moving down, as part of the framework.setTimeout() function in ag-grid.js.

enter image description here

The JS looks like:

gridOptions.columnDefs = [
    { headerName: 'Country', field: 'country' },
    { headerName: 'City', field: 'city' },
    { headerName: 'Jan', field: 'jan_act' },
    { headerName: 'Feb', field: 'feb_act' },
    { headerName: 'Mar', field: 'mar_act' },
    { headerName: 'Apr', field: 'apr_act' },
    { headerName: 'May', field: 'may_act' }];

var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

I'm using ag-grid.noStyle.js v7.0.2 and think I have all dependencies loaded correctly for ag-grid. Am not using React or Angular.

Aaron
  • 705
  • 10
  • 19

1 Answers1

0

Ah, found it! It's the <!DOCTYPE html> tag.

Problem was immediately resolved by changing the height of my div to pixel based, not %, e.g.

<div id="myGrid" style="height: 400px;" class="ag-fresh"></div>

Found it by going back to absolute basics after the JavaScript Datagrid example also failed to work.

Community
  • 1
  • 1
Aaron
  • 705
  • 10
  • 19