Web Components Grid Sorting Overview
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.
Web Components Grid Sorting Example
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-webcomponents-grids';
<igc-data-grid
id="grid"
height="100%"
width="100%"
header-click-action="SortByMultipleColumns">
</igc-data-grid>
Sorting through API
import { IgcColumnSortDescription } from 'igniteui-webcomponents-grids';
import { ListSortDirection } from 'igniteui-webcomponents-core';
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;
let colSortDesc = new IgcColumnSortDescription();
colSortDesc.field = "UnitsInStock";
colSortDesc.sortDirection = ListSortDirection.Descending;
grid1.sortDescriptions.add(colSortDesc);