'Is it possible to freeze group headers in tabulator?

My issue is that group headers are scrolled away when I scroll vertically. I need them to stay frozen just like the 'freeze row' option. I couldn't find a way to get the row object of group header, with which I can use the freeze option.

Please guide me in the right direction.

JS Code:

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 Code 

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


Solution 1:[1]

This is not possible im afraid.

Tabulator group headers are loaded into the table with the same priority as rows so they all scroll togeather.

Solution 2:[2]

You can try using position: sticky css on group header class .tabulator-row.tabulator-group with a higher 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) */
}

Here is an example: https://codepen.io/izmirli/pen/zYPVBxq

Edit

Note: Also need to set renderVerticalBuffer option to a number higher than the expected row count in Tabulator settings for this to work properly. However, this may cause performance issues with large data sets.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oli Folkerd
Solution 2

Related Questions