I've been encountering several issues with the custom datatable component that I created.
One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features stop working properly.
My suspicion is that this issue stems from loading the data after the datatable has already been initialized.
To resolve this, I'm trying to instantiate the Datatable component once the data has been fetched. Here's what I'm attempting:
export class DatatableComponent implements AfterViewInit, OnDestroy, OnInit {
dataTable: any;
@ViewChild('dt') private dataTableRef: any;
@Input() responseModelObservable: Observable<any>;
constructor(private modalService: NgbModal, private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.modelConfig = datatableConfig[this.modelTypeName];
this.initializeColumns();
}
ngAfterViewInit(): void {
// TODO: need to cleanup to cater for rerendering
// this.tableBody.changes.subscribe(t => {
// if (this.hasRenderedTable !== true && this.tableBody.length !== 0) {
// this.initializeDtOptions();
// this.dtTrigger.next();
// this.hasRenderedTable = true;
// }
// });
}
private initializeColumns() {
this.responseModelObservable.subscribe(x => {
...
//detect if data changed:
this.cdr.detectChanges();
//Initialize datatable:
this.dataTableRef.DataTable();
} else {
this.hasData = false;
}
});
}
}
The code above is resulting in the following error:
_this.dataTableRef.datatableConfig is not a function
How can I properly instantiate the Datatable component after the data has finished loading?