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