[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

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

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

    Web Components グリッド ソートの例

    コード スニペット

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

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

    API リファレンス