AG-Grid 动态列 header 文本
AG-Grid dynamic column header text
这看起来很简单,但事实证明并非如此。由于某种原因 headerName
被转换为字符串,因此它不能是函数。
我也尝试了各种 renderer
和 headerComponent
函数,但就像我说的,我只想 return 一个动态字符串,而不是覆盖所有内容而必须 re-implement 它(例如自定义 header 组件的情况)。
// I'm trying everything at this point, nothing renders out..
getHeaderCellTemplate: () => 'test 2',
headerCellTemplate: () => {
// What I actually want to achieve:
const currency = appModel.selectedCertificate().currency();
return currency ? `Total Value (${currency})` : 'Total Value';
},
headerCellRenderer: HeaderCellRenderer,
headerComponent: HeaderCellRenderer,
cellRenderer: () => 'test 7',
headerRenderer: () => 'test 9',
我知道我可以将列 def 包装在一个函数中,但这会非常低效,因为每次渲染时列 def 都是 re-created。
我希望这对你有用:
headerValueGetter: (params) => {
const currency = appModel.selectedCertificate().currency();
return currency ? `Total Value (${currency})` : 'Total Value';
}
这看起来很简单,但事实证明并非如此。由于某种原因 headerName
被转换为字符串,因此它不能是函数。
我也尝试了各种 renderer
和 headerComponent
函数,但就像我说的,我只想 return 一个动态字符串,而不是覆盖所有内容而必须 re-implement 它(例如自定义 header 组件的情况)。
// I'm trying everything at this point, nothing renders out..
getHeaderCellTemplate: () => 'test 2',
headerCellTemplate: () => {
// What I actually want to achieve:
const currency = appModel.selectedCertificate().currency();
return currency ? `Total Value (${currency})` : 'Total Value';
},
headerCellRenderer: HeaderCellRenderer,
headerComponent: HeaderCellRenderer,
cellRenderer: () => 'test 7',
headerRenderer: () => 'test 9',
我知道我可以将列 def 包装在一个函数中,但这会非常低效,因为每次渲染时列 def 都是 re-created。
我希望这对你有用:
headerValueGetter: (params) => {
const currency = appModel.selectedCertificate().currency();
return currency ? `Total Value (${currency})` : 'Total Value';
}