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

Question

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

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

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

一个人能做到吗？（非常像nowrap在 html 表格列上，而不是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

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

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

解决方案 ：

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

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

Answer 3

只需在列定义中使用flex而不是宽度。网格会自动调整。