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

​headerClickAction 속성을 사용하여 Web Components 데이터 그리드에서 단일 또는 여러 열을 오름차순 또는 내림차순으로 정렬할 수 있습니다. TriState가 활성화된 경우 열에 적용된 정렬을 제거할 수 있습니다.

• 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