マルチレベルヘッダー

設定

StkTableColumn['children'] でマルチレベルヘッダーを設定します

WARNING

マルチヘッダーテーブルはまだ 横方向仮想リスト（props.virtualX）をサポートしていません。

const columns: StkTableColumn<any>[] = [
    {
        dataIndex: '基本',
        title: '基本',
        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: '基本',
        title: '基本',
        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機能のおかげです。