Is there a way to specify ag-grid column width in percentage?

By using the method suggested by @Phil, I'm able to get the grid to take the available view port width using gridReady event this way:

In component template:

<ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"> 
</ag-grid-angular>

In component typescript file:

onGridReady(params) {
  params.api.sizeColumnsToFit();
}

Demo:

https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html


No, it is not possible by default. You can only set the width, minWidth and maxWidth in absolute numbers. The easiest thing for having dynamic widths in AgGrid is to use this.gridOptions.api.sizeColumnsToFit();, so they take the smallest width (according to specified widths in the colDef) for the existing values in their cells.

You can try calculating width manually (onInit) based on window-width, and then re-initialize AgGrid. But I don't recommend that because when the user resizes the window you would need to calculate again (in Window-Resize-HostListener) and re-initialize the grid. It might be possible with debounce-time (so you don't reinitialize every millisecond while the user is dragging his browser-corner), but it is kind of hacky and in the end you will get a lot of very hard-to-debug and hard-to-maintain code.