Skip to content

多级表头

配置

StkTableColumn['children'] 配置多级表头

WARNING

多级表头暂不支持横向虚拟列表(props.virtualX)。

ts
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。

ts
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的特性。

根据 MIT 许可证发布