React Hierarchical Grid ソート

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

React Hierarchical Grid ソート概要の例

以下のデモは、IgrHierarchicalGrid の ContextMenu 出力を使用してカスタム コンテキスト メニューを追加しています。

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

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

ソート インジケーター

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

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

API でのソート

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

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

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

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

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

// Removes the sorting state from the ProductName column
hierarchicalGridRef.current.clearSort('ProductName');

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

初期のソート状態

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

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

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

リモート ソート

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

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

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

<IgrHierarchicalGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrHierarchicalGrid>

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

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

<IgrHierarchicalGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrHierarchicalGrid>

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

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

<IgrHierarchicalGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrHierarchicalGrid>

スタイル設定

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

<IgrHierarchicalGrid className="grid">
</IgrHierarchicalGrid>

最も簡単な方法は、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