Web Components グリッド ソートの概要

Web Components Data Table / Data Grid は、単一列、複数列、およびトライステート列のソート構成で昇順および降順の列のソートをサポートします。

Web Components グリッド ソートの例

コード スニペット

headerClickAction プロパティを使用して、Web Components データ グリッドで単一または複数の列を昇順降順にソートできます。TriState が有効な場合、列に適用されているソートを削除できます。

• SortByMultipleColumns
• SortByMultipleColumnsTriState
• SortByOneColumnOnly
• SortByOneColumnOnlyTriState

import { HeaderClickAction } from 'igniteui-webcomponents-grids';

<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    header-click-action="SortByMultipleColumns">
</igc-data-grid>

API を使用したソート

import { IgcColumnSortDescription } from 'igniteui-webcomponents-grids';
import { ListSortDirection } from 'igniteui-webcomponents-core';

let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;

let colSortDesc = new IgcColumnSortDescription();
colSortDesc.field = "UnitsInStock";
colSortDesc.sortDirection = ListSortDirection.Descending;
grid1.sortDescriptions.add(colSortDesc);