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

Question

Right now, the only way I see to specify column grid width is to add a width property to column definition like:

columnDefs: any[] = [
  { 
    headerName: 'ID',
    field: 'id',
    width: 50,
    type: 'numericColumn'
  }
];

But as we can see in the following example, the column of the grid is not taking the full width of screen display.

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

I want to be able to set the width in percentage for each column but I'm not able to find how to do this.

Using width: 10% is not working.

Is there any workaround for this ?

Answer 1

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.