How Can I Remove, Hide One Checkbox When Using Formatter:"rowselection" In Tabulator.js?

I am using {formatter:'rowSelection', titleFormatter:'rowSelection', hozAlign:'center', headerSort:false, cellClick:function(e, cell){ table.recalc(); }}, but I do

Solution 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 = newTabulator("#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;
        }
        returnnull;
      },
      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 componentreturn row.getData().cena > 0; //allow selection of rows where the age is greater than 18
  },
});

functionupdateSum(cell) {
  var cena = cell.getData().cena; //pricevar mnozstvi = cell.getValue(); //amountif (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