ag-grid表头单元格添加图标
时间: 2023-09-06 22:08:15 浏览: 72
要在 ag-grid 表头单元格中添加图标,可以使用 ag-grid 提供的自定义表头组件(Header Component)。以下是一个示例:
1. 在 gridOptions 中定义 Header Component:
```javascript
gridOptions = {
// ...
components: {
customHeader: CustomHeaderComponent
},
// ...
};
```
2. 创建 CustomHeaderComponent 组件:
```javascript
import {Component} from "@angular/core";
@Component({
selector: 'custom-header',
template: `
<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
<span ref="eLabel" class="ag-header-cell-label" role="presentation">
<i class="fa fa-filter"></i>
{{params.displayName}}
</span>
</div>
`
})
export class CustomHeaderComponent {
params: any;
agInit(params: any): void {
this.params = params;
}
}
```
在这个示例中,我们使用了 Font Awesome 图标库中的一个图标(`fa-filter`)。你可以在 `eLabel` span 标签内添加任何 HTML 代码和样式,以便自定义表头单元格的样式。
3. 在列定义中使用 Header Component:
```javascript
columnDefs = [
{
headerName: "Column A",
field: "A",
headerComponent: 'customHeader'
},
// ...
];
```
最后,将 `headerComponent` 属性设置为 `customHeader`,以在表头单元格中使用自定义的组件。
这样,就可以在 ag-grid 表头单元格中添加图标了。