Master + tabulator child

A tabulator element with skills is added to the address master data form. The data structure consist out of 3 tables:

exaddresses: the address table
exaddressesskills: the assignment between addresses and skills
exskills: the table with skills

The datadefinition with childs

excerpt of exaddresses.json:

the data has an array skills[]:

addressID
skillID

This array is declared as child in the childs array:

objectclass: data_accessclas, the default class for myslq
table: the table of your child element
key: the primary key of the table
fieldname: "skills", the name of your child array
rightcheck: 0, the rights of the master element are valid
childmode (tabulator): 1=manual, 2=appends tabulator in cbCreateStructure
masterkey: addressID, the column of you child table, which is joined to the master
readonly: false (default), the elements can be changed in the front end and will written back by save
masterdata: {} properties like the sql statement or columns array can be defined

Load skills

exaddresses_head_include.php:

The variable data_skills is initialized with an array of skills.

HTML elements skills in form

datadefinition with k8form:

The HTML element #skills is placed in the form as placeholder for the tabulator table.

JavaScript Events to handle skills

exerpt of exaddresses_head_end.js

(function() {
  let tableTab;
  let btablebuilt=false;

// cbAfterLoad
  if(!settingsexaddresses.masterdata.cbAfterLoad)settingsexaddresses.masterdata.cbAfterLoad=[];
  settingsexaddresses.masterdata.cbAfterLoad.push(function(options){
    let data=options.dat['skills'];
    if(data.length==0){
      data.push({skillID:""});
    }
    //console.log(data);
    tableTab.setData(data);
  });
  
  // cbAfterNew
  if(!settingsexaddresses.masterdata.cbAfterNew)settingsexaddresses.masterdata.cbAfterNew=[];
  settingsexaddresses.masterdata.cbAfterNew.push(function(options){
    if (btablebuilt) {
      let data=[{skillID:""}];
      tableTab.setData(data);
    }
  });

if(!settingsexaddresses.masterdata.cbBeforeSave)settingsexaddresses.masterdata.cbBeforeSave=[];
  settingsexaddresses.masterdata.cbBeforeSave.push(function(options){
    let data=tableTab.getData();
    data = data
      .filter(obj => Number(obj.skillID) > 0)
      .map(obj => ({
        ...obj,
        addressID: options.dat['addressID']
    }));
    options.dat['skills']=data;
  });
  
  if(!settingsexaddresses.masterdata.cbCreateStructure)settingsexaddresses.masterdata.cbCreateStructure=[];
  settingsexaddresses.masterdata.cbCreateStructure.push(function(options){
    if(options.el_form){
      let el_form=options.el_form;
      let obj_skills= data_skills.reduce((acc, item) => {
        acc[item.skillID] = item.title;
        return acc;
      }, {});
      let arr_skills = data_skills.map(item => ({
        value: item.skillID,
        label: item.title
      }));

// tabulator
      tableTab = new Tabulator("#skills", {
        layout:"fitColumns",      //fit columns to width of table
        height: "459",
        tabEndNewRow:true,
        columns:[
          {"field":"skillID","title":"Skills","editor":"input",
            "formatter": "lookup",
            "formatterParams": obj_skills,
            "editor": "list",
            "editorParams": {
              "values": arr_skills
            },
            cellEdited:function(cell){
              k8.formDirtymanual({el_form:options.el_form});
            }
          },
          {
            field:"icon_delete","clipboard":false,"download":false,"responsive":0,"width":25, "hozAlign":"center","headerSort":false,
            "formatter":function(cell, formatterParams, onRendered){
              var row=cell.getRow()
              var html='<button type="button" class="js_rec_create btn btn-outline-secondary k8-btn-small" aria-label="Left Align"><i class="bi-x-lg"></i></button>';
              return html;
            },
            cellClick:function(e, cell){
              k8.formDirtymanual({el_form:options.el_form});
              cell.getRow().delete();
            }
          }
        ]
      });
      tableTab.on("tableBuilt", function(){
        btablebuilt=true;
        let data=[{skillID:""}];
        tableTab.setData(data);
      });
    }
  });
})();

This are the events:

cbCreateStructure
- create the tabulator table: tableTab
cbAfterNew
- adopt rights
- tableTab.setData(empty record)
cbAfterLoad
- adopt rights
- tableTab.setData(dat.skills)
cbBeforeSave
- dat.skills=tableTab.getData()