React テーブルの並べ替え

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

デモ

並べ替えタイプの設定

列または複数の列を昇順降順に並べ替えできます。TriState が有効な場合、列に適用されている並べ替えを削除できます。

  • SortByMultipleColumns
  • SortByMultipleColumnsTriState
  • SortByOneColumnOnly
  • SortByOneColumnOnlyTriState
import { HeaderClickAction } from "igniteui-react-grids/ES5/HeaderClickAction";
<IgrLiveGrid
    height="100%"
    width="100%"
    headerClickAction={HeaderClickAction.SortByMultipleColumns}
    dataSource={this.data}
    ref={this.onGridRef}/>

API を使用した並べ替え

import { ColumnSortDescription } from "igniteui-react-grids/ES5/igr-column-sort-description";
import { ListSortDirection } from "igniteui-react-core/ES5/ListSortDirection";
public onGridRef(grid: IgrLiveGrid) {
    this.grid = grid;
}
...
let colSortDesc = new ColumnSortDescription();
colSortDesc.propertyPath = "UnitsInStock";
colSortDesc.sortDirection = ListSortDirection.Descending;
this.grid.sortDescriptions.add(colSortDesc);