在 ag-grid 中创建一个降低或增加列宽的按钮答案

【问题标题】：Create a button that lowers or increases the column width in ag-grid在 ag-grid 中创建一个降低或增加列宽的按钮
【发布时间】：2020-08-26 20:51:08
【问题描述】：

我正在尝试创建两个按钮，一个增加 ag-grid 中的列宽，另一个按钮在单击时减小列宽。

【问题讨论】：

标签： ag-grid ag-grid-angular ag-grid-react

【解决方案1】：

您可以使用ColumnApi.getColumnState() 访问最新的列宽，并使用ColumnApi.setColumnWidth() 更新任何列宽。这是一个例子

const changeWidth = (colId, offset) => () => {
  const currentWitdth = columnApi
    .getColumnState()
    .find((c) => c.colId === colId).width;
  columnApi.setColumnWidth(colId, currentWitdth + offset);
};

如果你想改变所有列的宽度

const changeAllWidth = (offset) => () => {
  const columnState = columnApi.getColumnState();

  columnState.forEach((c) => {
    if (c.width) {
      columnApi.setColumnWidth(c.colId, c.width + offset);
    }
  });
};

用法

<button onClick={changeAllWidth(10)}>+ All</button>
<button onClick={changeAllWidth(-10)}>- All</button>

<button onClick={changeWidth("athlete", 10)}>+ athlete</button>
<button onClick={changeWidth("athlete", -10)}>- athlete</button>
<button onClick={changeWidth("age", 10)}>+ age</button>
<button onClick={changeWidth("age", -10)}>- age</button>

现场演示

【讨论】：

谢谢！你才是真正的 MVP。
我的问题是我的表中有一个组
很高兴我能帮上忙 :)
您知道如何将其应用于群组吗？
我的答案中的代码应该适用于行组。我已将行组添加到现场演示中。如果您还有其他问题，请在您的问题中添加相关代码。