CODEWITHSUNDEEP
tabulator
Ansar Bedharudeen
Ansar Bedharudeen

Reputation: 51

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>

Upvotes: 1

Views: 1026

Answers (2)

Timur
Timur

Reputation: 2287

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.

Upvotes: 1

Oli Folkerd
Oli Folkerd

Reputation: 8348

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.

Upvotes: 0

Related Questions