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

Question

我所有的搜索结果都是 sizeColumnsToFit 和 autoSizeColumns，这不是我想要的。

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

但我无法事先知道列中最宽的文本最 space 需要什么，因此希望网格自动调整所有列的大小以适应其中最长的文本行单元格。

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

Answer 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();

Answer 2

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

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

gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);

Answer 3

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

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

解决方案：

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

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

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

Auto Size all columns to fit content

ag-grid