콘텐츠로 이동
Data TableAPI Reference

Tree 이동 옵션·목적지

comins-table@0.2.2React

treeRowDrag는 같은 Tree 안에서 형제 순서나 부모를 변경합니다. {}로 활성화하고 onChangeData를 연결합니다. 생략 시 드래그는 꺼지며 정렬 중에는 수동 이동을 허용하지 않습니다.

전체 subtree를 옮기며 접힌 자식과 expand 값을 보존합니다. inside로 접힌 부모에 넣어도 자동으로 펼치지 않습니다. rowProps.disabled/draggable로 source를 제한합니다. canDrop은 허용 범위를 좁힐 수 있지만 자기 자손으로 이동하는 순환이나 잘못된 목적지를 허용할 수는 없습니다.

Pointer 또는 Space로 시작하고 방향키로 목적지를 정한 뒤 Enter로 확정, Escape로 취소합니다. 부모 변경 허용 시 좌우 키도 사용합니다. 시작 전 onBeforeRowDrag의 false는 after 알림 없이 거절합니다. 시작된 이동은 종료 시 onAfterDragRow로 결과를 알립니다. 이벤트 payload와 Tree 구성 코드를 함께 참고하십시오.

allowReparent?: boolean;

기본 false. false는 같은 부모 아래 형제 이동만 허용하고 true는 부모/루트 사이 이동도 허용합니다.

canDrop?: (context: CominsTreeDropContext<TItem>) => boolean;

미지정 시 구조적으로 유효한 이동을 허용합니다. false로 추가 제한합니다. preview와 확정 때 호출될 수 있으므로 부수효과 없이 동기적으로 판단하십시오.

parentId: CominsRowId | null;

필수. 목적지 부모의 ID, null이면 루트 배열입니다.

beforeRowId: CominsRowId | null;

필수. 목적지 형제 중 이 ID 앞에 삽입합니다. null이면 형제 배열 끝입니다.

source: CominsVisibleTreeRow<TItem>;

이동할 원본 노드의 표시 정보입니다.

target: CominsVisibleTreeRow<TItem>;

포인터/키보드로 지목한 대상 노드 정보입니다.

destination: CominsTreeMoveDestination;

parentId와 beforeRowId로 해석된 이동 위치입니다.

position: CominsTreeDropPosition;

대상 기준 before/after/inside입니다.

depth: number;

루트 0부터 시작하는 깊이입니다.

expanded: boolean;

현재 펼침 상태입니다.

hasChildren: boolean;

자식 노드 존재 여부입니다.

item: TItem;

원본 업무 데이터입니다. 읽기 용도로 사용합니다.

path: readonly number[];

트리 배열에서 노드까지의 인덱스 경로입니다. 이동 후 달라질 수 있습니다.

rowId: CominsRowId;

모든 깊이에서 고유한 안정적 ID입니다.

export declare function moveCominsTreeNode<TItem>(nodes: readonly CominsTreeNode<TItem>[], rowId: CominsRowId, destination: CominsTreeMoveDestination, getRowId: (item: TItem, index: number) => CominsRowId, options?: {
allowReparent?: boolean;
}): readonly CominsTreeNode<TItem>[];

comins-table에서 import합니다. nodes·rowId·destination·getRowId는 필수, options.allowReparent 기본 false입니다. 새 배열을 반환하며 변화 없음/잘못된 이동은 원본 참조를 반환합니다. 중복 ID는 예외를 던집니다. UI 이벤트/상태 갱신은 하지 않으므로 반환값을 부모 상태에 반영하십시오.