最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to set default min and max column width in ag-grid - Stack Overflow

programmeradmin4浏览0评论

I am using ag-grid library for advanced data grid.

In ag-grid library, I can define "minWidth" and "maxWidth" attributes in "columnDefs" to set minimum and maximum width for particular column.

But is there any option to set default min and max width for each column to set re-sizing boundaries for columns?

I am using ag-grid library for advanced data grid.

In ag-grid library, I can define "minWidth" and "maxWidth" attributes in "columnDefs" to set minimum and maximum width for particular column.

But is there any option to set default min and max width for each column to set re-sizing boundaries for columns?

Share Improve this question edited Apr 26, 2016 at 17:53 Charlie 23.9k12 gold badges63 silver badges95 bronze badges asked Apr 22, 2016 at 23:42 SatAjSatAj 1,9795 gold badges32 silver badges49 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 1

Have a single function in the scope to define column widths and heights.

$scope.monWidth = function() {
      return 50 + calcDynWidth();    //Dummy function
}


$scope.gridOptions = {
   columnDefs: [
      {headerName: 'Name', minWidth: $scope.monWidth()}
   ]
}

For AG Grid React, giving the maxWidth and minWidth in the column definition worked for me.

For eg:

const defaultColDef = {
  minWidth:200,
  maxWidth:400,
}

Here i'm setting the values as 200 and 400 which can be replaced by any variable value according to your use-case.

The same can be applied to individual column definitions also.

There is the auto-size-strategy which lets you define the default behavior for the grid which you can use like this.

const gridOptions = {
    autoSizeStrategy: {
        type: 'fitCellContents'
    },

    // other grid options ...
}

The next two Entries in the Docs might also be interesting. (autoSizeColumns, autoSizeAllColumns)

This works for me:

<ag-grid-angular
      [defaultColDef]="defaultColDef"



public defaultColDef: ColDef = {
    wrapHeaderText: true,
    autoHeaderHeight: true,
    minWidth: 100,
    floatingFilterComponent: 'myCustomFilter',
    filter: 'myCustomFilter',
    type: ['defaultColumn'],
    sortable: true,
  };

The minWith property is the key

发布评论

评论列表(0)

  1. 暂无评论