เพราะว่าโปรเจคที่ทำอยู่ มีการออกแบบ ตัวตารางเอาไว้เรียบร้อยแล้วแต่ว่า วันหนึ่งลูกค้าอยากได้ function หนึ่งที่เห้นมาจากงานหน้าหนึ่ง เลยอยากจะ “พี่ขอเปลี่ยนนิดหน่อย” ความจริงมันไม่ได้ยาก เพราะเปลี่ยนแค่ 2 บรรทัดจริง ๆ แต่ 300 จุด เลยคิดถึง การทำ Wrapper Class อย่าง TabulatorPlus ขึ้นมาที่ช่วยให้โค้ดสะอาดและดูแลรักษาง่าย ในระยะยาวครับ
🚀 ยกระดับการจัดการตารางด้วย TabulatorPlus: สร้าง Standard Table ที่ใช้ได้ทุก Framework
ในการพัฒนา Web Application ขนาดใหญ่ ปัญหาที่พบบ่อยคือ “ตารางแสดงผลไม่เหมือนกัน” ในแต่ละหน้า เดี๋ยวหน้าหนึ่งมีปุ่มค้นหา อีกหน้าไม่มี หรือตั้งค่า Pagination ไม่เท่ากัน การสร้าง TabulatorPlus ขึ้นมาเป็น Wrapper Class คือทางออกที่จะช่วยคุมมาตรฐานของ UI/UX ทั้งโปรเจกต์ให้เป็นหนึ่งเดียว
💡 ทำไมต้องมี TabulatorPlus ?
- Centralized Configuration: กำหนดค่า Default ที่ดีที่สุด ไว้ที่เดียว เช่น การตั้งค่าภาษาไทย, รูปแบบวันที่, หรือขนาดหน้าตาราง
- State Persistence Made Easy: จัดการเรื่องการจำสถานะ (Sort, Filter, Page) ของผู้ใช้ผ่าน
storageKeyได้อย่างเป็นระบบ - Framework Agnostic: เขียนครั้งเดียว สามารถนำไปใช้ได้ทั้งใน React, Vue, Angular หรือแม้แต่ HTML ธรรมดา
🛠 เจาะลึกโครงสร้าง TabulatorPlus
ราใช้หลักการของ Inheritance เพื่อขยายความสามารถของ Tabulator ต้นฉบับ
TabulatorPlus.js
import { TabulatorFull as Tabulator } from 'tabulator-tables'; export default class TabulatorPlus extends Tabulator { constructor (el, userConfig = {}, storageKey = null) { // 1. Set the default config for every table const defaultConfig = { layout: "fitColumns", movableColumns: true, pagination: "local", // Always enable pagination paginationSize: 10, // Number of rows per page paginationSizeSelector: [10, 25, 50, 100], persistence: storageKey ? { filter: true, page: true, sort: true } : false, persistenceID: storageKey, placeholder: "No Data Available", resizableRows: true, responsiveLayout: "collapse" }; // 2. Merge user config with default config const finalConfig = { ...defaultConfig, ...userConfig }; // 3. Call the parent (Tabulator) constructor super (el, finalConfig) ; }
}
🌟 เทคนิคเสริมให้ TabulatorPlus ทรงพลังยิ่งขึ้น
การจัดการ Memory Leak
เมื่อใช้ใน Framework อย่าง React หรือ Vue เมื่อ Component ถูกถอดออก เราควรทำความสะอาดตารางเพื่อคืน Memory
// React useEffect
return () => { if (tableInstance) tableInstance.destroy () ;
};
การทำ Deep Merge
หากคุณต้องการส่ง Config ที่เป็น Object ซ้อนกัน การใช้ ...spread แบบธรรมดาอาจไปทับค่าเดิมทั้งหมด แนะนำให้ใช้ฟังก์ชันช่วย merge เพื่อรักษาค่า Default ไว้
Global Styling
คุณสามารถผูก CSS Theme หลักไว้ในไฟล์ที่เรียกใช้ TabulatorPlus เพื่อให้ทุกตารางในระบบมีหน้าตา ที่สวยงามเหมือนกันโดยไม่ต้องตั้งค่าใหม่ทุกครั้ง
📝 สรุป
TabulatorPlus ไม่ใช่แค่การเขียนโค้ดทับ Library เดิม แต่คือการสร้าง “ระบบจัดการข้อมูล” ที่ยืดหยุ่นและมีมาตรฐาน ช่วยลดเวลาในการเขียนโค้ดซ้ำซ้อน และทำให้ทีมพัฒนาทำงานได้ไวขึ้นอย่างมหาศาลครับ
อ่านเพิ่มเติม