Ag 网格，防止表格缩放到全宽

【问题标题】：Ag grid, prevent table to scale to full widthAg 网格，防止表格缩放到全宽
【发布时间】：2019-02-19 23:49:35
【问题描述】：

我有一个表格可以缩放到所有可用宽度，即使它的内容较少。
演示：“https://plnkr.co/edit/6L8bTAwkEV6R6Be4M1Qm?p=preview”
试图通过给父母 width 和 ag-grid max-width 来解决它，但正如您所见，它没有效果。有人知道吗？
提前致谢。

【问题讨论】：

没有完全得到你想要达到的目标？在plnkr 示例中，我看到：style="max-width: 100%; height: 100%;" 所以使用max-width: 50%，您将获得一半的页面宽度，但我想您正在寻找不同的东西。
@un.spike 。谢谢我尝试了您的解决方案，但不幸的是它仍然相同。我在演示中更改了数据以清楚地演示。请检查。 plnkr.co/edit/dmLF3I4CaAuTNLv5586O?p=preview
我实际上通过调用 getPreferredWith 并将这个宽度分配给网格来解决这个问题。但是我应该每次在排序、过滤、列切换等中调用这个方法，这会降低性能
还是不清楚你想要什么结果？根据列数动态网格宽度？
斯派克你检查过 pnkr plnkr.co/edit/dmLF3I4CaAuTNLv5586O?p=preview 。如您所见，粘性的右列位于右边缘，中间有空白空间，这使桌子很难看。

标签： html angular css ag-grid

【解决方案1】：

你需要使用sizeColumnsToFit()方法。

sizeColumnsToFit() 获取列以调整大小以水平适应网格。

Official doc

代码：

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.gridApi.sizeColumnsToFit();
    ....
}

修改了你的plnkr sample

更新：sizeColumnsToFit的解释

您需要记住ag-grid 的生命周期。因此，在这种情况下，要使 sizeColumnsToFit 起作用 - 应该定义网格 columns 并将其分配给 gridOptions 属性。如果您需要动态解决方案，请不要忘记先通过setColumnDefs 通知您的网格，然后调用sizeColumnsToFit 方法。

【讨论】：