트리형 ^0.7.0

다음 두 단계로 트리형 기능을开启합니다

StkTableColumn['type']를 tree-node로 설정하여 트리형 전개 버튼의 위치를 지정합니다

const columns: StkTableColumn<any>[] = [
    { type: 'tree-node', title: 'Area', dataIndex: 'area' },
]

데이터 소스에 children 필드를 추가합니다. 클릭 후 데이터의 children 필드의 내용을 하위 노드로 표시합니다.

export const getDataSource = () => [ 
    {
        area: 'Asia',
        gdp: 10000,
        population: 50000000,
        gdpPerCapita: 20000,
        children: [
            { area: 'China', gdp: 5000, population: 1400000000, gdpPerCapita: 35000, }, 
            { area: 'Japan', gdp: 4000, population: 126000000, gdpPerCapita: 33000, }
        ],
    },
];

간단한 트리형

기본값 전개 노드

WARNING

props.treeConfig를 통해 설정된 전개는 테이블이 처음 렌더링될 때만 적용됩니다.

비동기 데이터의 경우 expose.setTreeExpand() 함수를 사용하여 제어하세요.

모두 전개

treeConfig.defaultExpandAll = true

지정 레벨 전개

treeConfig.defaultExpandLevel = 1

지정 노드 전개

treeConfig.defaultExpandedKeys = ['Asia', 'China', 'Zhejiang']

아래 Toggle China 버튼은 setTreeExpand()를 사용하여 China 행의 전개/축소를 제어합니다.

수동으로 노드 전개

setTreeExpand 메서드를 사용하여 노드의 전개/축소를 수동으로 제어합니다.

아래 예시에서는 다양한 매개변수 사용법을 보여줍니다:

Toggle All: 모든 루트 노드의 전개/축소 상태를 전환합니다 (dataSource 배열 전체를 전달, { all: true })
Collapse All: 모든 루트 노드를 축소합니다 (dataSource 배열 전체를 전달, { all: true, expand: false })
Toggle Asia: Asia 노드의 전개/축소 상태를 전환합니다
Expand All Asia: Asia의 모든 하위 노드를 전개합니다 ({ expand: true, all: true })
Collapse All Asia: Asia의 모든 하위 노드를 축소합니다 ({ expand: false, all: true })
Expand Asia to Level 2: Asia를 2번째 레벨까지 전개합니다 ({ expand: true, level: 2 })
Collapse Asia to Level 1: Asia를 1번째 레벨까지 축소합니다 ({ expand: false, level: 1 })
Expand Parents of Zhejiang: Zhejiang의 모든 부모 노드(Asia → China)를 자동으로 확장합니다. Zhejiang 자체는 자식 노드 Hangzhou를 가지므로 함께 확장됩니다 ({ parents: true })
Collapse Parents of Zhejiang: Zhejiang의 모든 부모 노드를 축소합니다 ({ parents: true, expand: false })

자식 노드 지연 로딩 ^1.2.7

노드의 자식을 온디맨드로 가져와야 하는 경우(조직 트리, 디렉터리 트리, 수만 노드) treeConfig.lazy를 활성화하면, “자식이 있다고 표시되었으나 아직 로딩되지 않은” 행을 펼칠 때 treeConfig.loadMethod(row, col)를 호출합니다. 로딩 상태는 컴포넌트가 전면 관리하며, 사용자는 데이터 조회 함수만 제공하면 됩니다.

const treeConfig = {
    lazy: true,
    // 자식 행 배열을 resolve하는 Promise를 반환
    loadMethod: (row, col) => fetchChildren(row.id),
    // 선택: “자식 있음” 판별 필드명, 기본값 'hasChildren'
    hasChildField: 'hasChildren',
    // 선택: 로딩 실패 콜백
    onLoadError: (error, row, col) => console.error(error),
};

규칙:

최상위층 데이터는 계속 props.dataSource가 제공하며, 하위층은 loadMethod가 드릴다운 시 로딩합니다.
펼침 가능 판정: 행의 children이 존재하거나 row.hasChildren이 참이면 펼침 화살표 표시, 둘 다 없으면 리프 노드.
로딩 중에는 화살표 자리에 로딩 아이콘이 표시되고 행 전체(<tr>)에 is-tree-loading 클래스가 붙습니다 (스타일 overriding 가능).
로딩 성공 노드는 캐시되어 접었다 다시 펼쳐도 재요청하지 않습니다. 갱신은 reloadTreeNode()를 호출하세요.
reject 시 해당 행은 접힌 상태로 유지되고 “로딩 완료”로 표시되지 않아 다음 펼침 시 재시도되며, onLoadError가 호출됩니다.
lazy 상태에서는 defaultExpandAll / defaultExpandLevel과 setTreeExpand(..., { all: true } / { level })가 미로딩 분기에서 펼침을 중지합니다 (암시적 연쇄 요청 없음); setTreeExpand(row, { parents: true })는 미로딩 조상을 필요에 따라 연쇄 로딩합니다 (이 분기는 Promise를 반환).

