Single Column Ag Grid, Extend Column to Grid Width

Question

I installed ag-grid in an Angular app. I am trying to make one column fill the entire width of the grid.

but then I get it.

    <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? The documentation https://www.ag-grid.com/javascript-grid-width-and-height/ did not help me.

Many thanks!

Answer 1

I suggest setting the% value for the grid or using vh for its width, then the grid will grow / shrink according to the parent container.

To resize a column, you can make a resize event in the event each time the grid is resized:

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

Answer 2

, :

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

, , .

Edit:

:

1) , :

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

2) , :

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

jquery:

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

3) Defs:

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