多级表头

配置

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

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

横向虚拟列表

经过AI的辅助，多级表头终于支持横向虚拟列表啦！

配置 props.virtualX 即可。

loading

TIP

如果一个父节点表头有很多子节点，请尝试将表头拆分，利于虚拟滚动。

列固定

最常见的列固定

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

横向虚拟列表(props.virtualX)暂不支持此模式。

配置任意固定

loading

横向虚拟列表(props.virtualX)暂不支持此模式。

很有趣不是吗？这也归功于sticky的特性。