Menu
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 ?
762
Turn column resizing on for the grid by setting resizable=true for each column. To set resizing for each column, set resizable=true on the default column definition. The snippet below allows all columns except Address to be resized by explicitly setting each column.
React Data Grid: Column Sizing. All columns can be resized by dragging the top right portion of the column.
Under normal usage, your application should set the width and height of the grid using CSS styles. The grid will then fit the width you provide and use scrolling inside the grid to allow all rows and columns to be viewed.
To allow the grid to auto-size it's height to fit rows, set grid property domLayout='autoHeight' . When domLayout='autoHeight' then your application should not set height on the grid div, as the div should be allowed flow naturally to fit the grid contents.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
