javascript - How to implement nested tables dynamically in tabulator

Question

I'm attempting to implemented nested tables in tabulator where the data could be nested to n-levels. The issue that I'm having is that the function assigned to rowFormatter is not able to see the createTable() method. How do I allow the callback function to see the createTable() function, or other functions in my class?

 private createTable(element: HTMLDivElement,jsonFileContents, schemaId: string): Tabulator {
    var table = new Tabulator(this.tab, {
      columns: this.buildHeaders(jsonFileContents, schemaId),
      data: this.buildRows(jsonFileContents, jsonFileContents.schema.find(s => s.parent == null).guid),
      rowFormatter:function(row) {
        var childrenSchemas = jsonFileContents.schemas.filter(s => s.parent == row["schemaId"]);
        if(childrenSchemas){
          childrenSchemas.forEach(schema => {
            var holderEl = document.createElement("div");
            var tableEl = document.createElement("div");
            holderEl.appendChild(tableEl);
            row.getElement().appendChild(holderEl);
            var subTable = this.createTable(tableEl, jsonFileContents, schema.guid); //<---HERE
          });
        }
      }      
    });
  }

question from:https://stackoverflow.com/questions/65930609/how-to-implement-nested-tables-dynamically-in-tabulator

Answer 1

The issue you are having is because in the context of the rowFormatter this is referring to the Tabulator table object.

So you could either use an arrow function when defining the row formatter callback, which would preserve the scope of the parent:

rowFormatter:(row) => {

}

or you could store the scope of this in a different variable, lets call it self and then use that in the callback:

private createTable(element: HTMLDivElement,jsonFileContents, schemaId: string): Tabulator {
    var self = this;

    var table = new Tabulator(this.tab, {
        rowFormatter:function(row) {
            self.createTable();
        }
    });
}