Column Sorting

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

Demo

Code Snippet

You can sort by a single or multiple column ascending or descending in the Web Components 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/ES5/HeaderClickAction";
<igc-live-grid
    id="grid"
    height="100%"
    width="100%"
    header-click-action="SortByMultipleColumns">
</igc-live-grid>

Sorting through API

import { ColumnSortDescription } from "igniteui-react-grids/ES5/igr-column-sort-description";
import { ListSortDirection } from "igniteui-react-core/ES5/ListSortDirection";
import { ColumnSortDescription } from "igniteui-webcomponents-grids/ES2015/igc-column-sort-description";
import { ListSortDirection } from "igniteui-webcomponents-core/ES2015/ListSortDirection";

let grid1 = (document.getElementById("grid") as IgcLiveGridComponent);
grid1.dataSource = data;

let colSortDesc = new ColumnSortDescription();
colSortDesc.propertyPath = "UnitsInStock";
colSortDesc.sortDirection = ListSortDirection.Descending;
grid1.sortDescriptions.add(colSortDesc);