Tabulator表格更新列定义后滚动回左上角问题咨询

我用Tabulator创建了一个表格，通过点击列内单元格修改CSS样式实现列“选中”功能。但遇到一个问题：将表格滚动至底部后点击单元格，表格会自动滚动回左上角。简化示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet"/>
   <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
   <style>
.column-selected {
  color:gray;
}
   </style>
</head>
<body>
<div id="example-table"></div> 

<script>
var tabledata = [
    {id:1, name:"1111 Bob", age:"12", col:"red", dob:"1"},
    {id:2, name:"2222 May", age:"1",  col:"blue", dob:"2/05/1982"},
    {id:3, name:"3333 Lobowski", age:"42", col:"green", dob:"3/05/1982"},
    {id:4, name:"4444 Bob", age:"12", col:"pink", dob:"4"},
    {id:5, name:"5555 May", age:"1", col:"black", dob:"5/05/1982"},
    {id:6, name:"6666 Lobowski", age:"42", col:"white", dob:"6/05/1982"},
    {id:7, name:"7777 Lobowski", age:"42", col:"orange", dob:"7/05/1982"},
    {id:8, name:"8888 Bob", age:"12", col:"gray", dob:"8"},
    {id:9, name:"9999 May", age:"1", col:"gold", dob:"9/05/1982"}, 
];


var table = new Tabulator("#example-table", {
     data:tabledata, 
      height: "150px",
     columns:[ //Define Table Columns
        {title:"Name", field:"name"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
    ],
    columnDefaults:{
        cellClick:function(e, cell){
          if(cell.getElement().classList.contains("column-selected")) {
            cell.getColumn().updateDefinition({cssClass: ""});
          } else {
            cell.getColumn().updateDefinition({cssClass: "column-selected"});
          }
        },
    },
});
</script>
</body>
</html>

问题原因 #

使用column.updateDefinition()方法修改列定义时，Tabulator会触发整个列的DOM结构重新渲染。这个过程会破坏表格原有的滚动容器布局，导致浏览器默认将滚动位置重置回初始的左上角状态。

解决方法 #

放弃修改列定义的方式，直接操作列的DOM元素添加/移除类名，避免触发列的重新渲染：

方案1：直接切换列内所有单元格的类名 #

修改cellClick事件逻辑：

cellClick:function(e, cell){
  const column = cell.getColumn();
  // 切换列内所有数据单元格的类名
  column.getCells().forEach(cellItem => {
    cellItem.getElement().classList.toggle("column-selected");
  });
  // 同时切换表头单元格的类名
  column.getHeaderElement().classList.toggle("column-selected");
}

方案2：操作列容器的类名（更高效） #

修改cellClick事件逻辑：

cellClick:function(e, cell){
  const column = cell.getColumn();
  // 切换列容器的类名
  column.getElement().classList.toggle("column-selected");
}

同时调整CSS选择器，确保样式能覆盖列内所有元素：

.column-selected .tabulator-cell,
.column-selected .tabulator-header-cell {
  color: gray;
}

以上两种方式都只是直接操作DOM元素的类名，不会触发Tabulator的列重新渲染，因此不会导致滚动位置被重置。

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