title: ag-grid column not automatically resizing in angular
body: <p>I am trying to fix the sizing of the columns issue on the ag-grid in angular 7 application. I have been trying several options as suggested but not getting a solution. What I am looking for is that the columns should automatically resize and take the width of the screen. At the moment
  when it is rendering for the first time, the last column gets slightly hidden. The second problem that I have is when I reload the grid with data while navigating from another component to this page, the grid width change drastically.</p>
  
  <p>I have tried to  add resize attribute on every column as well and also set the suppressSizeToFit: false with min-width and maxWidth defined.</p>
  
  <p>Initial load</p>
  
  <p><a href="https://i.stack.imgur.com/Bl0Tl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bl0Tl.png" alt="enter image description here"></a></p>
  
  <p>Reload of the grid while navigating from another component</p>
  
  <p><a href="https://i.stack.imgur.com/efrfu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/efrfu.png" alt="enter image description here"></a></p>
  
  <p>html </p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="form-group row"&gt;
        &lt;div class="panel panel-default col-md-12"&gt;
          &lt;div *ngIf="AllocationDetails &amp;&amp; AllocationDetails.ManagerAllocations" class="panel-body"&gt;
            &lt;div [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;"&gt;
              &lt;span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"&gt;&lt;a (click)="expandAll()"&gt;Expand
                  All&lt;/a&gt;&lt;/span&gt;
              &lt;span style="text-decoration: underline; cursor: pointer;"&gt;&lt;a (click)="collapseAll()"&gt;Collapse
                  All&lt;/a&gt;&lt;/span&gt;
              &lt;ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
                [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
                rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
                [frameworkComponents]="frameworkComponents"&gt;
              &lt;/ag-grid-angular&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>component</p>
  
  <pre class="lang-js prettyprint-override"><code>    export class AllocationsComponent implements OnInit {
  
  
        constructor(private allocationsService: AllocationsService, private comparator: Comparator,
              private zone: NgZone, private route: ActivatedRoute, private spinner: NgxSpinnerService) {
              this.Comparator = comparator;
              this.Route = route;
  
              window.onresize = (e) =&gt; {
                  this.ngZone.run(() =&gt; {
                      this.windowHeight = window.innerHeight - this.offset;
                      setTimeout(() =&gt; {
                          if (!this.GridOptions || !this.GridOptions.api) {
                              return;
                          }
                          this.GridOptions.api.sizeColumnsToFit();
                      }, 500, true);
                  });
              };
          }
  
  
          setGridOptions() {
              this.GridOptions = {
                  columnDefs: this.getColumns(),
                  enableFilter: true,
                  treeData: true,
                  enableColResize: true,
                  animateRows: true,
                  groupDefaultExpanded: 1,
                  enableSorting: true,
                  suppressAggFuncInHeader: false,
  
                  getDataPath: function (data) {
                      return data.Hierarchy;
                  },
                  onGridReady: e =&gt; {
                      if (!e || !e.api) {
                          return;
                      }
                      e.api.sizeColumnsToFit();
                      this.setDefaultSortOrder();
                  },
                  getRowStyle: (params) =&gt; {
                      if (params.node.level === 0) {
                          return { 'background-color': '#FCE7D7' };
                      } else if (params.node.level === 1) {
                          return { 'background-color': '#f4f4f4' };
                      }
                  },
  
                  autoGroupColumnDef: {
                      headerName: 'Manager Strategy', width: 300,
                      valueFormatter: uniqueColumn
                  },
  
              };
              function uniqueColumn(params) {
                  if (params &amp;&amp; params.value != null) {
                  const startIndex = params.value.indexOf('#');
  
                  if (startIndex === -1) { return params.value; }
  
                  const endIndex = params.value.length;
                  return params.value.replace(params.value.substring(startIndex, endIndex), '');
                  }
  
              }
          }
  
      ngOnInit() {
  
              this.evalDate = new Date();
              this.setGridOptions();
              this.getAllocationsDetails(this.FormattedDate(this.evalDate));
  
  
          }
  
           GridHeight() {
              if (!this.windowHeight) {
                  this.windowHeight = window.innerHeight - this.offset + 10;
              }
              return this.windowHeight;
          }
  
           private getColumns(): Array&lt;any&gt; {
              const self = this;
              const columnDefs = new Array&lt;any&gt;();
              // const definition = [
                  columnDefs.push({ headerName: 'Date', field: 'EvalDate', hide: true});
              columnDefs.push({ headerName: 'Firm ID', field: 'FirmID', hide: true });
              columnDefs.push({ headerName: 'Manager Strategy ID', field: 'FirmName', hide: true });
              columnDefs.push({ headerName: 'Firm', field: 'ManagerStrategyID', hide: true });
              columnDefs.push({ headerName: 'Manager Strategy', field: 'ManagerStrategyName', hide: true });
              columnDefs.push({ headerName: 'Fund ID', field: 'ManagerFundID', hide: true });
              columnDefs.push({ headerName: 'Fund', field: 'ManagerFundName', hide: true });
              columnDefs.push({ headerName: 'Product Name', field: 'ProductName', hide: true });
              columnDefs.push({
                  headerName: 'As Of', field: 'EvalDate',
                  cellStyle: { textAlign: 'right' },
                  hide: false
                  ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
              });
              columnDefs.push({
                  headerName: 'EMV (USD)', field: 'UsdEmv', valueFormatter: this.currencyFormatter, rowGroup: false,
                  cellRenderer: 'agGroupCellRenderer',
                  aggFunc: 'sum',
                  cellStyle: { textAlign: 'right' },
                  pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" }}
                  ,  resizable :true
              });
              columnDefs.push({
                  headerName: '% of Fund Strategy', field: 'GroupPercent', valueFormatter: this.formatPercent, rowGroup: false,
                  cellRenderer: 'agGroupCellRenderer',
                  aggFunc: 'sum',
                  cellStyle: { textAlign: 'right' },
                  pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" } }
                  ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
              });
              columnDefs.push({
                  headerName: '% of Product', field: 'WeightWithEq',
                  valueFormatter: this.formatPercent,
                  cellStyle: { textAlign: 'right' }
                  ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
              });
  
  
  
          this.pinnedBottomRowData = this.createData();
          this.frameworkComponents = { customPinnedRowRenderer: CustomPinnedRowRenderer };
  
          return columnDefs;
      }
  
      }
  </code></pre>