Tabulator 5.4：如何为每个分组表头行设置独立颜色？

我们从JSON加载表格数据，数据中包含color字段。目前已实现为分组表头的子内容设置颜色，代码如下：

groupHeader: function(value, count, data) {
    return '<span class="group-content" style="color:'+data[0].color+'">'+value +'<span class="count">'+count+'</span></span>';
},

同时，普通行（非分组表头）的背景色设置也已实现：

rowFormatter:function(row){
    var data = row.getData();
    row.getElement().style.backgroundColor = data.color;
},

现在需要解决的问题是：如何将样式应用到分组表头的行元素本身，实现每个分组表头行基于JSON返回的color字段设置独立的背景色？

解决方案 #

Tabulator提供了专门用于格式化分组行的groupRowFormatter配置项，和普通行的rowFormatter逻辑类似，专门针对分组表头行进行样式设置：

groupRowFormatter:function(row){
    // 获取当前分组的全部数据，取第一条的color字段（同分组数据color值应一致）
    var groupData = row.getData();
    // 为分组行DOM元素设置背景色
    row.getElement().style.backgroundColor = groupData[0].color;
}

说明 #

• groupRowFormatter的参数是分组行对象，通过row.getData()能获取到当前分组下的所有数据数组，由于同一分组的color字段是统一的，直接取数组第一个元素的color值即可。
• 调用row.getElement()拿到分组行的DOM元素后，直接设置backgroundColor样式，就能给整个分组表头行应用背景色。

将这个配置项和已有的groupHeader、rowFormatter一起加入Tabulator的初始化配置中，就能实现需求。

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