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 ?

Vincents

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.

Hyalo

Answer 2

I faced the same issue. I removed this.gridApe.sizeColumnsToFit(); and used the flex property in column def. for example, I have 3 columns; Id, Name, Delete. I need to make the column 'Name' take the most space. so, the columnDef will be:

columnDefs: ColDef[] = [
  {
    headerName: "#id", field: 'id',
    filter: true,
    flex: 1
  },
  {
    headerName: "Name", field: 'name',
    flex: 3
  },
  {
    headerName: 'Delete', field: "delete",
    flex: 1
  },
];

So, the column name takes the most space and the table width takes the parent width.

Retrogression

Is the flex property a new one ? if so from witch version of ag-grid ? – Vincents

No, It is not a way to specify a width in percentage, but, it is a workaround solution. But, this solution can make the column width changes dynamically. After applying this solution, I checked the column width in the console. I found that the width of the Id column is 110, the width of the Name column is 330 and the width of the delete column is 110. If you calculate the percentages, the widths of the columns will be 20% 60% 20% respectively. I also checked the width at smaller screens. It changes dynamically and this percentage is preserved. So, It is a simple workaround. – Retrogression

I don t get one thing, why the best solution is not getting the most upvotes?, maybe there are a lot of devs that are still new, or something like that. – Levis

This cause performance issue. We have a table with 15 columns and if we use this, during resizing of the screen due to left sidebar of the page lets say it is laggy – Romaine

Answer 3

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

Vincents

Answer 4

My workaround is to calculate the width of the parent div of AG-Grid and calculating pixels by percentage to be assigned to a particular column. Here's the solution using jQuery :

  function columnWidth(id, percentage){
    var div = $("#" + id);  // HTML ID of Grid
    var parent = div.parent();
    var width = parent.width() * percentage/100;  // Pixel calculation
    return width;
}

var colDefs = [
       {
         field: "name",
         width: columnWidth("myGridId",25)
       } 
]

This worked fine for me. Here's a working version : stackblitz.com/edit/js-l1gmbf

Thimbleweed

@Vincents Here's the Stackblitz link : stackblitz.com/edit/js-l1gmbf – Thimbleweed

Using JQuery inside a Typescript code is not an ideal solution ... – Vincents

Answer 5

My workaround was to create a function that converts a numeric value from rems to pixels:

const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);

const convertRemToPixel = (rem) => rem * remInPixel;

Then use this in the width property of the column definition.

Example of usage on an ag-grid column definition:

{
    headerName: "Example",
    field: "exampleField",
    width: convertRemToPixel(3)
}

Indeed, there isn't too much secret here, whenever you need to use a value in pixel you could use this function.

Duley

Can you edit and add a complete example, by adding a demo using stackblitz for this. I can accept this answer if it gives a better way than the currently accepted one. – Vincents

can you provide a demo or steps to solve this with ag-grid ? – Vincents

Thanks, exactly what I was looking for :) – Tum

Answer 6

The best way I have found to do this is to write your approximate width in pixels and then bank on the sizeColumnsToFit to make it responsive (expanding and shrinking the browser width) and always take this percentage width.

columnDefs: ColDef[] = [
  {
    headerName: 'User Name',
    field: 'user',
    width: 425, // <==== Play with this number until it is the approximate percentage width
  },
  // other column definitions
];

// onGridSizeChanged will get called when grid is ready and every time the grid's width changes
onGridSizeChanged(params: GridSizeChangedEvent) {
  params.api.sizeColumnsToFit();
}

Your HTML could look like

<ag-grid-angular
  // your other bindings can go here
  [columnDefs]="columnDefs"
  (gridSizeChanged)="onGridSizeChanged($event)">
</ag-grid-angular>

Proudlove

Answer 7

width:20% will not work. but, width:'20%' works fine.

Endstopped

are you sure ? in which version of ag-grid this works ? can you provide a demo ? – Vincents