Is there a way to add a headerMenu to a group column?

Question

Column menus are a great feature of Tabulator and according to the documentation it should be possible to add it to any column. Unfortunately I'm not able to add one to the header of a column group. Am I doing it wrong or is this not (yet) supported? The code snippet below demonstrates the behaviour. All columns except Group1 get a menu.

If it is not supported I tend to use the solution from Tabulator - Add menu button to column header but there I cannot see a way to identify the column component to which the menu would belong when the formatter is executed which would be necessary as I would need to create menu items in dynamically created Tabulators and columns depending on the data of the column.

Any suggestions?

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
   <div id="example-table"/>
    <script>
        var headerMenu = [
            {
                label:"<i class='fas fa-eye-slash'></i> Hide Column",
                action:function(e, column){
                    column.hide();
                }
            },
            {
                label:"<i class='fas fa-arrows-alt'></i> Move Column",
                action:function(e, column){
                    column.move("col");
                }
            }
        ]

        //initialize table
        var table = new Tabulator("#example-table", {
            height:"311px",
            layout:"fitColumns",
            columns:[
                {title:"Group1", headerMenu:headerMenu, columns:[
                    {title:"Name", field:"name", headerMenu:headerMenu},
                    {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", headerMenu:headerMenu},]
                },
                {title:"Gender", field:"gender", headerMenu:headerMenu},
                {title:"Rating", field:"rating", hozAlign:"center", headerMenu:headerMenu},
                {title:"Favourite Color", field:"col", headerMenu:headerMenu}, //add menu to this column header
            ],
        });
    </script>

Answer 1

After thinking about my real problem I found that it would be enough to add a link with parameters to the group column head. I added this solution to my original example to ensure that this solution is somehow documented if someone runs in the same question. The link or the whole header can be customized very easily in the menuTitleFormatter.

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table" />
<script>
  var headerMenu = [{
      label: "<i class='fas fa-eye-slash'></i> Hide Column",
      action: function(e, column) {
        column.hide();
      }
    },
    {
      label: "<i class='fas fa-arrows-alt'></i> Move Column",
      action: function(e, column) {
        column.move("col");
      }
    }
  ]

  var menuTitleFormatter = function(cell, formatterParams, onRendered) {
    var span = document.createElement('span');
    span.innerHTML = `<a href="/page?param1=${formatterParams.param1}&param2=${formatterParams.param2}" target="_blank">this_is_a_link</a>`;
    var title = document.createElement("span");
    title.innerHTML = cell.getValue();
    title.appendChild(span); //add menu to title      
    return title;
  }

  var titleFormatterParams = {
    param1: 'value1',
    param2: 'value2'
  };

  //initialize table
  var table = new Tabulator("#example-table", {
    height: "311px",
    layout: "fitColumns",
    columns: [{
        title: "Group1",
        headerMenu: headerMenu,
        titleFormatter: menuTitleFormatter,
        titleFormatterParams: titleFormatterParams,
        columns: [{
            title: "Name",
            field: "name",
            headerMenu: headerMenu
          },
          {
            title: "Progress",
            field: "progress",
            hozAlign: "right",
            sorter: "number",
            headerMenu: headerMenu
          },
        ]
      },
      {
        title: "Gender",
        field: "gender",
        headerMenu: headerMenu
      },
      {
        title: "Rating",
        field: "rating",
        hozAlign: "center",
        headerMenu: headerMenu
      },
      {
        title: "Favourite Color",
        field: "col",
        headerMenu: headerMenu
      }, //add menu to this column header
    ],
  });
</script>