tabulator: add a button in a column header

I tried to walk along this post: post by @oli folkerd.
What I want to achieve is adding this "primary" button like shown in the screenshot:

let someBTN = `<button type="button" class="btn btn-sm btn-primary"></button>`

var table = new Tabulator("#producteditor", {
    layout: "fitColumns",
    pagination: "local",
    ajaxURL: "api/products",
    columns: [{ title: "number", 
                field: "number", 
                headerFilter: "input"},
                ...
              { title: "", 
                formatter: editBTN, 
                cellClick: editCB, 
                headerSort: false},
              { title: "", 
                formatter: delBTN, 
                cellClick: delCB, 
                headerSort: false, 
                headerMenu = [ { label: someBTN, 
                                 action: "" } ] } ]
});

Could I also do this (pencil and trash are two different columns because they have different callbacks)?

Solution

You want a custom editor that you can put in your headerFilter

headerFilter:function(cell, onR, success, cancel, eP) {
    let el = document.createElement('button');
    el.innerHTML = 'Primary';
    return el;
}