React グリッド ソートの概要

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

    React グリッド ソートの例

    コード スニペット

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

    import { HeaderClickAction } from 'igniteui-react-grids';
    
    <IgrDataGrid
        height="100%"
        width="100%"
        headerClickAction={HeaderClickAction.SortByMultipleColumns}
        dataSource={this.data}
        ref={this.onGridRef}/>
    

    API を使用したソート

    import { IgrColumnSortDescription } from 'igniteui-react-grids';
    import { ListSortDirection } from 'igniteui-react-core';
    
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
    }
    // ...
    let colSortDesc = new IgrColumnSortDescription();
    colSortDesc.field = "UnitsInStock";
    colSortDesc.sortDirection = ListSortDirection.Descending;
    this.grid.sortDescriptions.add(colSortDesc);