How can I remove, hide one checkbox when using formatter:“rowSelection” in Tabulator.js?

Question

I am using

  {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
           table.recalc();
  }},

but I do not want the marked checkbox (see the picture) to be displayed. You can use jsFiddle to try out.

Is that possible using Tabulator functionality? If not then I am thinking that I can remove it from DOM in renderComplete function.

UPDATE1 actually I do not want all checkboxes that are on the "parent" level.

Answer 1

You can create custom formatter for it

Here i have created custom DOM element and only returned from formatter function if some conditions are met otherwise returned null which cause it to render empty cell.

Tabulator use selectRow module for selection

In custom formatter i checked if user has enabled selectable option if yes then it will enable selectRow module, then tested if its row or table if its a row then checkbox will select/deselect row which i registerd in tabulator to let it know that use this checkbox component, if it is not a row then it would be table for that i registered checkbox to header selection which selects/deselects entire table.

var do_not_show_checkbox_ids = [1];

var tableDataNested = [{
    id: 1,
    name: "BalanceOil",
    _children: [{
        id: 11,
        name: "BalanceOil+",
        cena: 31,
        mn: 1,
        cena_1: 159
      },
      {
        id: 12,
        name: "BalanceOil Aqua",
        cena: 41,
        mn: 1,
        cena_1: 159
      },
    ]
  },
  {
    id: 2,
    name: "Xtend",
    cena: 23,
    mn: 1
  },
  {
    id: 2,
    name: "Xtend",
    cena: 23,
    mn: 1
  },
  {
    id: 2,
    name: "Xtend",
    cena: 23,
    mn: 1
  },
  {
    id: 3,
    name: "Zinobiotic",
    cena: 24,
    mn: 1
  }
];

var table = new Tabulator("#example-table", {
  movableColumns: true,
  data: tableDataNested,
  dataTree: true,
  selectable: true,
  columns: [{
      title: "Name",
      field: "name",
      headerSort: false,
      width: 200
    },
    {
      title: "Cena",
      field: "cena",
      headerSort: false
    },
    {
      formatter: function(cell, formatterParams, onRendered) {
        const data = cell.getRow().getData();
        if (do_not_show_checkbox_ids.indexOf(data['id']) == -1) {
          var checkbox = document.createElement("input");

          checkbox.type = 'checkbox';

          if (this.table.modExists("selectRow", true)) {

            checkbox.addEventListener("click", (e) => {
              e.stopPropagation();
            });

            if (typeof cell.getRow == 'function') {
              var row = cell.getRow();
              if (row._getSelf().type == "row") {

                checkbox.addEventListener("change", (e) => {
                  row.toggleSelect();
                });

                checkbox.checked = row.isSelected && row.isSelected();
                this.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
              } else {
                checkbox = "";
              }
            } else {
              checkbox.addEventListener("change", (e) => {
                if (this.table.modules.selectRow.selectedRows.length) {
                  this.table.deselectRow();
                } else {
                  this.table.selectRow(formatterParams.rowRange);
                }
              });
              this.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
            }
          }
          return checkbox;
        }
        return null;
      },
      titleFormatter: "rowSelection",
      hozAlign: "center",
      headerSort: false,
      cellClick: function(e, cell) {
        this.recalc();
      }
    },
    {
      title: "mn",
      field: "mn",
      editor: "number",
      headerSort: false,
      cellEdited: function(cell) {
        updateSum(cell);
      }
    },
    {
      title: "Sum",
      field: "sum",
      headerSort: false
    }
  ],
  rowClick: function(e, row) {
    // console.log(table.getRows().length);
  },
  renderComplete: function(t) {
    this.getRows().forEach(function(value, index) {
      console.log(value.isSelected());
      var children = value.getTreeChildren();
      for (let j = 0; j < children.length; j++) {
        const name = children[j].getData().name;
      }
      children.forEach(function(value, index) {
        // console.log("cena");
        var cena = value.getData().cena; //price

        // console.log(cena);
        var mnozstvi = value.getData().mn; //amount
        value.update({
          sum: cena * mnozstvi
        });
      });
      updateSum(value.getCell("mn"));
    });
  },
  selectableCheck: function(row) {
    //row - row component
    return row.getData().cena > 0; //allow selection of rows where the age is greater than 18
  },
});

function updateSum(cell) {
  var cena = cell.getData().cena; //price
  var mnozstvi = cell.getValue(); //amount
  if (mnozstvi) {
    cell.getRow().update({
      sum: cena * mnozstvi
    });
  }
}

Here working example

tabulator documentation links - custom formatter

Note: For info about how tabulator formatters works internally check here