Add checkbox to Tabulator table cell

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'>");

<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-table"></div>

Solution

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>