是否可以在制表器中冻结组标题？答案

【问题标题】：Is it possible to freeze group headers in tabulator?是否可以在制表器中冻结组标题？
【发布时间】：2021-03-07 07:30:05
【问题描述】：

我的问题是当我垂直滚动时，组标题会被滚动。我需要它们像“冻结行”选项一样保持冻结状态。我找不到获取组头的行对象的方法，我可以使用冻结选项。

请指引我正确的方向。

JS代码：

var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    movableRows:true,
    groupBy:"gender",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
    ],
});

HTML 代码

&lt;div id="example-table"&gt;&lt;/div&gt;

【问题讨论】：

请为问题添加您的代码。

标签： tabulator

【解决方案1】：

恐怕这不可能。

制表符组标题以与行相同的优先级加载到表中，因此它们都滚动在一起。

【讨论】：

【解决方案2】：

您可以尝试在组头类.tabulator-row.tabulator-group 上使用position: sticky css 和更高的z-index

.tabulator-row.tabulator-group {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.tabulator-row.tabulator-group:hover {
  background: #eaeaea; /* Default hover background has an opacity: rgba(0,0,0,.1) */
}

这里是一个例子：https://codepen.io/izmirli/pen/zYPVBxq

编辑

注意：还需要将renderVerticalBuffer 选项设置为高于制表器设置中预期行数的数字才能正常工作。但是，这可能会导致大型数据集出现性能问题。

【讨论】：

这种方法不适用于多于几行的表。因为 Tabulator 使用虚拟 DOM，所以只有实际存在的可见行（加上表视口之外的视图）。滚动时会创建和销毁所有其他行。因此，虽然这些组可能会粘在顶部，但当您滚动时，它们将被虚拟 DOM 销毁
感谢奥利的信息！我在我的一个应用程序中做了类似的事情，但我确实将renderVerticalBuffer 设置为一个对我来说很好的数字。如果有人想尝试一下，我会更新答案，但我知道它可能并不适合所有人。