IgxGrid では、列の sortStrategy インプットに ISortingStrategy を実装するクラスを指定することで、独自のソートルールを適用することができます。
下記例では、IgxGrid 2列目(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