如何禁用拖动 Tabulator 的组 headers？

Question

使用 Tabulator，我可以禁用拖动带有“冻结”字段的常规列 header。但是，如果 header 列被分组，我似乎无法做到这一点。更糟糕的是，一旦拖动组列，它就会破坏 header 布局，如下所示。

有没有办法禁用分组列 header 的药物功能？

<html>
<head>
<link href="https://unpkg.com/tabulator-tables@5.0.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.0.0/dist/js/tabulator.min.js"></script>
</head>

<body>
<div id="example-table"></div>
</body>

<script>
    var tabledata = [
    {id:1, name:"Oli Bob", progress:12, location:"United Kingdom", gender:"male", rating:1, col:"red", dob:"14/04/1984", car:1, lucky_no:5, lorem:"Lorem ipsum dolor sit amet, elit consectetur adipisicing "},
    {id:2, name:"Mary May", progress:1, location:"Germany", gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, lorem:"Lorem ipsum dolor sit amet, elit consectetur adipisicing "},
    {id:3, name:"Christine Lobowski", progress:42, location:"France", gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, lorem:"Lorem ipsum dolor sit amet, elit consectetur adipisicing "},
    {id:4, name:"Brendon Philips", progress:100, location:"USA", gender:"male", rating:1, col:"orange", dob:"01/08/1980", car:false, lucky_no:18, lorem:"Lorem ipsum dolor sit amet, elit consectetur adipisicing "},
    ];

var table = new Tabulator("#example-table", {
    data:tabledata,
    columns:[
    {title:"Name", field:"name", width:160, frozen:true},
    {//create column group
        title:"Work Info",
//      frozen:true,        // uncommenting this line would hide entire headers.
        columns:[
        {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", width:100, frozen:true},
        {title:"Rating", field:"rating", hozAlign:"center", width:80, frozen:true},
        {title:"Driver", field:"car", hozAlign:"center", width:80, frozen:true},
        ],
    },
    {//create column group
        title:"Personal Info",
        frozen:true,
        columns:[
        {title:"Gender", field:"gender", width:90, frozen:true},
        {title:"Favourite Color", field:"col", width:140, frozen:true},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:130, frozen:true},
        ],
    },
    ],
    frozen:true
});
</script>
</html>

Answer 1

可能是 Tabulator 中的错误。 https://github.com/olifolkerd/tabulator/issues/3449

回滚到版本 4.9.3（从 5.0.0）解决了问题。

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>

如何禁用拖动 Tabulator 的组 headers？

How can I disable dragging Tabulator's group headers?

javascript

tabulator