ag-grid表头单元格添加图标
时间: 2023-09-05 12:13:20 浏览: 82
要在 ag-grid 表头单元格中添加图标,可以使用 ag-grid 提供的 headerComponent 参数和 headerComponentFramework 参数。
1. headerComponent 参数
使用 headerComponent 参数时,需要自定义一个组件来渲染表头单元格,该组件需要实现 ag-grid 的 IHeaderComp 接口。
在该组件中,可以通过 params 对象访问到 ag-grid 的相关属性和方法,例如 column、sortAscending、sortDescending 等。
以下是一个简单的示例代码:
```javascript
import { Component } from '@angular/core';
import { IHeaderComp } from 'ag-grid-community';
@Component({
selector: 'app-header-icon',
template: `
<div class="header-container">
{{ params.displayName }}
<i class="material-icons">{{ params.icon }}</i>
</div>
`,
styles: [
`
.header-container {
display: flex;
align-items: center;
}
.material-icons {
font-size: 18px;
margin-left: 5px;
cursor: pointer;
}
`,
],
})
export class HeaderIconComponent implements IHeaderComp {
params: any;
agInit(params: any): void {
this.params = params;
}
}
```
在该组件中,我们通过 params 对象获取了表头单元格的 displayName 属性,并在该属性后面添加了一个 material-icons 图标。
2. headerComponentFramework 参数
使用 headerComponentFramework 参数时,需要将自定义的组件作为参数传递给 ag-grid。
以下是一个示例代码:
```javascript
import { Component } from '@angular/core';
import { HeaderIconComponent } from './header-icon.component';
@Component({
selector: 'app-grid',
template: `
<ag-grid-angular
[rowData]="rowData"
[columnDefs]="columnDefs"
[headerHeight]="40"
[headerComponentFramework]="headerComponent"
></ag-grid-angular>
`,
})
export class GridComponent {
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
];
columnDefs = [
{
headerName: 'Make',
field: 'make',
sort: 'asc',
headerComponentFramework: HeaderIconComponent,
headerComponentParams: {
icon: 'arrow_drop_up',
},
},
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' },
];
headerComponent = HeaderIconComponent;
}
```
在该示例代码中,我们将 headerComponentFramework 参数设置为 HeaderIconComponent 组件,并在 columnDefs 中为 Make 列设置了一个 sort: 'asc' 属性,使其默认按升序排序。
我们还通过 headerComponentParams 将一个 icon 属性传递给 HeaderIconComponent 组件,用于设置图标类型。
最后,我们将 headerComponent 参数设置为 HeaderIconComponent 组件,以使其在表头单元格中显示。