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

问题描述

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

解决方法

您可以使用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>

实时演示