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]
IgrGrid
のsortStrategy
はIgrColumn
のsortStrategy
と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
[!Note] ソート操作で
IgrGrid
の基になるデータ ソースは変更しません。
初期のソート状態
IgrGrid
でソート状態を初期設定するには、ソート式の配列を IgrGrid
の sortingExpressions
プロパティに渡します。
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>
sortAscendingHeaderIconTemplate
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='expand_less'></IgrIcon>
</>
);
}
<IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>
sortDescendingHeaderIconTemplate
– 列が降順にソートされたときにソート アイコンを再テンプレート化します。
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 リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。