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

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

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

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

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

    初期のソート状態

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

    useEffect(() => {
        gridRef.current.sortingExpressions = [
            { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
            { fieldName: 'ProductName', dir: SortingDirection.Desc }
        ];
    }, [])
    

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

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

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

    • sortHeaderIconTemplate – ソートが適用されない場合にソート アイコンを再テンプレート化します。
    function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
        return (
            <>
                <IgrIcon name='unfold_more'></IgrIcon>
            </>
        );
    }
    
    <IgrGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrGrid>
    
    function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
        return (
            <>
                <IgrIcon name='expand_less'></IgrIcon>
            </>
        );
    }
    
    <IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>
    
    function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
        return (
            <>
                <IgrIcon name='expand_more'></IgrIcon>
            </>
        );
    }
    
    <IgrGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrGrid>
    

    スタイル設定

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

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

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

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

    デモ

    API リファレンス

    その他のリソース

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