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:

enter image description here

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)?

enter image description here


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;
Leave a Reply

Your email address will not be published. Required fields are marked *