import { TabulatorFull as Tabulator } from 'tabulator-tables'; export default class TabulatorPlus extends Tabulator { constructor (el, userConfig = {}, storageKey = null) { const defaultConfig = { layout: "fitColumns", movableColumns: true, pagination: "local", paginationSize: 10, paginationSizeSelector: [10, 25, 50, 100], persistence: storageKey ? { filter: true, page: true, sort: true } : false, persistenceID: storageKey, placeholder: "No Data Available", resizableRows: true, responsiveLayout: "collapse" }; const finalConfig = { ...defaultConfig, ...userConfig }; super (el, finalConfig) ; } /** * 1. Method for updating new data * @param {Array} newData - New dataset to display */ refreshData (newData) { if (newData && Array.isArray (newData)) { // Use the original Tabulator's setData return this.setData (newData) ; } return Promise.reject ("Invalid data format") ; } /** * 2. Method to force redraw the table (e.g. when resizing or opening a modal) */ forceRedraw () { // redraw (true) will resize columns to fit the current container this.redraw (true) ; } /** * 3. Method to clear all filters */ resetFilters () { this.clearFilter (true) ; this.clearHeaderFilter () ; }
}

// สร้าง Instance
const myTable = new TabulatorPlus ("#table-id", {}, "user-123") ; // เมื่อได้รับข้อมูลใหม่จาก API
api.getData () .then (data => { myTable.refreshData (data) ; // เรียกผ่าน Method ที่เราสร้างใหม่
}) ; // เมื่อ User กดปุ่ม "ล้างค่าการค้นหา"
$ ("#btn-reset") .on ("click", () => { myTable.resetFilters () ;
}) ;