ag-Grid：如果列不占据全宽，则将行扩展到右边缘答案

【问题标题】：ag-Grid: extend rows till right edge if columns don't occupy full widthag-Grid：如果列不占据全宽，则将行扩展到右边缘
【发布时间】：2022-04-03 00:43:30
【问题描述】：

在 ag-Grid 中，如果列占用的空间小于网格的宽度，则在最后一列的右侧会出现一个空白孔。请看下面（示例取自ag-Grid docs）：

我团队的用户体验设计师不喜欢这样。他们希望看到行一直延伸到右侧以平衡外观。这可能与 ag-Grid 有关吗？

编辑：我们不想使用sizeColumnsToFit 选项，因为在大型显示器上它会产生非常宽的列并且网格变得不可读。我们想使用autoSize 选项来压缩列，并按照上面的建议用空白条纹填充 RHS 上的孔。

【问题讨论】：

请问您最后为这个问题做了什么？

标签： ag-grid

【解决方案1】：

是的，这是可能的。您可以在 ag-Grid api 上调用 sizeColumnsToFit 函数，该函数将使用列填充表格的宽度。

看看documentation。

Here 是一个笨拙的例子。

编辑使用属性suppressSizeToFit 并将其设置为true，当您调用sizeColumnsToFit 时，它不会产生影响。将此属性应用于defaultColDef 并将最后一列设置为false。这是，当您调用sizeColumnsToFit 时，只有最后一列将设置为全宽。请参阅上面更新的 plunker。

【讨论】：

抱歉，我的问题不够清楚 - 我会编辑它。我们不想要sizeColumnsToFit，因为在大型监视器上它会产生非常宽的列并且网格变得不可读。事实上，我们希望自动调整列的大小并按照问题中的建议用空白条纹填充 RHS 上的孔。
这确实是一个非常有创意的解决方案，Viq。然而，它确实迫使我们在每列上指定最大宽度，这很难做到正确并且失去了自动调整大小提供的灵活性。我将由我们的设计师运行它。同时，欢迎其他选择。（我想知道 ag-Grid 团队是否会认为这是一项值得改进的功能。）
嗨，维克，再次感谢更新的 plunker。但是，我认为它不能解决实际用例中的问题。这是your updated plunker，唯一的变化是它有 10 列而不是 2 列。这适用于宽屏幕（即扩展最后一列），但是对于窄屏幕，我们已经失去了完全适应功能的大小。使用 Auto Size 和最后一列的 Size To Fit（请参阅this plunker）后，我得到了稍微好一点的结果，但即便如此，最后一列也会在小宽度上被压扁。
我仍然认为更好的解决方案是从左到右渲染行，覆盖网格的整个宽度，然后在其顶部绘制列。这样，尺寸匹配和自动尺寸解决方案都可以像现在一样工作，我们不会因为强制使用棘手的尺寸匹配选项而失去其预期行为。

【解决方案2】：

我一直在使用的一个可能选项是在末尾添加一个假列以填充剩余空间。为此，您只需在列列表的末尾添加一个包含类似于以下选项的列：

{
  flex: 1,
  headerName: '',
}

请参阅上面的 @ViqMontana 示例中的 this plunker。

这不是一个完美的解决方案，但想在这里提及它以防万一。

【讨论】：

谢谢你，@JKillian。我认为这是一个很好的解决方法。我相信我自己也尝试过，但有一些细微差别，因此我们没有采用这种方法。不过最好在这里记录一下。

【解决方案3】：

我就是这样做的：

/**
 * if there is "dead space" present on the grid, the columns will be auto sized to fill the gap
 * @param gridApi
 * @param columnApi
 */
resizeColumnsToFit(gridApi: GridApi, columnApi: ColumnApi, allowShrink = false) {
  if (allowShrink) {
    gridApi.sizeColumnsToFit();
  } else {
    const gridBodyWidth = document.getElementsByClassName("ag-root-wrapper")[0].clientWidth; // todo: use grid's id instead of [0] to allow multiple grids on a page
    const allColumnsWidth = columnApi.getAllDisplayedColumns().map(c => c.getActualWidth()).reduce((a, b) => a + b, 0);
    if (gridBodyWidth > allColumnsWidth) {
      gridApi.sizeColumnsToFit();
    }
  }
}

仅当右侧有“死”空间时，此方法才会调整列大小以适应。可选地将 allowShrink 设置为 true 以强制调整大小，即使没有死区

【讨论】：

【解决方案4】：

我遇到了同样的情况，并通过以下 css 覆盖解决了：

.ag-center-cols-container {
  width: 100% !important;
}

【讨论】：

【解决方案5】：

这类似于Craig Weston's answer，但不需要!important：

.ag-center-cols-container {
    min-width: 100%;
}

【讨论】：