Angular Grid のソート

Ignite UI for Angular Grid では、列レベルでのデータ ソートが可能です。つまり、igx-grid にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

Note

これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。

Angular Grid ソートの例

sortable 入力で可能です。Grid のソートで、sortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

<igx-column field="ProductName" header="Product Name" [dataType]="'string'" sortable="true"></igx-column>

ソート インジケーター

ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。

IgxGrid は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。

API を使用したソート

Grid sort メソッドを使用して列、複数の列の組み合わせをソートできます。

import { SortingDirection } from 'igniteui-angular';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

// Perform a case insensitive ascending sort on the ProductName column.
this.grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);

Note

Sorting は、DefaultSortingStrategy アルゴリズムを使用して実行されます。IgxColumnComponent または ISortingExpression は、代替アルゴリズムとして ISortingStrategy のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。

フィルター動作で、ソート状態をクリアするには clearSort メソッドを使用します。

// Removes the sorting state from the ProductName column
this.grid.clearSort('ProductName');

// Removes the sorting state from every column in the Grid
this.grid.clearSort();

Note

Grid の sortStrategy は column の sortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。

Note

ソート操作で Grid の基になるデータ ソースは変更しません。

初期のソート状態

Grid でソート状態を初期設定するには、ソート式の配列を Grid の sortingExpressions プロパティに渡します。

public ngAfterViewInit(): void {
    this.grid.sortingExpressions = [
        {
            dir: SortingDirection.Asc, fieldName: 'CategoryName',
            ignoreCase: true, strategy: DefaultSortingStrategy.instance()
        }
    ];
}

Note

string 型の値が dataType Date の列で使用される場合、Grid が値を Date オブジェクトに解析しないため iGrid sorting が正しく動作しません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。

リモート ソート

Grid はリモート ソートをサポートします。詳細については、Grid リモート データ操作で説明されています。

ソート インジケーのターテンプレート

列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。以下のディレクティブは、ソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。

• IgxSortHeaderIconDirective – ソートが適用されない場合にソート アイコンを再テンプレート化します。

<ng-template igxSortHeaderIcon>
    <igx-icon>unfold_more</igx-icon>
</ng-template>

• IgxSortAscendingHeaderIconDirective – 列が昇順にソートされたときにソート アイコンを再テンプレート化します。

<ng-template igxSortAscendingHeaderIcon>
    <igx-icon>expand_less</igx-icon>
</ng-template>

• IgxSortDescendningHeaderIconDirective – 列が降順でソートされたときにソート アイコンを再テンプレート化します。

<ng-template igxSortDescendingHeaderIcon>
    <igx-icon>expand_more</igx-icon>
</ng-template>

スタイル設定

ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も単純なアプローチに従って、grid-theme を拡張し、$sorted-header-icon-color および sortable-header-icon-hover-color パラメーターを受け取ります。

$custom-theme: grid-theme(
  $sorted-header-icon-color: #ffb06a,
  $sortable-header-icon-hover-color: black
);

Note

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。

@include css-vars($custom-theme);

デモ

Note

このサンプルは、Change Theme (テーマの変更) から選択したグローバル テーマに影響を受けません。

API リファレンス

• IgxGridComponent API
• IgxGridComponent スタイル
• ISortingExpression

その他のリソース

• Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)