멀티 레벨 헤더

설정

StkTableColumn['children']으로 멀티 레벨 헤더 설정

WARNING

멀티 레벨 헤더는 현재 가로 방향 가상 리스트(props.virtualX)를 지원하지 않습니다.

const columns: StkTableColumn<any>[] = [
    {
        dataIndex: 'Basic',
        title: 'Basic',
        children: [ 
            { dataIndex: 'id',title: 'ID', width: 100,},
            {
                dataIndex: 'lv2',
                title: 'Lv 2',
                width: 100,
                children: [ 
                    { dataIndex: 'lv2_1', title: 'Lv 2.1', width: 100,}, 
                    { dataIndex: 'lv2_2', title: 'Lv 2.2', width: 100,},
                ],
            },
        ],
    },
]

loading

열 고정

가장 일반적인 열 고정

TIP

멀티 레벨 헤더 고정 열 값은 현재 테이블 헤더 노드에만 영향을 줍니다. 부모 테이블 헤더를 고정하려면 fixed도 설정해야 합니다.

const columns: StkTableColumn<any>[] = [
    {
        dataIndex: 'Basic',
        title: 'Basic',
        fixed: 'left', 
        children: [
            { 
                dataIndex: 'id',
                title: 'ID',
                width: 100,
                fixed: 'left'
             },
            {
                dataIndex: 'lv2',
                title: 'Lv 2',
                width: 100,
                fixed: 'left', 
                children: [
                    { 
                        dataIndex: 'lv2_1',
                        title: 'Lv 2.1', 
                        width: 100, 
                        fixed: 'left'
                    }, 
                    { 
                        dataIndex: 'lv2_2',
                        title: 'Lv 2.2', 
                        width: 100, 
                        fixed: 'left'
                    }, 
                ],
            },
        ],
    },
]

loading

리프 노드만 고정 설정

loading

임의 고정 설정

loading

매우 흥미롭지 않나요? 이것도 sticky의 특성에 기인합니다.