CODEWITHSUNDEEP
ag-grid
Andrew Magerman
Andrew Magerman

Reputation: 1413

ag-grid with single column, expand column to grid width

I've setup an ag-grid in an Angular application. I'm trying to make the single column fill in the whole width of the grid.

enter image description here

but then I get this.

enter image description here

    <div class="row" ng-controller="ChapterCtrl" ng-init="currentUNID='9D2DFE6D50C53A98C1257F5900337F37'">
    <div class="col-sm-4">
        <div >
            <div ag-grid="gridOptions" class="ag-fresh" style="height: 800px"></div>
        </div>
    </div>

   var columnDefs = [
    {headerName: "Subject", field: "Subject"}
];

$scope.gridOptions = {
    columnDefs: columnDefs,
    angularCompileRows: true,

Do you have any hints for me? The documentation https://www.ag-grid.com/javascript-grid-width-and-height/ didn't help me.

Many thanks!

Upvotes: 8

Views: 17627

Answers (4)

Datum Geek
Datum Geek

Reputation: 1568

flex property wasn't working for me until I added suppressSizeToFit (true) and resizable (false) properties to the last column definition.

ag-grid cell properties

Upvotes: 3

lachty
lachty

Reputation: 260

Try 'flex' column property:

{ headerName: 'Test', flex: 1}

enter image description here

You can also use this to expand only last column.

Oficial documentation

Upvotes: 14

Sean Landsman
Sean Landsman

Reputation: 7197

What I'd suggest is set the grid to have a % or use vh for its width, then the grid will grow/shrink according to the parent container.

To make the columns change size, you can hook into an event an resize each time the grid size changes:

var gridOptions = {
    onGridSizeChanged: () => {
        gridOptions.api.sizeColumnsToFit();
    }    
    ...other gridOptions
};

Upvotes: 16

Jarod Moser
Jarod Moser

Reputation: 7358

If you already know the width of the grid, then set that same width in the columnDefs:

var columnDefs = [
{headerName: "Subject", field: "Subject", width: 350//width in pixels}

If your grid is set up to have dynamic width depending on the users window size then you might be able to get the width of the table element, then put that width into the columnDefs afterwards.

Edit:

For responsive design:

1) add an id to make lookup easy:

<div id="myTable" ag-grid="gridOptions" class="ag-fresh" style="height: 800px"></div>

2) find the table then find it's width:

var colWidth = document.getElementById('myTable').clientWidth;

or if you prefer jquery:

var colWidth = $('#myTable').width()

3) set the width in the columnDefs:

var columnDefs = [
{headerName: "Subject", field: "Subject", width: colWidth}

Upvotes: 1

Related Questions