title: Ag-grid with AngularJS - header width is not aligning with data columns
body: <p>[Update] I will add an additional 200 points (total 300) if anyone gets <a href="https://jsfiddle.net/mawg/9ex225ye/4/" rel="nofollow noreferrer">my snippet</a> working, with headers and data columns aligned.</p>
  
  <hr>
  
  <p>This is my first attempt with <a href="https://www.ag-grid.com/" rel="nofollow noreferrer">ag-grid</a>. I assign the grid header like this:  </p>
  
  <pre><code>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},
  ];
  </code></pre>
  
  <p>I am fetching the data by AJAX, so when my <code>$http.get</code> returns success, accoding to the docs, I should be able to  </p>
  
  <pre><code>$scope.stationAnalyticsGridOptions.api.refreshView();
  </code></pre>
  
  <p>or  </p>
  
  <pre><code>$scope.stationAnalyticsGridOptions.api.refreshRows(data);
  </code></pre>
  
  <p>but neither of those seems to work (no data is shown), so I use  </p>
  
  <pre><code>$scope.stationAnalyticsGridOptions.api.setRowData(data);
  </code></pre>
  
  <p>and the data shows just fine.</p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/mawg/9ex225ye/4/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SS2KH.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>[Update]  Still working on the Plunk. Can anyone see what's wrong with this?</p>
  
  <h3>View</h3>
  
  <pre><code>&lt;div ag-grid="stationAnalyticsGridOptions" 
       class="ag-fresh ag-basic" 
       style="height:400px; width:80%"&gt;
  </code></pre>
  
  <h3>Controller</h3>
  
  <pre><code>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,
  };
  </code></pre>
  
  <hr>
  
  <p>[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 <a href="https://jsfiddle.net/mawg/9ex225ye/4/" rel="nofollow noreferrer">https://jsfiddle.net/mawg/9ex225ye/4/</a>  </p>
  
  <p>Can anyone get it working - with the header width and data column width aligning?</p>
  
  <p>Please fork my Fiddle, rather than starting from scratch, and retain the variable names, etc</p>