Angular: TabulatorPlus

import { Component, ElementRef, Input, OnChanges, OnDestroy, AfterViewInit, ViewChild, SimpleChanges } from '@angular/core';
import TabulatorPlus from './TabulatorPlus';

@Component({
  selector: 'app-user-table',
  template: `
    <div class="table-controls">
      <button (click)="refreshTable()">Redraw Table</button>
      <button (click)="clearFilters()">Clear Filters</button>
    </div>
    <div #tableElement></div>
  `,
  styles: [`
    .table-controls { margin-bottom: 10px; }
    :host ::ng-deep .tabulator { border: 1px solid #ccc; } /* จัดการ CSS Scoping */
  `]
})
export class UserTableComponent implements AfterViewInit, OnChanges, OnDestroy {
  
  // 1. อ้างอิงถึง HTML Element ใน Template
  @ViewChild('tableElement', { static: true }) tableElement!: ElementRef;

  // 2. รับข้อมูลจาก Parent Component
  @Input() data: any[] = [];

  // 3. เก็บ Instance ไว้เพื่อใช้งานซ้ำ (Reused Instance)
  private tabulatorInstance: any;

  constructor() {}

  // 4. Initialize: สร้างตารางเมื่อ View พร้อมใช้งาน
  ngAfterViewInit(): void {
    this.tabulatorInstance = new TabulatorPlus(this.tableElement.nativeElement, {
      data: this.data,
      columns: [
        { title: "Name", field: "name", width: 150 },
        { title: "Role", field: "role" },
        { title: "Last Login", field: "lastLogin" },
      ],
    }, "angular-storage-key");
  }

  // 5. Refresh: อัปเดตข้อมูลเมื่อ Props (Input) เปลี่ยนแปลง
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['data'] && this.tabulatorInstance) {
      console.log("Refreshing data...");
      // ใช้ .setData() เพื่ออัปเดตข้อมูลโดยไม่ต้องสร้างตารางใหม่
      this.tabulatorInstance.setData(this.data);
    }
  }

  // 6. Manual Actions: การเรียกใช้ Instance จากฟังก์ชันอื่น
  refreshTable(): void {
    if (this.tabulatorInstance) {
      this.tabulatorInstance.redraw(true);
    }
  }

  clearFilters(): void {
    if (this.tabulatorInstance) {
      this.tabulatorInstance.clearFilter(true);
    }
  }

  // 7. Unmount & Cleanup: ล้างข้อมูลและทำลาย Instance
  ngOnDestroy(): void {
    if (this.tabulatorInstance) {
      console.log("Cleaning up Tabulator before component destroy...");
      this.tabulatorInstance.destroy(); // ป้องกัน Memory Leak
      this.tabulatorInstance = null;
    }
  }
}