Web Components Grid ソート
Web Components Grid の Ignite UI for Web Components データ ソート機能は列ごとのレベルで有効になっています。つまり、IgcGridComponent
にはソート可能な列とソート不可能な列を混在させることができます。Web Components でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
Web Components Grid ソート概要の例
以下のように sortable
入力を使用します。IgcGridComponent
のソートで、sortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<igc-column field="ProductName" header="Product Name" data-type="string" sortable="true"></igc-column>
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
IgcGridComponent
は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
API でのソート
IgcGridComponent
sort
メソッドを使用し、列または複数の列を IgcGridComponent
API でソートできます。
import { SortingDirection } from 'igniteui-webcomponents-grids';
// Perform a case insensitive ascending sort on the ProductName column.
this.grid.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
[!Note] Sorting は、
DefaultSortingStrategy
アルゴリズムを使用して実行されます。IgcColumnComponent
またはISortingExpression
は、代替アルゴリズムとしてISortingStrategy
のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
フィルター動作と同様に、ソート状態をクリアするには clearSort
メソッドを使用します。
// Removes the sorting state from the ProductName column
this.grid.clearSort('ProductName');
// Removes the sorting state from every column in the Grid
this.grid.clearSort();
[!Note]
IgcGridComponent
のsortStrategy
はIgcColumnComponent
のsortStrategy
と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
[!Note] ソート操作で
IgcGridComponent
の基になるデータ ソースは変更しません。
初期のソート状態
IgcGridComponent
でソート状態を初期設定するには、ソート式の配列を IgcGridComponent
の sortingExpressions
プロパティに渡します。
public connectedCallback() {
this.grid.sortingExpressions = [
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
];
}
[!Note]
string
型の値がdataType
Date
の列で使用される場合、IgcGridComponent
が値をDate
オブジェクトに解析しないためIgcGridComponent
Sorting
が正しく動作しません。string
オブジェクトを使用する場合、値をDate
オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
ソート インジケーター テンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。次のプロパティは、任意のソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
sortHeaderIconTemplate
– ソートが適用されない場合にソート アイコンを再テンプレート化します。
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
grid.data = this.data;
grid.sortHeaderIconTemplate = this.sortHeaderIconTemplate;
}
public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-icon name="unfold_more"></igc-icon>`;
}
sortAscendingHeaderIconTemplate
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
grid.data = this.data;
grid.sortAscendingHeaderIconTemplate = this.sortAscendingHeaderIconTemplate;
}
public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-icon name="expand_less"></igc-icon>`;
}
sortDescendingHeaderIconTemplate
– 列が降順にソートされたときにソート アイコンを再テンプレート化します。
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
grid.data = this.data;
grid.sortDescendingHeaderIconTemplate = this.sortDescendingHeaderIconTemplate;
}
public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html`<igc-icon name="expand_more"></igc-icon>`;
}
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<igc-grid class="grid">
</igc-grid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。