[!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.

Web Components 그리드 정렬 개요

Ignite UI for Web Components 데이터 테이블/데이터 그리드는 단일 열, 다중 열 및 3상태 열 정렬 구성으로 오름차순 및 내림차순 열 정렬을 지원합니다.

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.

• SortByMultipleColumns
• SortByMultipleColumnsTriState
• SortByOneColumnOnly
• SortByOneColumnOnlyTriState

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

API References

• headerClickAction
• SortByMultipleColumnsTriState
• SortByMultipleColumns
• SortByOneColumnOnlyTriState