React Grid ソート

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

React Grid ソート概要の例

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

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

ソート インジケーター

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

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

API でのソート

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

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

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

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

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

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

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

初期のソート状態

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

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

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

リモート ソート

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

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

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

<IgrGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrGrid>

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

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

<IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>

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

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

<IgrGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrGrid>

スタイル設定

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

<IgrGrid className="grid">
</IgrGrid>

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