Tabulator - Add menu button to column header

Question

I am fairly new to JavaScript and am currently learning how to work with Tabulator (which is working quite nicely aside from this problem).

I want to add a menu button to every column header, which then opens a dropdown menu. From this menu the user should have the ability to select "Group By" and then have the table group data using the selected column.

The button in question would be:

<div class="ui icon top left pointing dropdown button" id=dropdown>
    <i class="bars icon"></i>
    <div class="menu">
        <div class="header">Options</div>
        <div class="item">Test</div>
    </div>
</div>

And would look like this:

And this is my current columnData:

var table = new Tabulator("#example-table",{ 
        data:tabledata,
        layout:"fitColumns",
        locale:true,
        movableColumns:true,
        resizableColumns:false,
        columns:[
        {title:"Name", field:"name", headerFilter:"input"},
        {title:"Age", field:"age", align:"right", sorter:"number", headerFilter:"number", /* bottomCalc:"sum" */},
        {title:"Favorite Color", field:"col", headerFilter:"input"},
        {title:"Date of Birth", field:"dob", sorter:"date", align:"center", headerFilter:"input", headerContext:function(e, column){
                table.setGroupBy(column.getField());
                e.preventDefault();
            },
        },
        {title:"Nationality", field:"nationality", headerFilter:"input", headerContext:function(e, column){
                table.setGroupBy(column.getField());
                e.preventDefault();
            },
        },
        ],
        langs:{
            "de-de":{
                "headerFilters":{
                    "default":"Spalte filtern...",
                }
            }
        },
});

Answer 1

Update

As of Tabulator 4.7, there is now built in functionality for adding header menus to columns using the new headerMenu option:

//define row context menu
var headerMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerMenu:headerMenu}, //add menu to this column header
    ]
});

For full details on the available functionality, checkout the Menu Documentation

Original Answer

You should use a titleFormatter to do this, Trying to manipulate elements inside tabulator from outside the table is very dangerous, because Tabulator uses a virtual DOM elements can be replaced without notice, causing any bindings to plugins to be lost with them.

It is also bad practice to have multiple elements on the same page with the same ID, which is the case with the above solution. element id's should be unique on a page

In this case your title formatter would look something like this:

var menuTitleFormatter = function(cell, formatterParams, onRendered){

    //build dropdown
    var dropdown =  document.createElement("div");

    dropdown.classList.add("dropdown");
    dropdown.classList.add("ui");

    dropdown.innerHTML = "<i class='bars icon'></i><div class='menu'><div class='header'>Options</div><div class='item' class='sort1'>Sort</div><div class='item' class='group1'>Group</div></div>";

    //create dropdown
    $(dropdown).dropdown();

    $('.group1', $(dropdown)).click(function(){
        //do something when the item is clicked
    });


    //set header title
    var title = document.createElement("span");
    title.innerHTML = cell.getValue();

    //add menu to title
    title.appendChild(dropdown);


    return title;
}

You could the apply it to a column in its definition

{title:"Name", field:"name", titleFormatter:menuTitleFormatter },