Multi-Level Headers

Configuration

StkTableColumn['children'] configures multi-level headers

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

Horizontal Virtual List(✨NEW)^1.0.0

With the help of AI, multi-level headers finally support horizontal virtual list!

Configure props.virtualX to enable it.

loading

TIP

If a parent header has many child nodes, try splitting the headers for better virtual scrolling performance.

Column Fixing

Most Common Column Fixing

TIP

The fixed column value in multi-header tables only affects the current header node. If you want to fix parent headers, you also need to configure 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

Only Configure Leaf Node Fixing

loading

Horizontal virtual list (props.virtualX) does not support this mode yet.

Configure Arbitrary Fixing

loading

Horizontal virtual list (props.virtualX) does not support this mode yet.

Isn't that interesting? This is also thanks to the sticky feature.