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 }
]);

フィルター動作と同様に、ソート状態をクリアするには 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();

初期のソート状態

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

const sortingExpressions: IgrSortingExpression[] = [
    { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
];

<IgrTreeGrid
    data={productSales}
    sortingExpressions={sortingExpressions}>
</IgrTreeGrid>

リモート ソート

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

• IgrTreeGrid.sortHeaderIconTemplate – re-templates the sorting icon when no sorting is applied.

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

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

• IgrTreeGrid.sortAscendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in ascending order.

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

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

• IgrTreeGrid.sortDescendingHeaderIconTemplate – re-templates the sorting icon when the column is sorted in descending order.

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

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

スタイル設定

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

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

最も簡単な方法は、grid-theme を拡張する新しいテーマを作成し、$sorted-header-icon-color、および sortable-header-icon-hover-color パラメーターを受け取る方法です。

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

スタイル設定

API リファレンス

Our community is active and always welcoming to new ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub