Ag-grid with AngularJS - header width is not aligning with data columns

Question

[Update] I will add an additional 200 points (total 300) if anyone gets my snippet working, with headers and data columns aligned.

This is my first attempt with ag-grid. I assign the grid header like this:

var stationAnalyticsColumnDefs = [
    {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
    {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
    {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
    {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

I am fetching the data by AJAX, so when my $http.get returns success, accoding to the docs, I should be able to

$scope.stationAnalyticsGridOptions.api.refreshView();

or

$scope.stationAnalyticsGridOptions.api.refreshRows(data);

but neither of those seems to work (no data is shown), so I use

$scope.stationAnalyticsGridOptions.api.setRowData(data);

and the data shows just fine.

My problem is that the headers don't align with the data. How do I do that? I also want the grid columns to resize as I drag the headers to resize them.

[Update] Still working on the Plunk. Can anyone see what's wrong with this?

View

<div ag-grid="stationAnalyticsGridOptions" 
     class="ag-fresh ag-basic" 
     style="height:400px; width:80%">

Controller

var stationAnalyticsColumnDefs = [
   {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
   {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
   {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
   {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

$scope.stationAnalyticsGridOptions = {
    columnDefs: stationAnalyticsColumnDefs,
    rowData: $scope.eventStationsAnalyticData,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
};

[Update] I tried to create a working Fiddle, to reproduce the question, but failed; the table does not even display. You can find the Fiddle at https://jsfiddle.net/mawg/9ex225ye/4/

Can anyone get it working - with the header width and data column width aligning?

Please fork my Fiddle, rather than starting from scratch, and retain the variable names, etc

Could you add the data object you parse into setRowData()? I guess the alignment breaks after you set row data? — lin
I've create a testing scenario in my machine and it does work fine over here. Could you please add your full gridOptions too? — lin
An excellent and comprehensive Fiddle. I particularly like that you also use setRowData(), as I do. I will post my code this evening & imagine that we will soon spot the error — Mawg says reinstate Monica

lin lin · Accepted Answer · 2017-03-07T20:16:20

Try setup your gridOptions including angularComileHeader: true to ensure your headers does work with AngularJS in the right way. Please check this runnable plnkr and compare it with your solution. Also ensure you using the latest version of ag-grid.

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: $scope.rowData,
  angularCompileHeaders: true,
  enableColResize: true,
  enableSorting: true,
  enableFilter: true
};

Ag-grid with AngularJS - header width is not aligning with data columns

View

Controller

1 Answers