CODEWITHSUNDEEP
angularag-gridpercentagecolumn-width
HDJEMAI
HDJEMAI

Reputation: 9800

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

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 ?

Upvotes: 27

Views: 72799

Answers (7)

Adi
Adi

Reputation: 19

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

Upvotes: -3

Kyrolus Kamal Fahim Sous
Kyrolus Kamal Fahim Sous

Reputation: 1018

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.

Upvotes: 18

AliF50
AliF50

Reputation: 18809

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>

Upvotes: 3

PRANSHU MIDHA
PRANSHU MIDHA

Reputation: 472

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

Upvotes: 6

GarouDan
GarouDan

Reputation: 3833

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.

Upvotes: 3

HDJEMAI
HDJEMAI

Reputation: 9800

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

Upvotes: 13

Phil
Phil

Reputation: 7566

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.

Upvotes: 19

Related Questions