如何解决创建一个按钮来降低或增加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>
实时演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。