Web Components Grid ソート

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

Web Components Grid ソート概要の例

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

<igc-column field="ProductName" header="Product Name" data-type="string" sortable="true"></igc-column>

ソート インジケーター

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

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

API でのソート

IgcGrid Sort メソッドを使用し、列または複数の列を IgcGrid 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 }
]);

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

初期のソート状態

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

public connectedCallback() {
    this.grid.sortingExpressions = [
        { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
        { fieldName: 'Price', dir: SortingDirection.Desc }
    ];
}

リモート ソート

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

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

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>`;
}

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

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>`;
}

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

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>`;
}

スタイル設定

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

<igc-grid class="grid">
</igc-grid>

最も簡単な方法は、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 Web Components Forums
• Ignite UI for Web Components GitHub