I have been working on implementing a rowClick() function for a Tabulator table. This function is supposed to pass the row's data to a service.
import { Component, AfterViewInit } from '@angular/core';
import { FuzeUser } from 'src/app/models/fuze-user';
import { UserEditService } from 'src/app/services/user-edit.service';
import { UserService } from 'src/app/services/user.service';
import Tabulator from 'tabulator-tables';
@Component({
selector: 'app-user-table',
templateUrl: './user-table.component.html',
styleUrls: ['./user-table.component.scss']
})
export class UserTableComponent implements AfterViewInit {
tab = document.createElement('div');
public tableName: string = 'fuze-user-table';
private columns: any[] = [];
private rows: any[] = [];
table: Tabulator;
public drawn: boolean = false;
constructor(private userService: UserService, private userEditService: UserEditService) {
}
private drawTable(): void {
this.table = new Tabulator(this.tab, {
layout: "fitDataStretch",
movableColumns: true,
maxHeight:"485px",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [25, 50, 100],
selectable: true,
selectableRangeMode: "click",
data: this.rows,
columns: this.columns,
rowClick:function(e, id, data, row){
this.userEditService.setUser(data);
}
});
document.getElementById(`${this.tableName}`).appendChild(this.tab);
}
}
The problem I encountered is that the service cannot be accessed within the rowClick() function due to the scope of "this" being limited to the Tabulator object.
I tried creating a separate function in my component class that calls this.userEditService.setUser and passing it as a method to Tabulator. However, this approach also failed because the method passed could not access the service scope.
import { Component, AfterViewInit } from '@angular/core';
import { FuzeUser } from 'src/app/models/fuze-user';
import { UserEditService } from 'src/app/services/user-edit.service';
import { UserService } from 'src/app/services/user.service';
import Tabulator from 'tabulator-tables';
@Component({
selector: 'app-user-table',
templateUrl: './user-table.component.html',
styleUrls: ['./user-table.component.scss']
})
export class UserTableComponent implements AfterViewInit {
tab = document.createElement('div');
public tableName: string = 'fuze-user-table';
private columns: any[] = [];
private rows: any[] = [];
table: Tabulator;
public drawn: boolean = false;
constructor(private userService: UserService, private userEditService: UserEditService) {
}
private setUser(data: FuzeUser){
this.userEditService.setUser(data)
}
private drawTable(callback: (user: any) => void): void {
this.table = new Tabulator(this.tab, {
layout: "fitDataStretch",
movableColumns: true,
maxHeight:"485px",
pagination: "local",
paginationSize: 25,
paginationSizeSelector: [25, 50, 100],
selectable: true,
selectableRangeMode: "click",
data: this.rows,
columns: this.columns,
rowClick:function(e, id, data, row){
callback(data);
}
});
document.getElementById(`${this.tableName}`).appendChild(this.tab);
}
}
I am seeking guidance on how to access my service from within the Tabulator object efficiently.