如何调整 ag-grid 中的列大小答案

【问题标题】：How to resize columns in ag-grid如何调整 ag-grid 中的列大小
【发布时间】：2022-01-15 08:49:30
【问题描述】：

我是 ag-grid 的新手。如下面的屏幕截图所示，我最初有 4 列。当我删除第 3 列（test3）时，请注意右侧有一个空格，表示缺少一列。如何确保删除一列后，剩余的 3 列（在这种情况下）将填充该区域？我试图将resizable : true 传递给defaultcolDef，但这并没有解决问题...

Intial View

View once Test 3 column is filtered out

【问题讨论】：

在删除操作后使用api.sizeColumnsToFit() 以确保剩余的列适合可用宽度

标签： javascript angular typescript ag-grid ag-grid-angular

【解决方案1】：

在每一列上使用flex: 1。

有关更多信息，请参阅此处的文档：https://www.ag-grid.com/javascript-data-grid/column-sizing/#column-flex

或者查看这个 plunker 示例：https://plnkr.co/edit/7evoWXCM1sChDBmX

只需将其中一列拖出网格即可查看它的工作情况

【讨论】：

【解决方案2】：

您可以使用 columnVisible-event 捕获添加或删除的任何列

https://www.ag-grid.com/javascript-data-grid/grid-events/#reference-columns-columnVisible

然后调用

gridOptions.api.sizeColumnsToFit();

https://www.ag-grid.com/javascript-data-grid/column-sizing/#size-columns-to-fit

【讨论】：