[英]How to change Header name dynamically in AG-Grid React?
I want to change the header icon dynamically(ie based on the data coming from back end).我想动态更改 header 图标(即基于来自后端的数据)。
I searched through the internet but didn't find much solution and the documentation doesn't had the clear implementation.我通过互联网搜索但没有找到太多解决方案,并且文档没有明确的实现。
So, I thought to share it here.所以,我想在这里分享一下。
Sample Code:示例代码:
export function ColumDefinition(dataFromAPI) {
return [
{
field: 'abc1',
resizable: true,
flex:1,
headerClass: "xyz1",
lockPosition: true
},
{
field: 'abc2',
width: 140,
headerClass: "xyz2",
lockPosition: true
}
] }
Useful Links:有用的链接:
I used headerComponentParams to solve this.我使用headerComponentParams来解决这个问题。
Column Definition :列定义:
export function ColumDefinition(dataFromAPI) {
return [
{
field: 'abc1',
resizable: true,
flex:1,
headerClass: "xyz1",
lockPosition: true
},
{
field: 'abc2',
width: 140,
headerClass: "xyz2",
lockPosition: true,
headerComponentParams: (params) => {
let icon = dataFromAPI === "X" ? Data1 : Data2;
return { template: `<div class="abc">HeaderName <img class="abcd" src=${icon}>` }
},
}
]
}
To pass the API data I used it in below way:为了传递 API 数据,我以下列方式使用它:
const ModuleGridLoad = (RowData) => {
setColumDefinitionColDef(ColumDefinition(props.dataFromAPI));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.