SYIDAX / DATA GRID
단일·다중 정렬
열 제목을 누르면 오름차순, 내림차순, 정렬 해제 순으로 전환합니다.
AI 요청하기
웹사이트 샘플 주문 데이터(orders)로 sy-grid를 만들어 줘. - 켤 기능(나머지는 끔): sorting - 속성: multiSort: true
단일·다중 정렬샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
옵션
아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.
최근 결과
수량 헤더를 눌러보세요. 다시 누르면 정렬 방향이 바뀌며 헤더의 화살표로 방향을 알 수 있습니다.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#수량이 많은 주문부터 보거나, 담당 팀 안에서 수량 순으로 정리할 때 사용합니다.
직접 해보기
- 한 열로 정렬
수량 헤더를 눌러보세요. 다시 누르면 정렬 방향이 바뀌며 헤더의 화살표로 방향을 알 수 있습니다.
- 정렬 조건 추가
담당 팀을 먼저 정렬한 뒤 Shift를 누른 채 수량 헤더를 누르세요. 팀을 우선으로 묶고 그 안에서 수량을 비교합니다.
- 결과 읽고 해제
실행 결과의 sortChanged에서 열 이름과 방향을 확인하세요. 같은 헤더를 차례로 누르면 정렬 해제 상태로 돌아갑니다.
확인할 결과
행의 표시 순서가 정렬 조건에 따라 바뀝니다. 주문 번호와 각 행의 실제 값은 유지됩니다.
정렬 후 첫 번째로 보이는 행이 원본 데이터 배열의 첫 행과 같다고 가정하지 마세요. 주문을 찾을 때는 ID를 사용하세요.
알아두면 쉬운 용어
- 오름차순 / 내림차순
- 작은 값부터 / 큰 값부터 나열하는 순서입니다.
- sortModel
- 정렬할 열과 방향을 순서대로 담은 배열입니다.
핵심 API 예시
등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.
await grid.setSortModel([{field:'team',direction:'asc'},{field:'quantity',direction:'desc'}]);API reference
#주요 속성
| Attribute / Property | 타입 / 기본값 | 설명 |
|---|---|---|
| multiSort | boolean기본값 false | enable **multi-column sort**. When `true`, shift+click (or shift+Enter/Space on a focused header) appends the column to the ordered sort model / cycles it in place; plain click keeps the single-column cycle and collapses the model to one entry. When `false` (default), interaction behaviour is exactly the single sort. Programmatic `setSortModel` is honoured regardless of this flag. Initial multi-sort seeds from `columnDefs` `sort:` + `sortIndex`. |
나머지 속성1
| Attribute / Property | 타입 / 기본값 | 설명 |
|---|---|---|
| enableMultiSort | boolean기본값 false | 이름을 선택해 타입 계약을 확인하세요. |
이벤트1
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
GridSortChangedDetail | Fires when header sorting changes, including reset to unsorted. |
메서드3
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
| column: string, direction?: GridSortDirection | null | Promise<void> | Programmatic sort API (single-key semantics). |
| model: ReadonlyArray<{ field: string; direction: 'asc' | 'desc' }> | Promise<void> | replace the whole ordered sort model (AG Grid `sortModel` semantics; array position = priority). Entries are validated: unknown or `sortable: false` columns and malformed entries are dropped, duplicate fields keep the first entry. Honoured regardless of `multi-sort` (the flag gates header interaction, not the programmatic surface). Emits `sortChanged` once with the applied model. |
Promise<SortModelEntry[]> | read the current ordered sort model (defensive copy). |
ColumnDef4
| ColumnDef | 타입 / 필수 여부 | 설명 |
|---|---|---|
boolean선택 | Whether the column is sortable (header click toggles direction). | |
'asc' | 'desc' | null선택 | Initial sort direction; `null` means unsorted. | |
number선택 | initial multi-sort priority when several columns declare `sort:` and the grid runs with `multi-sort`. Lower values sort first; omissions and ties fall back to `columnDefs` order. Ignored in single-sort mode . Mirrors AG Grid's `initialSortIndex`. | |
GridCallback<[TValue, TValue, Readonly<TData>, Readonly<TData>], number>선택 | 이름을 선택해 타입 계약을 확인하세요. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.