# 단일·다중 정렬

정렬은 데이터 값을 수정하지 않고 표시 순서를 바꿉니다. 단일 정렬은 한 기준만, 다중 정렬은 우선순위가 있는 여러 기준을 사용합니다.

Canonical: https://grid.syidax.com/ko/docs/features/sorting/

<a id="understand"></a>

## 동작 원리와 선택 기준

숫자를 문자열로 저장하면 기대한 숫자 순서와 다를 수 있습니다. 표시 포맷은 formatter에서 처리하고 정렬 기준은 실제 타입에 맞게 준비하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 수량이 많은 주문부터

수량 열에 내림차순 정렬을 명시적으로 적용합니다.

```javascript
await grid.sortBy('quantity', 'desc');
console.log(await grid.getSortModel());
```

결과 확인: quantity 내림차순 모델이 적용됩니다. direction을 생략한 순환 동작과 명시적인 desc 설정을 구분합니다.

<a id="example-2"></a>

## 예제 2. 팀 안에서 수량 비교

팀을 우선으로 묶고 같은 팀 안에서 수량을 비교합니다.

```javascript
grid.multiSort = true;
await grid.setSortModel([{ field: 'team', direction: 'asc' }, { field: 'quantity', direction: 'desc' }]);
```

결과 확인: 배열 첫 조건이 우선합니다. 원본 행 ID와 값은 유지되고 표시 위치만 달라집니다.

<a id="example-3"></a>

## 예제 3. 정렬 해제와 사용자 변경 구독

원래 순서로 돌아가고 이후 사용자가 헤더를 눌렀을 때 모델을 읽습니다.

```javascript
await grid.setSortModel([]);
grid.addEventListener('sortChanged', event => console.log(event.detail));
```

결과 확인: 빈 모델은 정렬 해제입니다. 여러 조건 중 하나만 제거하려면 sortBy의 null 동작과 전체 모델 교체를 구분합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

원격 모델에서는 서버가 같은 정렬 규칙을 적용해야 합니다. 페이지마다 브라우저에서만 정렬하면 페이지 사이의 순서는 틀릴 수 있습니다.

여러 값이 같은 경우에도 결과가 안정적이어야 한다면 앱의 데이터 순서나 서버의 보조 키를 관리하세요. 정렬 후 rowIndex로 업무 대상을 저장하지 않습니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [multiSort](https://grid.syidax.com/ko/docs/options/multiSort.md) — 여러 열의 정렬 기준을 함께 사용합니다. 우선순위는 정렬 모델의 순서로 확인합니다.
- [enableMultiSort](https://grid.syidax.com/ko/docs/options/enableMultiSort.md) — 다중 정렬의 호환 이름입니다. multiSort와 모순되지 않게 설정합니다.
- [sortable](https://grid.syidax.com/ko/docs/columns/sortable.md) — 이 열을 사용자 정렬 대상으로 허용할지 정합니다.
- [sort](https://grid.syidax.com/ko/docs/columns/sort.md) — 열의 초기 오름차순·내림차순 정렬 또는 정렬 해제를 지정합니다.
- [sortIndex](https://grid.syidax.com/ko/docs/columns/sortIndex.md) — 여러 초기 정렬 기준 중 이 열의 우선순위를 지정합니다.
- [comparator](https://grid.syidax.com/ko/docs/columns/comparator.md) — 두 값과 행을 받아 정렬 순서를 비교합니다. 음수·0·양수로 앞·같음·뒤를 표현합니다.
- [sortBy](https://grid.syidax.com/ko/docs/methods/sortBy.md) — 한 열의 정렬을 지정합니다. 방향 생략은 정렬 순환, null은 해당 열 정렬 해제이며 전체 다중 모델은 setSortModel로 설정합니다.
- [setSortModel](https://grid.syidax.com/ko/docs/methods/setSortModel.md) — 정렬 기준 목록과 우선순위를 한 번에 교체합니다. 빈 배열로 전체 정렬을 해제합니다.
- [getSortModel](https://grid.syidax.com/ko/docs/methods/getSortModel.md) — 현재 정렬 열·방향·우선순위 목록을 읽습니다.
- [sortChanged](https://grid.syidax.com/ko/docs/events/sortChanged.md) — 정렬 기준이 바뀌었을 때 발생합니다. 현재 정렬 모델을 앱의 검색 조건이나 화면 저장에 반영합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/sorting) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.