React Grid Sorting Overview

The Ignite UI for React Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration.

Demo

Edit on CodeSandbox

Code Snippet

You can sort by a single or multiple column ascending or descending in the React data grid by using the headerClickAction property. If TriState is enabled you can remove the sort applied to a column.

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

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