Add checkbox to Tabulator table cell

Question

I am trying to get the cell in column 2 row 1 to have a checkbox using jQuery. I got this table from Tabulator , so it is not a simple HTML table. I already tried several things. I know the cell is tableDataNested[0].checkbox , because when I do console.log(tableDataNested[0].checkbox) , it will say "Test" in the console. But I need to put a checkbox in there, so I tried the following:

$(tableDataNested[0].checkbox).html("<input type='checkbox'>");

But that still would not work. Here is a screenshot of the table.

Here is my code:

var tableDataNested = [
    {blank:'Cash/bank account', checkbox:"Test", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70", _children:[
        {blank:"1000-AdvanSix Inc.", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70", _children:[
            {blank:"Mellon Bank"},
            {blank:"First Chicago National Lockbox"},
            {blank:"Chase Manhattan Bank"},
            {blank:"Lockbox Mellon Bank"},
            {blank:"JP Morgan Chase Disbursement", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70"}
        ]},
    ]},
    {blank:"Add :Cash Inflow", date1:"129,008.54", date2:"535,400.00", date3:"2,574,013,670.32", date4:"", _children:[
        {blank:"Open AR - Estimated", date1:"129,008.54", date2:"535,400.00", date3:"2,574,013,670.32", date4:"", _children:[
            {blank:"1000-AdvanSix Inc.", date1:"79,273,859.58-", date2:"208,708,562.37-", date3:"214,901,976.97-", date4:"2,358,176,883.70"}
        ]},
        {blank:"Open Intercompany Receivable", },
        {blank:"Incoming Operating Cash",  _children:[
            {blank:"SETTLEMENT BUILDING", _children:[
                {blank:"1000-AdvanSix Inc.", _children: [
                    {blank:"Test"}
                ]},
            ]},
            {blank: "OTHER INCOMING PATIENTS"}
        ]},
        {blank: "- Incoming finance cash", _children:[]}
    ]},
];

console.log(tableDataNested[0].checkbox);

var table = new Tabulator("#example-table", {
    height:"100%",
    data:tableDataNested,
    dataTree:true,
    // dataTreeStartExpanded:true,
    columns:[
        {title:"", field:"blank",  width:'21%'}, //never hide this column
        {title:"Generate<br>Graph?", field: "checkbox", align:"center", width:'16%' },
        {title:"06/07/2019-07/07/2019", field:"date1", align:"center", width:'16%'},
        {title:"07/08/2019-08/08/2019", field:"date2", align:"center", width:'16%'}, //hide this column first
        {title:"08/09/2019-09/09/2019", field:"date3", align:"center", width:'16%'},
        {title:"09/10/2019-10/10/2019", field:"date4", align:"center", sorter:"date", width:'16%'},
    ],
});

$(tableDataNested[0].checkbox).html("<input type='checkbox'>");

Answer 1

I think you should let tabulator draw the checkbox. There is a API which you can use to do whaetver inside a table cell. Tanbbulator formatters . This has to be set when you initialize tabulator. a formatter config is nothing else then a own function which writes the code to display the cell inside.

Shameless use of the tabulator example code from the fine documentation... :

//Build Tabulator
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
rowFormatter:function(row){
    if(row.getData().col == "blue"){
        row.getElement().style.backgroundColor = "#A6A6DF";
    }
},
columns:[
{formatter:"rownum", align:"center", width:40},
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell) 
{alert("Printing row data for: " + cell.getRow().getData().name)}},

//look at the next line formatter:function(cell, formatterParams){YOUR CODE}

{title:"Name", field:"name", width:150, formatter:function(cell, 
  formatterParams){
  // here you are free to insert a checkbox input  tag and a label if needed
  var value = cell.getValue();


    if(value.indexOf("o") > 0){
       // return "<span style='color:red; font-weight:bold;'>" + value + 
       //"</span>";
       if (your_condition_is_checked){
         return "<input type='checkbox' name="your_name" checked>"
       } else {
              return "<input type='checkbox' name="your_name">" 
       }

    }else{
        return value;
    }


}},
{title:"Progress", field:"progress", formatter:"progress", formatterParams:{color: 
["#00dd00", "orange", "rgb(255,0,0)"]}, sorter:"number", width:100},
{title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, 
align:"center", width:120},
{title:"Driver", field:"car", align:"center", formatter:"tickCross", width:50},
{title:"Col", field:"col" ,formatter:"color", width:50},
{title:"Line Wraping", field:"lorem" ,formatter:"textarea"},
{formatter:"buttonCross", width:30, align:"center"}
],
});

Answer 2

You are trying to add the checkbox to the table in a hacky way. It's better to use the Tabulator API , which offers a clear way to create templates (they call them formatters) for your columns and rows. You can use the column formatter to conditionally format your cells based on the value and other attributes.

Please take a look at the following runnable example where I added a formatter function to your checkbox column that will render a checkbox with a lebel of the value in the column if it exists. You can modify the formatter to render any HTML you want.

 var tableDataNested = [{ blank: 'Cash/bank account', checkbox: 'Test', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70', _children: [{ blank: '1000-AdvanSix Inc.', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70', _children: [{ blank: 'Mellon Bank' }, { blank: 'First Chicago National Lockbox' }, { blank: 'Chase Manhattan Bank' }, { blank: 'Lockbox Mellon Bank' }, { blank: 'JP Morgan Chase Disbursement', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70' }] }] }, { blank: 'Add:Cash Inflow', date1: '129,008.54', date2: '535,400.00', date3: '2,574,013,670.32', date4: '', _children: [{ blank: 'Open AR - Estimated', date1: '129,008.54', date2: '535,400.00', date3: '2,574,013,670.32', date4: '', _children: [{ blank: '1000-AdvanSix Inc.', date1: '79,273,859.58-', date2: '208,708,562.37-', date3: '214,901,976.97-', date4: '2,358,176,883.70' }] }, { blank: 'Open Intercompany Receivable' }, { blank: 'Incoming Operating Cash', _children: [{ blank: 'SETTLEMENT BUILDING', _children: [{ blank: '1000-AdvanSix Inc.', _children: [{ blank: 'Test' }] }] }, { blank: 'OTHER INCOMING PATIENTS' }] }, { blank: '- Incoming finance cash', _children: [] }] }]; var table = new Tabulator('#example-table', { height: '100%', data: tableDataNested, dataTree: true, columns: [{ title: '', field: 'blank', width: '21%' }, { title: 'Generate<br>Graph?', field: 'checkbox', align: 'center', formatter: (cell) => { const value = cell.getValue(); if (value) { return ` <input type="checkbox" /> <label>${value}</label> `; } }, width: '16%' }, { title: '06/07/2019-07/07/2019', field: 'date1', align: 'center', width: '16%' }, { title: '07/08/2019-08/08/2019', field: 'date2', align: 'center', width: '16%' }, { title: '08/09/2019-09/09/2019', field: 'date3', align: 'center', width: '16%' }, { title: '09/10/2019-10/10/2019', field: 'date4', align: 'center', sorter: 'date', width: '16%' }, ], });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/> <div id="example-table"></div>