IgxGrid 列に独自のソートルールを実装する

IgxGrid では、列の sortStrategy インプットに ISortingStrategy を実装するクラスを指定することで、独自のソートルールを適用することができます。

下記例では、IgxGrid ２列目(ReorderLevel 列)に独自のソートルールを指定しています。独自のソートルールは CustomSortStrategy クラスの sort メソッドに実装されており、昇順と降順を逆転する処理が記述されています。

<igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" width="500px" height="500px" dataType="number">
  <igx-column field="ProductID" header="Product ID"
  [sortable]="true">
  </igx-column>
  <igx-column field="ReorderLevel" header="ReorderLever" dataType="number"
  [sortable]="true" [sortStrategy]="customSortStrategy">
  </igx-column>
  <igx-column field="ProductName" header="ProductName" [dataType]="'string'"
  [sortable]="true">
  </igx-column>
</igx-grid>

export class AppComponent implements OnInit {
  title = 'igx-grid-custom-sort';
  @ViewChild('grid1') grid1: IgxGridComponent;
  public data: any[];
  public customSortStrategy: ISortingStrategy;

  ngOnInit(): void {
    this.data = DATA;
    // customSortStrategy は、2列目の sortStrategy インプットにバインドするオブジェクト
    this.customSortStrategy = new CustomSortStrategy();
  }
}

export class CustomSortStrategy implements ISortingStrategy {
  sort(data: any[], fieldName: string, dir: SortingDirection): Array<any> {
    const key = fieldName;
    const reverse = (dir === SortingDirection.Desc ? 1 : -1); // 昇順と降順を入れ替えている。
    const cmpFunc = (obj1, obj2) => {
      return this.compareObjects(obj1, obj2, key, reverse);
    };
    return data.sort(cmpFunc);
  }
  ...(省略 - 詳細は添付サンプルを参照。)...
}

リファレンス

Grid ソートの概要
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting