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

Question

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.

but then I get this.

    <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!

Answer 1

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
};

Answer 2

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}

Answer 3

Try 'flex' column property:

{ headerName: 'Test', flex: 1}

You can also use this to expand only last column.

Oficial documentation