ag-grid 列文本截断问题

Question

想要根据文本呈现列宽。 跨越列的最小宽度（200px）后，很少有字符丢失。

注意：列是动态加载的，所以我不能为每一列添加宽度属性。

我正在使用 Ag-Grid 企业版

先感谢您。

Answer 1

你不能。 您必须在columnDef中预设列宽的值

const columnDefs: Array<ColDef | ColGroupDef> = [
  // ...
  {
    // ...
    width: number,
  }
];

您还可以在列定义中包含cellStyle或cellClass属性。

您可以在此处查看 API： https ://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid/src/ts/entities/colDef.ts

Answer 2

我认为你有几个选择。

1）在渲染前设置列宽。 在渲染网格之前，循环浏览您的数据对象以获得将在网格中显示的每个元素的最大长度，然后相应地设置您的 columnDefs。 要编辑 columnDefs，您需要将其设为变量，而不是常量，然后您只需编辑对象数组。 请参阅如何使用 JavaScript 或 jQuery 更改数组内的对象的值？ 这种方法会在计算宽度时减慢初始渲染速度。

2）渲染后设置列宽。 渲染网格后，使用 gridApi.setColumnWidth() 方法。 https://www.ag-grid.com/javascript-grid-column-api/

onGridReady(params) {
  params.columnApi.setColumnWidth('someColumn', someColumnWidth, true);
}

使用这种方法，网格将开始渲染得更快一些，但用户可能会看到列宽调整。

Answer 3

不完全是你想要做的，我不认为，但另一种选择是让文本截断并让它在鼠标悬停时显示：

  agGridColumnDef.cellRenderer = function(params) {
    return "<span title='" + params.value + "'>" + params.value + "</span>";
  };

Answer 4

未来谷歌人的答案

<AgGridColumn
  wrapText={true}
  autoHeight={true}
/>