How To Change Behaviour Of Header Checkbox In Tabulator.js?

I want the logic after the top header checkbox is clicked to be different. Currently (I am using custom formatter) it selects all first level rows. I want the click to select/dese

Solution 1:

titleFormatter option is for header row checkbox and formatter option is for rows checkbox

var do_not_show_checkbox_ids = [1];

functioncustomFormatter(isHeader = false) {
    returnfunction(cell, formatterParams, onRendered) {
          var checkbox = null;

          // check if selectable is true in optionsif (this.table.modExists("selectRow", true)) {
            checkbox = document.createElement("input");
            checkbox.type = 'checkbox';
            // add click event in checkbox
            checkbox.addEventListener("click", (e) => {
              console.log('header', isHeader);
              e.stopPropagation();
            });

            // check if cell has getRow function if yes then it may be rowif (typeof cell.getRow == 'function') {

              // get cell rowvar row = cell.getRow();

              // get cell data for condition testingconst data = cell.getData();

              // if is row and not skippable idif (row._getSelf().type == "row" && do_not_show_checkbox_ids.indexOf(data['id']) == -1) {

                // add change event to toggle cell row
                checkbox.addEventListener("change", (e) => {
                  row.toggleSelect();
                });

                // update checkbox after row toggle
                checkbox.checked = row.isSelected && row.isSelected();

                // registering for if row clicked from anywhere then checkbox check/uncheckthis.table.modules.selectRow.registerRowSelectCheckbox(row, checkbox);
              } else {
                // if is row and skippable id
                checkbox = "";
              }
            } else {
               // header checkbox then add change addEventListener for selecting/deselecting all rows. 
              checkbox.addEventListener("change", (e) => {
                // get all rowsthis.table.getRows().forEach(row => {
                  // get row nodes/children
                  row.getTreeChildren().forEach(child => {
                    // check if child selected if yes then deselect else select
                    child.isSelected() ? child.deselect() : child.select();
                  })
                });

                // for selecting/deselecting all rows// if (this.table.modules.selectRow.selectedRows.length) {//  console.log('header', isHeader);//  this.table.deselectRow();// } else {//  this.table.selectRow(formatterParams.rowRange);// }
              });

              // updating internal header checkboxthis.table.modules.selectRow.registerHeaderSelectCheckbox(checkbox);
            }

            return checkbox;
          }
          returnnull;
  };
}

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
    },
    {
      titleFormatter: customFormatter(true),
      formatter: customFormatter(),
      hozAlign: "center",
      headerSort: false,
      cellClick: function(e, cell) {
        console.log('header', 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);
  },
  rowSelectionChanged: function(data, rows) {
    // console.log(data, rows);// console.log(this.getData());
  },
  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"));
    });
  },
  rowClick: function(e, row) {
    if (row.getTreeChildren().length > 0) {
      table.deselectRow(row.getData().id);
      row.treeToggle();
    }
  },
});

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 - rowSelection and dataTree

Note: For info about how tabulator row selection works internally check here