React Tree Grid ソート

React Tree Grid の Ignite UI for React データソート機能は列ごとのレベルで有効になっています。つまり、IgrTreeGrid にはソート可能な列とソート不可能な列を混在させることができます。React でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

React Tree Grid ソート概要の例

以下のように sortable 入力を使用します。IgrTreeGrid のソートで、sortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

<IgrColumn field="ProductName" header="Product Name" dataType="string" sortable="true"></IgrColumn>

ソートインジケーター

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

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

API でのソート

IgrTreeGrid sort メソッドを使用し、列または複数の列を IgrTreeGrid API でソートできます。

import { SortingDirection } from "igniteui-react-grids";

// Perform a case insensitive ascending sort on the Category column.
treeGridRef.current.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);

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

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

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

// Removes the sorting state from the Category column
treeGridRef.current.clearSort('Category');

// Removes the sorting state from every column in the Tree Grid
treeGridRef.current.clearSort();

[!Note] IgrTreeGrid の sortStrategy は IgrColumn の sortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。

[!Note] ソート操作で IgrTreeGrid の基になるデータソースは変更しません。

初期のソート状態

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

useEffect(() => {
    treeGridRef.current.sortingExpressions = [
        { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
        { fieldName: 'Price', dir: SortingDirection.Desc }
    ];
}, [])

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

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

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

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

function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='unfold_more'></IgrIcon>
        </>
    );
}

<IgrTreeGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrTreeGrid>

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

function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='expand_less'></IgrIcon>
        </>
    );
}

<IgrTreeGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrTreeGrid>

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

function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='expand_more'></IgrIcon>
        </>
    );
}

<IgrTreeGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrTreeGrid>

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrTreeGrid className="grid">
</IgrTreeGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}

デモ

API リファレンス

IgrSortingExpression

その他のリソース

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

React Tree Grid ソート