如何禁用Tabulator表格分组列头的拖拽功能

解决方案 #

Tabulator 5.x版本中frozen属性仅对普通数据列生效，无法控制分组列头的拖拽重排功能，可通过以下两种方式实现分组列头拖拽禁用：

方案1：全局关闭列拖拽功能（适配你的场景）

你的配置中所有列均已设置frozen，无需列拖拽能力，直接在初始化参数中添加columnMovable: false即可一次性禁用所有列（含分组列头）的拖拽，完全避免布局错乱：

var table = new Tabulator("#example-table", {
    data:tabledata,
    columnMovable: false, // 新增此行配置
    columns:[
    // 你原有的columns配置无需修改
    ],
    frozen:true
});

方案2：仅禁用分组列头拖拽，保留普通列拖拽能力

如果需要保留普通数据列的拖拽功能，只禁止分组列头拖拽，可通过表头加载完成回调手动移除分组列头的拖拽属性：

var table = new Tabulator("#example-table", {
    data:tabledata,
    headerLoaded: function(){
        // 遍历所有分组列头，移除拖拽能力
        document.querySelectorAll('.tabulator-col-group').forEach(groupEl => {
            groupEl.classList.remove('tabulator-col-movable');
            groupEl.setAttribute('draggable', 'false');
        });
    },
    columns:[
    // 你原有的columns配置无需修改
    ],
    frozen:true
});

另外你注释中提到的分组列加frozen:true会隐藏表头的问题属于Tabulator 5.0.0版本的已知bug，升级到5.4.0及以上版本即可修复。

内容的提问来源于stack exchange，提问作者Tony