Ag-Grid：调整列宽并在列超出容器大小时显示水平滚动条

Question

我将列面板设置为来自 AG-Grid 的 add/remove 列。大约有 50 列，默认情况下显示 5 列 属性 api.sizeColumnsToFit()。它工作正常但是当用户尝试添加更多列并且列超出容器的 space 时就会出现问题。它试图适应容器大小并搞砸了。

如果我删除了 api.sizeColumnsToFit()，一旦用户删除了所有列并仅保留 2-3 列，它确实适合大小，但显示空白 space 在网格中，看起来不太好。

知道如何有条件地配置 ag-grid 以按以下方式正常工作：

if columns_are_less_than_container_size
  api.sizeColumnsToFit()
else
  Do NOT apply sizeColumnsToFit
  rather show a horizontal scroll

Answer 1

可以实现onDisplayedColumnsChanged，根据父元素的宽度计算

您可能想要定义最小宽度并使用 getMinWidth。

而不是 getActualWidth

onDisplayedColumnsChanged(params) {
    const gridWidth = document.getElementById("parent").offsetWidth;
    const widthVisibleColumns = params.columnApi.getAllColumns()
      .filter(c => c.isVisible())
      .map(c => c.getActualWidth())
      .reduce((a, b) => a + b);
    if (gridWidth > widthVisibleColumns) {
      params.api.sizeColumnsToFit();
    }
}