들여쓰기 가이드 라인 ^1.2.7

treeConfig.showGuide(기본 false)를 활성화하면 tree-node 열이 각 행의 들여쓰기 영역에 단계별로 세로 가이드 라인을 그려 자식 행이 어떤 단계에 속하는지 직관적으로 파악할 수 있습니다. 조상 슬롯(0..level-1)만 그리며, 행 자신의 컨트롤 칸에는 선을 긋지 않습니다. 비활성화 시 기존 들여쓰기만 유지되며 가이드 라인은 그려지지 않습니다.

const treeConfig = {
    // 단계별 세로 가이드 라인 표시
    showGuide: true,
};

참고

가이드 라인은 “단계당 하나의 세로 선” 스타일이며, 정밀한 last-child 차단 / T자형 트리 커넥터가 아닙니다.
CSS 변수로 외형을 조정할 수 있습니다: --tree-guide-color(색상), --tree-guide-width(선 두께, 기본 1px), --tree-guide-mask(가림 마스크, 기본 none는 실선. 세로 repeating 그라디언트로 교차시켜 점선 예: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px)). 다크 테마는 각각의 기본값을 합니다.
더 넓은 화살표/아이콘으로 바꾸면 --tree-indent-width(기본 16px)를 재정의해 들여쓰기 칸·컨트롤 자리·가이드선 간격이 함께 커지도록 하세요. tree-node 열에 customCell로 셀 전체를 직접 그리는 방법(폴더 열기/닫기 아이콘 예시 포함)은 파일 관리 트리을 참조하세요.

customCell로 트리 셀 커스터마이즈(펼침 아이콘 교체) ^1.2.7

tree-node 열에도 customCell을 지정할 수 있습니다. 셀 전체를 직접 렌더링하고, 내장 "레벨 들여쓰기 + 가이드선"과 "화살표 / 지연 로딩"은 각각 stkTreeIndent, stkFoldIcon 슬롯으로 받아 배치 여부와 위치를 직접 결정합니다(두 슬롯은 사용자 셀 컴포넌트의 슬롯이며 StkTable 최상위 슬롯이 아닙니다).

실행 가능한 예시(폴더 열림 / 닫힘 아이콘을 직접 그리는 경우와 내장 화살표를 두고 레이블만 커스텀하는 경우)와 배치 계약, 코드 골격은 파일 관리 트리에 있습니다.

가상 리스트

주의

컴포넌트는 dataSource의 모든 행에 __T_EXP__ 필드를注入하여 전개 여부를 제어합니다. 행 데이터를 업데이트할 때 이 필드를 수정하지 마세요. 따라서 샘플에서 Object.assign을 사용하여 데이터를 업데이트합니다.

성능 알림

가상 리스트를 사용하더라도 props.dataSource의 모든 변경은 컴포넌트 내부에서 dataSource를遍歴하여 데이터를展平합니다. 따라서 자주 변경되는 데이터는 더 많은 컴퓨터 계산 자원을 사용합니다. 성능에 일정 요구가 있으면 예시-대량 데이터를 참고하여 트리형 전개 로직을 직접实现하세요.

정렬

기본적으로 테이블 헤더를 클릭하여 정렬하면 현재 레벨의 데이터가 정렬됩니다. 하위 노드도 정렬해야 하면 sortConfig.sortChildren = true를 설정하세요. v0.8.8

세부 사항은 정렬을 참고하세요.

트리형 ^0.7.0 ​

간단한 트리형 ​

기본값 전개 노드 ​

모두 전개 ​

지정 레벨 전개 ​

지정 노드 전개 ​

수동으로 노드 전개 ​

자식 노드 지연 로딩 ^1.2.7 ​

들여쓰기 가이드 라인 ^1.2.7 ​

customCell로 트리 셀 커스터마이즈(펼침 아이콘 교체) ^1.2.7 ​

가상 리스트 ​

정렬 ​