หมวดหมู่: Programming

<template>
  <div class="table-wrapper">
    <div class="controls">
      <button @click="refreshData">Refresh Data</button>
      <button @click="clearTableFilters">Clear Filters</button>
    </div>

    <div ref="tableElement"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import TabulatorPlus from './TabulatorPlus';
// นำเข้า CSS พื้นฐาน
import "tabulator-tables/dist/css/tabulator.min.css";

// 1. รับ Props จากภายนอก
const props = defineProps({
  tableData: {
    type: Array,
    required: true
  }
});

// 2. กำหนดตัวแปรสำหรับ DOM และ Instance
const tableElement = ref(null);      // เก็บ reference ของ HTML Element
const tabulatorInstance = ref(null); // เก็บ Instance ของ Tabulator (Reused Instance)

// 3. การสร้างตาราง (Initialize) เมื่อ Component Mount
onMounted(() => {
  if (tableElement.value) {
    tabulatorInstance.value = new TabulatorPlus(tableElement.value, {
      data: props.tableData,
      columns: [
        { title: "Name", field: "name", width: 200 },
        { title: "Age", field: "age" },
        { title: "Location", field: "location" },
      ],
    }, "vue-user-settings"); // storageKey สำหรับ persistence
  }
});

// 4. การ Refresh ข้อมูล (เมื่อ Props เปลี่ยนแปลง)
watch(() => props.tableData, (newData) => {
  if (tabulatorInstance.value) {
    // ใช้ .setData() เพื่ออัปเดตข้อมูลเดิม แทนการสร้างตารางใหม่ (ดีต่อ Performance)
    tabulatorInstance.value.setData(newData);
  }
}, { deep: true });

// 5. วิธีเรียกใช้ Method ภายใน Instance (Reused Instance)
const refreshData = () => {
  if (tabulatorInstance.value) {
    // เช่น สั่งวาดตารางใหม่เพื่อให้ขนาดพอดีกับ Container
    tabulatorInstance.value.redraw(true);
  }
};

const clearTableFilters = () => {
  if (tabulatorInstance.value) {
    tabulatorInstance.value.clearFilter(true);
  }
};

// 6. การล้างข้อมูล (Unmount)
onBeforeUnmount(() => {
  if (tabulatorInstance.value) {
    console.log("Destroying Tabulator Instance...");
    // ทำลาย Instance เพื่อป้องกัน Memory Leak
    tabulatorInstance.value.destroy();
    tabulatorInstance.value = null;
  }
});
</script>

<style scoped>
.table-wrapper {
  padding: 1rem;
}
.controls {
  margin-bottom: 1rem;
  display: flex;
  gap: 10px;
}
/* คุณสามารถเพิ่ม CSS เพื่อแต่งตารางที่นี่ได้ */
:deep(.tabulator) {
  border-radius: 4px;
}
</style>

import { shallowRef } from 'vue';
const tabulatorInstance = shallowRef(null); // เร็วกว่า ref ปกติในกรณีนี้