ag-grid自定义表头

在 ag-grid 中，可以通过自定义表头组件来实现自定义表头。以下是一个简单的示例：

1. 创建一个自定义表头组件：

import { Component } from '@angular/core';

@Component({
  selector: 'custom-header',
  template: `
    <div class="custom-header">
      <span>{{params.displayName}}</span>
      <button (click)="sort()">Sort</button>
    </div>
  `,
  styles: [`
    .custom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px;
    }
  `]
})
export class CustomHeaderComponent {
  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  sort(): void {
    this.params.setSort('asc');
  }
}

在这个组件中，我们添加了一个显示列名的 span 元素以及一个排序按钮。当按下按钮时，我们调用 `params.setSort()` 方法来设置排序方式。

2. 在表格中使用自定义表头组件：

import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';
import { CustomHeaderComponent } from './custom-header.component';

@Component({
  selector: 'app-grid',
  template: `
    <ag-grid-angular
      [rowData]="rowData"
      [columnDefs]="columnDefs">
    </ag-grid-angular>
  `
})
export class GridComponent {
  public rowData: any[];
  public columnDefs: ColDef[];

  constructor() {
    this.rowData = [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 35 },
    ];

    this.columnDefs = [
      {
        headerName: 'Name',
        field: 'name',
        headerComponentFramework: CustomHeaderComponent,
        sortable: true,
        filter: true
      },
      {
        headerName: 'Age',
        field: 'age',
        headerComponentFramework: CustomHeaderComponent,
        sortable: true,
        filter: true
      }
    ];
  }
}

在这个组件中，我们添加了两个列定义，并将 `headerComponentFramework` 属性设置为之前创建的自定义表头组件。这将使 ag-grid 使用我们的组件来绘制表头。

通过这种方式，我们可以轻松地创建自定义表头组件，并将它们与 ag-grid 集成。