CODEWITHSUNDEEP
htmlcssangulartypescriptag-grid
An-droid
An-droid

Reputation: 6485

How to have justified columns width that takes all space with AgGrid?

I'm trying to use AgGrid to display a simple list/grid of text informations.

With the base example : 

columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];

<ag-grid-angular 
    class="ag-theme-balham custom"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

and a css style : 

{
  .custom{
    height: 100vh;
    width: 100%;
  }
}

I see that the container of the grid takes all the space, that's cool but in the documentation I don't see a way to make sure the cells are justified and take all the space in width

How can I achieve that ?

Upvotes: 1

Views: 1733

Answers (1)

un.spike
un.spike

Reputation: 5113

You should execute sizeColumnsToFit() method once gread is ready:

sizeColumnsToFit : Gets columns to adjust in size to fit the grid horizontally.

as gridOptions property

gridOptions:{
    onGridReady(params) {
        params.api.sizeColumnsToFit();
    }
}

or as html tag

(gridReady)="onGridReady($event)"

Upvotes: 2

Related Questions