SYIDAX / DATA GRID
트리 데이터 PRO
경로나 부모 ID로 데이터의 계층을 표현합니다.
트리 데이터샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
최근 결과
예를 들어 본사 → 영업팀 → 담당자처럼 각 항목의 경로 또는 부모 ID를 준비하세요. 모든 항목은 고유 ID를 가져야 합니다.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#조직도나 폴더 목록처럼 부모와 자식 관계가 있는 데이터를 펼치고 접어 볼 때 사용합니다. 값이 같은 행을 묶는 일반 그룹화와 다릅니다.
앱에서 연결하는 순서
- 계층 관계 준비
예를 들어 본사 → 영업팀 → 담당자처럼 각 항목의 경로 또는 부모 ID를 준비하세요. 모든 항목은 고유 ID를 가져야 합니다.
- 관계 전달
앱에서 getDataPath로 경로를 반환하거나 treeIdField와 treeParentField로 항목·부모 ID 필드를 지정합니다. 사용할 방식의 API 계약을 확인하세요.
- 펼침과 데이터 검사
앱에서 상위 항목을 펼쳐 자식이 나타나는지 확인하세요. 부모가 없거나 자신을 부모로 가리키는 잘못된 데이터도 처리해야 합니다.
확인할 결과
실제 부모·자식 구조에 따라 들여쓰기와 펼침 동작이 있는 목록을 만들 수 있습니다.
현재 주문 샘플은 계층 데이터가 없는 평면 목록입니다. 트리 동작을 보려면 앱에서 계층 데이터와 설정을 함께 연결하세요.
알아두면 쉬운 용어
- 부모 ID
- 한 단계 위 항목을 가리키는 고유 값입니다.
- getDataPath
- 각 행이 계층 안에서 어떤 경로에 속하는지 알려 주는 함수입니다.
제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.
API reference
#나머지 속성4
| Attribute / Property | 타입 / 기본값 | 설명 |
|---|---|---|
PRO getDataPath | (row: Record<string, unknown>) => readonly string[]기본값 undefined | tree data via materialized paths (AG `treeData` + `getDataPath` parity): every row names its position as a `string[]`. Function prop (property assignment, not attribute). The tree stage runs after filter/sort, before pagination. Mutually exclusive with `group-by` — tree data wins and warns once. |
PRO treeIdField | string기본값 undefined | declarative tree linkage for `{id, parentId}` tables : set BOTH `tree-id-field` and `tree-parent-field` to activate. `getDataPath` wins when both surfaces are set. |
PRO treeParentField | string기본값 undefined | parent-id column for declarative tree linkage. |
PRO treeLabelField | string기본값 undefined | label column for id-linked trees (defaults to the id). |
이벤트2
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
PRO | { path: readonly string[]; expanded: boolean } | fires when a tree node expands or collapses. |
PRO | SyGridTreeReparentedDetail | 이름을 선택해 타입 계약을 확인하세요. |
메서드4
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
PRO path: readonly string[], expanded: boolean | Promise<void> | expand/collapse one tree node by its path. No-ops (with a warning) when tree data is inactive or the path names no collapsible node (leaves have nothing to collapse). |
PRO | Promise<void> | expand every tree node (one `treeNodeToggled` per change). |
PRO | Promise<void> | collapse every collapsible tree node. |
PRO request: SyGridReparentRequest | Promise<SyGridReparentResult> | reparent rows on the id-linkage tree: plan , apply (a NEW rowData; movers cloned with the parent field rewritten), emit `treeReparented`. Loads the `row-drag` chunk on first use; a non-id-linkage tree refuses without loading anything. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.