自动调整所有列的大小以适合内容答案

【问题标题】：Auto Size all columns to fit content自动调整所有列的大小以适合内容
【发布时间】：2019-01-20 05:18:24
【问题描述】：

我所有的搜索都出现在sizeColumnsToFit 和autoSizeColumns，这不是我想要的。

我的网格有很多列，所以它可以水平滚动

但我无法提前知道一列中最宽的文本所需的最大空间是多少，因此希望网格自动调整所有列的大小以适应单元格中最长的文本行。

有人能做到吗？（很像在 html 表格列上有 nowrap，而不是 ag-grid 换行，它只是隐藏了太长的内容）

【问题讨论】：

在字里行间阅读，我发现您的用例可能涉及隐藏列（如果表格有水平滚动）。请注意，您无法控制不可见列的大小，除非您关闭虚拟化（网格的功能只呈现应该在屏幕上可见的内容）

标签： ag-grid

【解决方案1】：

网格调整大小： https://www.ag-grid.com/javascript-grid-resizing/

sizeColumnsToFit - 这试图挤压视图中的所有列 - 没有水平滚动

autoSizeAllColumns - 这会尝试调整所有列的大小以适应数据 - 水平滚动

// If you need to resize specific columns 
var allColIds = params.columnApi.getAllColumns()
    .map(column => column.colId);
params.columnApi.autoSizeColumns(allColIds);

// If you want to resize all columns
params.columnApi.autoSizeAllColumns();

【讨论】：

有没有办法设置基于列宽的单元格内容？
params.columnApi.autoSizeColumns() 结果看起来不太好，只有相同宽度的列，对于任何内容。
@Revansiddh - 是的，这正是 autoSizeColumns() 的用途
另外，这个答案绝对应该被接受，@Nico
ag-grid.com/documentation/javascript/column-sizing/…

【解决方案2】：

您可以找到自动调整所有列大小的完整示例。 column-sizing

只需调用 autoSizeColumns() 函数，所有列都会根据内容调整大小。

gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);

【讨论】：

【解决方案3】：

我通过了这个，我花了一些时间让它按照我想要的方式工作，我的意思是：

使用所有可用空间
使每一列都具有正确显示其内容所需的宽度

解决方案：

为每一列添加width 参数（需要一些手动调整来设置正确的值）
在onGridReady 中调用gridApi.sizeColumnsToFit()，它将调整大小以占用可用空间，同时确保具有更大宽度的列将占用更多空间

const gridOptions = {
 ...
 columnDefs: [
  {
    ...,
    width: 100
  },
  {
    ...,
    width: 50
  },
  ...
 ],
 ...
 onGridReady: (event) => event.api.sizeColumnsToFit(); 
};

【讨论】：