/** * TabulatorPlus.js * A wrapper class for Tabulator-tables to provide standardized configurations * and deep-merge capabilities across different frameworks. */
import { TabulatorFull as Tabulator } from 'tabulator-tables'; /** * Helper function to check if an item is a plain object. * @param {any} item - The item to check. * @returns {boolean} */
function isObject (item) { return (item && typeof item === 'object' && !Array.isArray (item)) ;
} /** * Deeply merges two objects. * This ensures nested properties (like 'persistence') aren't overwritten entirely * when only one sub-property is provided in the user configuration. * @param {Object} target - The default configuration object. * @param {Object} source - The user-provided configuration object. * @returns {Object} - The deeply merged configuration. */
function deepMerge (target, source) { let output = Object.assign ({}, target) ; if (isObject (target) && isObject (source)) { Object.keys (source) .forEach (key => { if (isObject (source[key])) { if (! (key in target)) { Object.assign (output, { [key]: source[key] }) ; } else { output[key] = deepMerge (target[key], source[key]) ; } } else { Object.assign (output, { [key]: source[key] }) ; } }) ; } return output;
} export default class TabulatorPlus extends Tabulator { /** * @param {HTMLElement|string} el - The DOM element or selector to attach the table to. * @param {Object} userConfig - Custom Tabulator options provided by the user. * @param {string|null} storageKey - Unique ID for persistence (sorting, filtering, etc.) . */ constructor (el, userConfig = {}, storageKey = null) { // 1. Define organization-wide default settings 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" }; // 2. Perform Deep Merge to protect nested default settings const finalConfig = deepMerge (defaultConfig, userConfig) ; // 3. Initialize the parent Tabulator class super (el, finalConfig) ; } /** * Updates the table with a new dataset. * Using this method is preferred over re-initializing the whole class. * @param {Array} newData - The new array of objects to display. * @returns {Promise} - Resolves when data is loaded. */ refreshData (newData) { if (newData && Array.isArray (newData)) { return this.setData (newData) ; } return Promise.reject ("Invalid data format: Expected an Array.") ; } /** * Forces the table to recalculate its dimensions and redraw. * Useful when the table container size changes or after opening a modal. */ forceRedraw () { this.redraw (true) ; } /** * Clears all active filters and header filters from the table. */ resetFilters () { this.clearFilter (true) ; this.clearHeaderFilter () ; }
}

new TabulatorPlus ("#table", { persistence: { sort: false } // ต้องการปิดแค่ sort อย่างเดียว
}) ;

persistence: { sort: false } // filter และ page หายไป! เพราะโดนทับทั้งก้อน

persistence: { filter: true, // ยังอยู่ (จาก Default) page: true, // ยังอยู่ (จาก Default) sort: false // ถูกเปลี่ยนเฉพาะตัวนี้ (จาก User) }