[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Descripción general de la clasificación de cuadrícula de Web Components
La tabla de datos / cuadrícula de datos de Ignite UI for Web Components admite la clasificación de columnas ascendentes y descendentes con una configuración de clasificación de columnas de una sola columna, varias columnas y tres estados.
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-data-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-data-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);