How to make AG-Grid to have fluid layout

0
votes

I'm trying to use the AG-Grid for my project and I've been trying to play around with it for a while now, but one problem I came across with this grid is that I can't easily make the columns to auto resize whenever the div or browser resizes like a fluid layout.

I know there is the .api.sizeColumnsToFit() function to use which will do it once it's called, but this would mean I will to manually add a listener or some sort to the window to check if it has been resize and call it if it has?? Is there a better way to achieve this??

Thanks

1
ag-grid

1 Answers

3
votes

Try calling sizeColumnsToFit whenever the grid onGridSizeChanged event fires. The following will run when the grid first loads/ or data adjusts (onModelUpdated) and when the grids size changes.

i.e

this.gridOptions = <GridOptions>{
    onModelUpdated: () => {
        this.gridOptions.api.sizeColumnsToFit();
    },
    onGridSizeChanged: () => {
        this.gridOptions.api.sizeColumnsToFit();
    }
};