[!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ículas Web Components

La 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, de varias columnas y de tres estados.

Web Components Grid Sorting Example

Code Snippet

Puede ordenar por una o varias columnas de forma ascendente o descendente en la cuadrícula de datos Web Components mediante la propiedad headerClickAction. Si TriState está habilitado, puede eliminar la clasificación aplicada a una columna.

• SortByMultipleColumns
• SortByMultipleColumnsTriState
• SortByOneColumnOnly
• SortByOneColumnOnlyTriState

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

API References

• headerClickAction
• SortByMultipleColumnsTriState
• SortByMultipleColumns
• SortByOneColumnOnlyTriState