@keenthemes/ktui 1.2.3 → 1.2.4

package/dist/ktui.js

@@ -4781,10 +4781,10 @@ exports["default"] = KTComponent;
 
 /***/ }),
 
-/***/ "./src/components/datatable/datatable-checkbox.ts":
-/*!********************************************************!*\
-  !*** ./src/components/datatable/datatable-checkbox.ts ***!
-  \********************************************************/
+/***/ "./src/components/context-menu/context-menu.ts":
+/*!*****************************************************!*\
+  !*** ./src/components/context-menu/context-menu.ts ***!
+  \*****************************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -4792,230 +4792,1233 @@ exports["default"] = KTComponent;
  * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
  * Copyright 2025 by Keenthemes Inc
  */
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createCheckboxHandler = createCheckboxHandler;
+exports.KTContextMenu = void 0;
+var core_1 = __webpack_require__(/*! @popperjs/core */ "./node_modules/@popperjs/core/lib/index.js");
+var dom_1 = __webpack_require__(/*! ../../helpers/dom */ "./src/helpers/dom.ts");
+var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
 var event_handler_1 = __webpack_require__(/*! ../../helpers/event-handler */ "./src/helpers/event-handler.ts");
-// Main function to create checkbox logic for a datatable instance
-function createCheckboxHandler(element, config, fireEvent) {
-    var _a;
-    var headerChecked = false;
-    var headerCheckElement = null;
-    var targetElements = null;
-    // Default: preserve selection across all pages
-    var preserveSelection = ((_a = config.checkbox) === null || _a === void 0 ? void 0 : _a.preserveSelection) !== false;
-    // Helper: get selectedRows from state, always as string[]
-    function getSelectedRows() {
-        if (!config._state)
-            config._state = {};
-        if (!Array.isArray(config._state.selectedRows))
-            config._state.selectedRows = [];
-        return config._state.selectedRows.map(String);
-    }
-    // Helper: set selectedRows in state
-    function setSelectedRows(rows) {
-        if (!config._state)
-            config._state = {};
-        config._state.selectedRows = Array.from(new Set(rows.map(String)));
-    }
-    // Helper: get all visible row IDs (values)
-    function getVisibleRowIds() {
-        if (!targetElements)
-            return [];
-        return Array.from(targetElements)
-            .map(function (el) { return el.value; })
-            .filter(function (v) { return v != null && v !== ''; });
-    }
-    // Listener for header checkbox
-    var checkboxListener = function (event) {
-        checkboxToggle(event);
-    };
-    function init() {
-        headerCheckElement = element.querySelector(config.attributes.check);
-        if (!headerCheckElement)
-            return;
-        headerChecked = headerCheckElement.checked;
-        targetElements = element.querySelectorAll(config.attributes.checkbox);
-        checkboxHandler();
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
+var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
+var KTContextMenu = /** @class */ (function (_super) {
+    __extends(KTContextMenu, _super);
+    function KTContextMenu(element, config) {
+        var _this = _super.call(this) || this;
+        _this._name = 'context-menu';
+        _this._defaultConfig = {
+            zindex: 105,
+            placement: 'right-start',
+            placementRtl: 'left-start',
+            permanent: false,
+            dismiss: true,
+            keyboard: true,
+            offset: '0px, 4px',
+            offsetRtl: '0px, 4px',
+            hiddenClass: 'hidden',
+            container: '',
+            preventNativeMenu: true,
+            flip: true,
+            overflow: false,
+        };
+        _this._config = _this._defaultConfig;
+        _this._isTransitioning = false;
+        _this._isOpen = false;
+        _this._shownAt = 0;
+        _this._lastPoint = { x: 0, y: 0 };
+        if (data_1.default.has(element, _this._name))
+            return _this;
+        _this._init(element);
+        _this._buildConfig(config);
+        if (!_this._element)
+            return _this;
+        _this._targetElement = _this._resolveTargetElement(_this._element);
+        if (!_this._targetElement)
+            return _this;
+        _this._menuElement = _this._resolveMenuElement(_this._element);
+        if (!_this._menuElement)
+            return _this;
+        data_1.default.set(_this._menuElement, 'contextMenuElement', _this._element);
+        _this._setupNestedSubmenus();
+        _this._handleContainer();
+        return _this;
     }
-    function checkboxHandler() {
-        if (!headerCheckElement)
+    KTContextMenu.prototype._resolveTargetElement = function (root) {
+        var selector = root.getAttribute('data-kt-context-menu-target') || '';
+        if (selector) {
+            var target = document.querySelector(selector);
+            if (target)
+                return target;
+        }
+        var localTarget = root.querySelector('[data-kt-context-menu-trigger]');
+        var localToggle = root.querySelector('[data-kt-context-menu-toggle]');
+        return localTarget || localToggle || root;
+    };
+    KTContextMenu.prototype._resolveMenuElement = function (root) {
+        var menu = root.querySelector('[data-kt-context-menu-menu]');
+        return menu;
+    };
+    KTContextMenu.prototype._handleContainer = function () {
+        var _a;
+        var container = this._getOption('container');
+        if (!container)
             return;
-        headerCheckElement.addEventListener('click', checkboxListener);
-        event_handler_1.default.on(document.body, config.attributes.checkbox, 'input', function (event) {
-            handleRowCheckboxChange(event);
+        if (container === 'body') {
+            document.body.appendChild(this._menuElement);
+        }
+        else {
+            (_a = document
+                .querySelector(container)) === null || _a === void 0 ? void 0 : _a.appendChild(this._menuElement);
+        }
+    };
+    KTContextMenu.prototype._setupNestedSubmenus = function () {
+        var submenus = this._menuElement.querySelectorAll('[data-kt-context-menu]');
+        submenus.forEach(function (submenu) {
+            new KTContextMenu(submenu);
         });
-    }
-    // When a row checkbox is changed
-    function handleRowCheckboxChange(event) {
-        var input = event.target;
-        if (!input)
+    };
+    KTContextMenu.prototype._updatePoint = function (x, y) {
+        this._lastPoint = { x: x, y: y };
+    };
+    KTContextMenu.prototype._toggleAtEvent = function (event) {
+        if (this._isOpen) {
+            this._hide();
             return;
-        var value = input.value;
-        var selectedRows = getSelectedRows();
-        var wasChecked = selectedRows.includes(value);
-        var isNowChecked = input.checked;
-        // Update state first
-        if (isNowChecked) {
-            if (!wasChecked)
-                selectedRows.push(value);
         }
-        else {
-            selectedRows = selectedRows.filter(function (v) { return v !== value; });
+        this._showAt(event.clientX, event.clientY);
+    };
+    KTContextMenu.prototype._showAtEvent = function (event) {
+        event.stopPropagation();
+        if (this._getOption('preventNativeMenu') === true) {
+            event.preventDefault();
         }
-        setSelectedRows(selectedRows);
-        updateHeaderCheckboxState();
-        // Fire specific checked/unchecked events after state is updated
-        if (isNowChecked && !wasChecked) {
-            fireEvent('checked');
+        this._toggleAtEvent(event);
+    };
+    KTContextMenu.prototype._showAt = function (x, y) {
+        var _this = this;
+        if (this._isOpen || this._isTransitioning)
+            return;
+        var payload = { cancel: false };
+        this._fireEvent('show', payload);
+        this._dispatchEvent('show', payload);
+        if (payload.cancel)
+            return;
+        KTContextMenu.hide(this._element);
+        this._updatePoint(x, y);
+        var zIndex = parseInt(this._getOption('zindex'), 10);
+        var parentZindex = dom_1.default.getHighestZindex(this._targetElement);
+        if (parentZindex !== null && parentZindex >= zIndex) {
+            zIndex = parentZindex + 1;
         }
-        else if (!isNowChecked && wasChecked) {
-            fireEvent('unchecked');
+        if (zIndex > 0) {
+            this._menuElement.style.zIndex = zIndex.toString();
         }
-        // Always fire changed event for backward compatibility
-        fireEvent('changed');
-    }
-    // When the header checkbox is toggled
-    function checkboxToggle(_event) {
-        var checked = !isChecked();
-        // Update state first, then fire events
-        change(checked);
-        // Fire checked/unchecked events after state is updated
-        var eventType = checked ? 'checked' : 'unchecked';
-        fireEvent(eventType);
-    }
-    // Change all visible checkboxes and update selectedRows
-    function change(checked) {
+        this._menuElement.style.display = 'block';
+        this._menuElement.style.opacity = '0';
+        dom_1.default.reflow(this._menuElement);
+        this._menuElement.style.opacity = '1';
+        this._menuElement.classList.remove(this._getOption('hiddenClass'));
+        this._menuElement.classList.add('open');
+        this._element.classList.add('open');
+        this._initPopper();
+        dom_1.default.transitionEnd(this._menuElement, function () {
+            _this._isTransitioning = false;
+            _this._isOpen = true;
+            _this._fireEvent('shown');
+            _this._dispatchEvent('shown');
+        });
+        this._shownAt = Date.now();
+    };
+    KTContextMenu.prototype._hide = function () {
+        var _this = this;
+        if (!this._isOpen || this._isTransitioning)
+            return;
         var payload = { cancel: false };
-        fireEvent('change', payload);
-        if (payload.cancel === true)
+        this._fireEvent('hide', payload);
+        this._dispatchEvent('hide', payload);
+        if (payload.cancel)
             return;
-        headerChecked = checked;
-        if (headerCheckElement)
-            headerCheckElement.checked = checked;
-        if (targetElements) {
-            var visibleIds_1 = getVisibleRowIds();
-            var selectedRows = getSelectedRows();
-            if (checked) {
-                // Add all visible IDs to selectedRows
-                selectedRows = preserveSelection
-                    ? Array.from(new Set(__spreadArray(__spreadArray([], selectedRows, true), visibleIds_1, true)))
-                    : visibleIds_1;
-            }
-            else {
-                // Remove all visible IDs from selectedRows
-                selectedRows = preserveSelection
-                    ? selectedRows.filter(function (v) { return !visibleIds_1.includes(v); })
-                    : [];
-            }
-            setSelectedRows(selectedRows);
-            // Update visible checkboxes
-            targetElements.forEach(function (element) {
-                if (element) {
-                    element.checked = checked;
+        this._menuElement.style.opacity = '1';
+        dom_1.default.reflow(this._menuElement);
+        this._menuElement.style.opacity = '0';
+        this._menuElement.classList.remove('open');
+        this._element.classList.remove('open');
+        dom_1.default.transitionEnd(this._menuElement, function () {
+            _this._isTransitioning = false;
+            _this._isOpen = false;
+            _this._menuElement.classList.add(_this._getOption('hiddenClass'));
+            _this._menuElement.style.display = '';
+            _this._menuElement.style.zIndex = '';
+            _this._destroyPopper();
+            _this._fireEvent('hidden');
+            _this._dispatchEvent('hidden');
+        });
+    };
+    KTContextMenu.prototype._getVirtualReference = function () {
+        var point = this._lastPoint;
+        return {
+            getBoundingClientRect: function () {
+                return ({
+                    x: point.x,
+                    y: point.y,
+                    top: point.y,
+                    left: point.x,
+                    right: point.x,
+                    bottom: point.y,
+                    width: 0,
+                    height: 0,
+                    toJSON: function () { return ({}); },
+                });
+            },
+        };
+    };
+    KTContextMenu.prototype._initPopper = function () {
+        var popper = (0, core_1.createPopper)(this._getVirtualReference(), this._menuElement, this._getPopperConfig());
+        data_1.default.set(this._element, 'popper', popper);
+    };
+    KTContextMenu.prototype._destroyPopper = function () {
+        if (data_1.default.has(this._element, 'popper')) {
+            data_1.default.get(this._element, 'popper').destroy();
+            data_1.default.remove(this._element, 'popper');
+        }
+    };
+    KTContextMenu.prototype._getPopperConfig = function () {
+        var isRtl = dom_1.default.isRTL();
+        var placement = this._getOption('placement');
+        if (isRtl && this._getOption('placementRtl')) {
+            placement = this._getOption('placementRtl');
+        }
+        var offsetValue = this._getOption('offset');
+        if (isRtl && this._getOption('offsetRtl')) {
+            offsetValue = this._getOption('offsetRtl');
+        }
+        var offset = offsetValue
+            ? offsetValue
+                .toString()
+                .split(',')
+                .map(function (value) { return parseInt(value.trim(), 10); })
+            : [0, 0];
+        var strategy = this._getOption('overflow') === true ? 'absolute' : 'fixed';
+        var altAxis = this._getOption('flip') !== false;
+        return {
+            placement: placement,
+            strategy: strategy,
+            modifiers: [
+                { name: 'offset', options: { offset: offset } },
+                { name: 'preventOverflow', options: { altAxis: altAxis } },
+                { name: 'flip', options: { flipVariations: false } },
+            ],
+        };
+    };
+    KTContextMenu.prototype._isContextMenuOpen = function () {
+        return (this._element.classList.contains('open') &&
+            this._menuElement.classList.contains('open'));
+    };
+    KTContextMenu.prototype.showAt = function (x, y) {
+        this._showAt(x, y);
+    };
+    KTContextMenu.prototype.showAtEvent = function (event) {
+        this._showAtEvent(event);
+    };
+    KTContextMenu.prototype.hide = function () {
+        this._hide();
+    };
+    KTContextMenu.prototype.toggleAtEvent = function (event) {
+        this._toggleAtEvent(event);
+    };
+    KTContextMenu.prototype.isOpen = function () {
+        return this._isContextMenuOpen();
+    };
+    KTContextMenu.prototype.getMenuElement = function () {
+        return this._menuElement;
+    };
+    KTContextMenu.prototype.getTargetElement = function () {
+        return this._targetElement;
+    };
+    KTContextMenu.getElement = function (reference) {
+        if (reference &&
+            reference.hasAttribute('data-kt-context-menu-initialized')) {
+            return reference;
+        }
+        var initializedParent = reference === null || reference === void 0 ? void 0 : reference.closest('[data-kt-context-menu-initialized]');
+        if (initializedParent)
+            return initializedParent;
+        var container = reference === null || reference === void 0 ? void 0 : reference.closest('[data-kt-context-menu]');
+        if (container)
+            return container;
+        if (reference &&
+            reference.hasAttribute('data-kt-context-menu-menu') &&
+            data_1.default.has(reference, 'contextMenuElement')) {
+            return data_1.default.get(reference, 'contextMenuElement');
+        }
+        return null;
+    };
+    KTContextMenu.getInstance = function (element) {
+        element = this.getElement(element);
+        if (!element)
+            return null;
+        if (data_1.default.has(element, 'context-menu')) {
+            return data_1.default.get(element, 'context-menu');
+        }
+        if (element.getAttribute('data-kt-context-menu-initialized') === 'true') {
+            return new KTContextMenu(element);
+        }
+        return null;
+    };
+    KTContextMenu.getOrCreateInstance = function (element, config) {
+        return this.getInstance(element) || new KTContextMenu(element, config);
+    };
+    KTContextMenu.update = function () {
+        document
+            .querySelectorAll('.open[data-kt-context-menu-initialized]')
+            .forEach(function (item) {
+            if (data_1.default.has(item, 'popper')) {
+                data_1.default.get(item, 'popper').forceUpdate();
+            }
+        });
+    };
+    KTContextMenu.hide = function (skipElement) {
+        document
+            .querySelectorAll('.open[data-kt-context-menu-initialized]:not([data-kt-context-menu-permanent="true"])')
+            .forEach(function (item) {
+            if (skipElement && (skipElement === item || item.contains(skipElement)))
+                return;
+            var contextMenu = KTContextMenu.getInstance(item);
+            if (contextMenu)
+                contextMenu.hide();
+        });
+    };
+    KTContextMenu.handleOpen = function () {
+        event_handler_1.default.on(document.body, '[data-kt-context-menu-trigger], [data-kt-context-menu-target], [data-kt-context-menu]', 'contextmenu', function (event, target) {
+            var contextMenu = KTContextMenu.getInstance(target);
+            if (contextMenu) {
+                contextMenu.showAtEvent(event);
+            }
+        });
+    };
+    KTContextMenu.handleToggle = function () {
+        event_handler_1.default.on(document.body, '[data-kt-context-menu-toggle]', 'click', function (event, target) {
+            event.preventDefault();
+            event.stopPropagation();
+            var contextMenu = KTContextMenu.getInstance(target);
+            if (contextMenu) {
+                var rect = target.getBoundingClientRect();
+                contextMenu.showAt(rect.right, rect.top);
+            }
+        });
+    };
+    KTContextMenu.handleClickAway = function () {
+        document.addEventListener('click', function (event) {
+            document
+                .querySelectorAll('.open[data-kt-context-menu-initialized]:not([data-kt-context-menu-permanent="true"])')
+                .forEach(function (element) {
+                var contextMenu = KTContextMenu.getInstance(element);
+                if (!contextMenu)
+                    return;
+                var menuElement = contextMenu.getMenuElement();
+                var targetElement = contextMenu.getTargetElement();
+                if (targetElement === event.target ||
+                    targetElement.contains(event.target) ||
+                    menuElement === event.target ||
+                    menuElement.contains(event.target)) {
+                    return;
+                }
+                contextMenu.hide();
+            });
+        });
+    };
+    KTContextMenu.handleKeyboard = function () {
+        document.addEventListener('keydown', function (event) {
+            var contextMenuEl = document.querySelector('.open[data-kt-context-menu-initialized]');
+            var contextMenu = KTContextMenu.getInstance(contextMenuEl);
+            if (!contextMenu || !contextMenu._getOption('keyboard'))
+                return;
+            if (event.key === 'Escape' &&
+                !(event.ctrlKey || event.altKey || event.shiftKey)) {
+                contextMenu.hide();
+            }
+        });
+    };
+    KTContextMenu.handleDismiss = function () {
+        event_handler_1.default.on(document.body, '[data-kt-context-menu-dismiss], [data-kt-dropdown-dismiss]', 'click', function (_event, target) {
+            var contextMenu = KTContextMenu.getInstance(target);
+            if (contextMenu) {
+                contextMenu.hide();
+            }
+        });
+    };
+    KTContextMenu.initHandlers = function () {
+        this.handleOpen();
+        this.handleToggle();
+        this.handleClickAway();
+        this.handleKeyboard();
+        this.handleDismiss();
+    };
+    KTContextMenu.createInstances = function () {
+        var elements = document.querySelectorAll('[data-kt-context-menu]');
+        elements.forEach(function (element) {
+            new KTContextMenu(element);
+        });
+    };
+    KTContextMenu.init = function () {
+        KTContextMenu.createInstances();
+        if (window.KT_CONTEXT_MENU_INITIALIZED !== true) {
+            KTContextMenu.initHandlers();
+            window.KT_CONTEXT_MENU_INITIALIZED = true;
+        }
+    };
+    KTContextMenu.reinit = function () {
+        var elements = document.querySelectorAll('[data-kt-context-menu]');
+        elements.forEach(function (element) {
+            try {
+                var instance = KTContextMenu.getInstance(element);
+                if (instance && typeof instance.hide === 'function') {
+                    instance.hide();
+                }
+                data_1.default.remove(element, 'context-menu');
+                data_1.default.remove(element, 'popper');
+                element.removeAttribute('data-kt-context-menu-initialized');
+                var menu = element.querySelector('[data-kt-context-menu-menu]');
+                if (menu) {
+                    data_1.default.remove(menu, 'contextMenuElement');
+                }
+            }
+            catch (_a) {
+                // ignore per-element cleanup errors
+            }
+        });
+        KTContextMenu.createInstances();
+        KTContextMenu.initHandlers();
+    };
+    return KTContextMenu;
+}(component_1.default));
+exports.KTContextMenu = KTContextMenu;
+if (typeof window !== 'undefined') {
+    window.KTContextMenu = KTContextMenu;
+}
+
+
+/***/ }),
+
+/***/ "./src/components/context-menu/index.ts":
+/*!**********************************************!*\
+  !*** ./src/components/context-menu/index.ts ***!
+  \**********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTContextMenu = void 0;
+var context_menu_1 = __webpack_require__(/*! ./context-menu */ "./src/components/context-menu/context-menu.ts");
+Object.defineProperty(exports, "KTContextMenu", ({ enumerable: true, get: function () { return context_menu_1.KTContextMenu; } }));
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-checkbox.ts":
+/*!********************************************************!*\
+  !*** ./src/components/datatable/datatable-checkbox.ts ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.createCheckboxHandler = createCheckboxHandler;
+var event_handler_1 = __webpack_require__(/*! ../../helpers/event-handler */ "./src/helpers/event-handler.ts");
+// Main function to create checkbox logic for a datatable instance
+function createCheckboxHandler(element, config, fireEvent) {
+    var _a;
+    var headerChecked = false;
+    var headerCheckElement = null;
+    var targetElements = null;
+    // Default: preserve selection across all pages
+    var preserveSelection = ((_a = config.checkbox) === null || _a === void 0 ? void 0 : _a.preserveSelection) !== false;
+    // Helper: get selectedRows from state, always as string[]
+    function getSelectedRows() {
+        if (!config._state)
+            config._state = {};
+        if (!Array.isArray(config._state.selectedRows))
+            config._state.selectedRows = [];
+        return config._state.selectedRows.map(String);
+    }
+    // Helper: set selectedRows in state
+    function setSelectedRows(rows) {
+        if (!config._state)
+            config._state = {};
+        config._state.selectedRows = Array.from(new Set(rows.map(String)));
+    }
+    // Helper: get all visible row IDs (values)
+    function getVisibleRowIds() {
+        if (!targetElements)
+            return [];
+        return Array.from(targetElements)
+            .map(function (el) { return el.value; })
+            .filter(function (v) { return v != null && v !== ''; });
+    }
+    // Listener for header checkbox
+    var checkboxListener = function (event) {
+        checkboxToggle(event);
+    };
+    function init() {
+        headerCheckElement = element.querySelector(config.attributes.check);
+        if (!headerCheckElement)
+            return;
+        headerChecked = headerCheckElement.checked;
+        targetElements = element.querySelectorAll(config.attributes.checkbox);
+        checkboxHandler();
+        reapplyCheckedStates();
+        updateHeaderCheckboxState();
+    }
+    function checkboxHandler() {
+        if (!headerCheckElement)
+            return;
+        headerCheckElement.addEventListener('click', checkboxListener);
+        event_handler_1.default.on(document.body, config.attributes.checkbox, 'input', function (event) {
+            handleRowCheckboxChange(event);
+        });
+    }
+    // When a row checkbox is changed
+    function handleRowCheckboxChange(event) {
+        var input = event.target;
+        if (!input)
+            return;
+        var value = input.value;
+        var selectedRows = getSelectedRows();
+        var wasChecked = selectedRows.includes(value);
+        var isNowChecked = input.checked;
+        // Update state first
+        if (isNowChecked) {
+            if (!wasChecked)
+                selectedRows.push(value);
+        }
+        else {
+            selectedRows = selectedRows.filter(function (v) { return v !== value; });
+        }
+        setSelectedRows(selectedRows);
+        updateHeaderCheckboxState();
+        // Fire specific checked/unchecked events after state is updated
+        if (isNowChecked && !wasChecked) {
+            fireEvent('checked');
+        }
+        else if (!isNowChecked && wasChecked) {
+            fireEvent('unchecked');
+        }
+        // Always fire changed event for backward compatibility
+        fireEvent('changed');
+    }
+    // When the header checkbox is toggled
+    function checkboxToggle(_event) {
+        var checked = !isChecked();
+        // Update state first, then fire events
+        change(checked);
+        // Fire checked/unchecked events after state is updated
+        var eventType = checked ? 'checked' : 'unchecked';
+        fireEvent(eventType);
+    }
+    // Change all visible checkboxes and update selectedRows
+    function change(checked) {
+        var payload = { cancel: false };
+        fireEvent('change', payload);
+        if (payload.cancel === true)
+            return;
+        headerChecked = checked;
+        if (headerCheckElement)
+            headerCheckElement.checked = checked;
+        if (targetElements) {
+            var visibleIds_1 = getVisibleRowIds();
+            var selectedRows = getSelectedRows();
+            if (checked) {
+                // Add all visible IDs to selectedRows
+                selectedRows = preserveSelection
+                    ? Array.from(new Set(__spreadArray(__spreadArray([], selectedRows, true), visibleIds_1, true)))
+                    : visibleIds_1;
+            }
+            else {
+                // Remove all visible IDs from selectedRows
+                selectedRows = preserveSelection
+                    ? selectedRows.filter(function (v) { return !visibleIds_1.includes(v); })
+                    : [];
+            }
+            setSelectedRows(selectedRows);
+            // Update visible checkboxes
+            targetElements.forEach(function (element) {
+                if (element) {
+                    element.checked = checked;
+                }
+            });
+        }
+        updateHeaderCheckboxState();
+        fireEvent('changed');
+    }
+    // Reapply checked state to visible checkboxes based on selectedRows
+    function reapplyCheckedStates() {
+        var selectedRows = getSelectedRows();
+        if (!targetElements)
+            return;
+        targetElements.forEach(function (element) {
+            var _a;
+            if (!element)
+                return;
+            var value = element.value;
+            element.checked = selectedRows.includes(value);
+            // Update row class
+            var row = element.closest('tr');
+            if (row && ((_a = config.checkbox) === null || _a === void 0 ? void 0 : _a.checkedClass)) {
+                if (element.checked) {
+                    row.classList.add(config.checkbox.checkedClass);
+                }
+                else {
+                    row.classList.remove(config.checkbox.checkedClass);
+                }
+            }
+        });
+    }
+    // Update header checkbox state (checked/indeterminate/unchecked)
+    function updateHeaderCheckboxState() {
+        if (!headerCheckElement || !targetElements)
+            return;
+        var total = targetElements.length;
+        var checked = 0;
+        for (var i = 0; i < total; i++) {
+            if (targetElements[i].checked)
+                checked++;
+        }
+        if (checked === 0) {
+            headerCheckElement.indeterminate = false;
+            headerCheckElement.checked = false;
+            headerChecked = false;
+        }
+        else if (checked > 0 && checked < total) {
+            headerCheckElement.indeterminate = true;
+            headerCheckElement.checked = false;
+            headerChecked = false;
+        }
+        else if (checked === total) {
+            headerCheckElement.indeterminate = false;
+            headerCheckElement.checked = true;
+            headerChecked = true;
+        }
+    }
+    // Fix: isChecked() implementation
+    function isChecked() {
+        return headerChecked;
+    }
+    function getChecked() {
+        return getSelectedRows();
+    }
+    function check() {
+        change(true);
+        reapplyCheckedStates();
+        updateHeaderCheckboxState();
+    }
+    function uncheck() {
+        change(false);
+        reapplyCheckedStates();
+        updateHeaderCheckboxState();
+    }
+    function toggle() {
+        checkboxToggle();
+        reapplyCheckedStates();
+        updateHeaderCheckboxState();
+    }
+    function updateState() {
+        // Called after redraw/pagination
+        targetElements = element.querySelectorAll(config.attributes.checkbox);
+        reapplyCheckedStates();
+        updateHeaderCheckboxState();
+    }
+    return {
+        init: init,
+        check: check,
+        uncheck: uncheck,
+        toggle: toggle,
+        isChecked: isChecked,
+        getChecked: getChecked,
+        updateState: updateState,
+    };
+}
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-event-adapter.ts":
+/*!*************************************************************!*\
+  !*** ./src/components/datatable/datatable-event-adapter.ts ***!
+  \*************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.createDataTableEventAdapter = createDataTableEventAdapter;
+function createDataTableEventAdapter(fireEvent, dispatchEvent) {
+    return {
+        emit: function (eventName, eventData) {
+            fireEvent(eventName, eventData);
+            dispatchEvent(eventName, eventData);
+        },
+    };
+}
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-local-provider.ts":
+/*!**************************************************************!*\
+  !*** ./src/components/datatable/datatable-local-provider.ts ***!
+  \**************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDataTableLocalDataProvider = void 0;
+var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
+var KTDataTableLocalDataProvider = /** @class */ (function () {
+    function KTDataTableLocalDataProvider(options) {
+        this.options = options;
+    }
+    KTDataTableLocalDataProvider.prototype.fetch = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.fetchSync()];
+            });
+        });
+    };
+    KTDataTableLocalDataProvider.prototype.fetchSync = function () {
+        var state = this.options.stateStore.getState();
+        var originalData = state.originalData;
+        if (!this.options.elements().tableElement ||
+            originalData === undefined ||
+            this.tableConfigInvalidate() ||
+            this.localTableHeaderInvalidate() ||
+            this.localTableContentInvalidate()) {
+            var _a = this.localExtractTableContent(), originalData_1 = _a.originalData, originalDataAttributes = _a.originalDataAttributes;
+            this.options.stateStore.setOriginalData(originalData_1, originalDataAttributes);
+        }
+        originalData = this.options.stateStore.getState().originalData;
+        var data = __spreadArray([], originalData, true);
+        var filteredData = data;
+        var _b = this.options.stateStore.getState(), sortField = _b.sortField, sortOrder = _b.sortOrder, page = _b.page, pageSize = _b.pageSize, search = _b.search;
+        if (search) {
+            var searchTerm = typeof search === 'string' ? search : '';
+            filteredData = data = this.options.config.search.callback.call(this, data, searchTerm);
+        }
+        if (sortField !== undefined &&
+            sortOrder !== undefined &&
+            sortOrder !== '' &&
+            typeof this.options.config.sort.callback === 'function') {
+            data = this.options.config.sort.callback.call(this, data, sortField, sortOrder);
+        }
+        if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+            var startIndex = (page - 1) * pageSize;
+            var endIndex = startIndex + pageSize;
+            data = data.slice(startIndex, endIndex);
+        }
+        return {
+            data: data,
+            totalItems: filteredData.length,
+        };
+    };
+    KTDataTableLocalDataProvider.prototype.localTableContentInvalidate = function () {
+        var tbodyElement = this.options.elements().tbodyElement;
+        var checksum = utils_1.default.checksum(JSON.stringify(tbodyElement.innerHTML));
+        if (this.options.stateStore.getState()._contentChecksum !== checksum) {
+            this.options.stateStore.patchState({ _contentChecksum: checksum });
+            return true;
+        }
+        return false;
+    };
+    KTDataTableLocalDataProvider.prototype.tableConfigInvalidate = function () {
+        var _a = this.options.config, _state = _a._state, restConfig = __rest(_a, ["_state"]);
+        var checksum = utils_1.default.checksum(JSON.stringify(restConfig));
+        if (_state._configChecksum !== checksum) {
+            this.options.stateStore.patchState({ _configChecksum: checksum });
+            return true;
+        }
+        return false;
+    };
+    KTDataTableLocalDataProvider.prototype.localExtractTableContent = function () {
+        var originalData = [];
+        var originalDataAttributes = [];
+        var _a = this.options.elements(), tbodyElement = _a.tbodyElement, theadElement = _a.theadElement;
+        this.options.storeOriginalClasses();
+        var rows = tbodyElement.querySelectorAll('tr');
+        var allThs = theadElement
+            ? theadElement.querySelectorAll('th')
+            : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
+        var columnsByIndex = ths.length > 0 && ths.length !== allThs.length ? Array.from(allThs) : ths;
+        rows.forEach(function (row) {
+            var dataRow = {};
+            var dataRowAttribute = {};
+            row.querySelectorAll('td').forEach(function (td, index) {
+                var _a, _b, _c;
+                var colName = (_a = columnsByIndex[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-kt-datatable-column');
+                if (colName) {
+                    dataRow[colName] = (_b = td.innerHTML) === null || _b === void 0 ? void 0 : _b.trim();
+                }
+                else {
+                    dataRow[index] = (_c = td.innerHTML) === null || _c === void 0 ? void 0 : _c.trim();
+                }
+            });
+            if (Object.keys(dataRow).length > 0) {
+                originalData.push(dataRow);
+                originalDataAttributes.push(dataRowAttribute);
+            }
+        });
+        return { originalData: originalData, originalDataAttributes: originalDataAttributes };
+    };
+    KTDataTableLocalDataProvider.prototype.localTableHeaderInvalidate = function () {
+        var originalData = this.options.stateStore.getState().originalData;
+        var theadElement = this.options.elements().theadElement;
+        var totalColumns = originalData.length
+            ? Object.keys(originalData[0]).length
+            : 0;
+        var allThs = theadElement
+            ? theadElement.querySelectorAll('th')
+            : [];
+        var thsWithColumn = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
+        var currentTableHeaders = thsWithColumn.length > 0
+            ? thsWithColumn.length !== allThs.length
+                ? allThs.length
+                : thsWithColumn.length
+            : this.options.getLogicalColumnCount();
+        return currentTableHeaders !== totalColumns;
+    };
+    return KTDataTableLocalDataProvider;
+}());
+exports.KTDataTableLocalDataProvider = KTDataTableLocalDataProvider;
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-pagination-renderer.ts":
+/*!*******************************************************************!*\
+  !*** ./src/components/datatable/datatable-pagination-renderer.ts ***!
+  \*******************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDataTableDomPaginationRenderer = void 0;
+var KTDataTableDomPaginationRenderer = /** @class */ (function () {
+    function KTDataTableDomPaginationRenderer() {
+    }
+    KTDataTableDomPaginationRenderer.prototype.render = function (input) {
+        var _this = this;
+        this.removeChildElements(input.sizeElement);
+        this.createPageSizeControls(input);
+        this.removeChildElements(input.paginationElement);
+        this.createPaginationControls(input);
+        return function () {
+            if (input.sizeElement) {
+                input.sizeElement.onchange = null;
+            }
+            _this.removeChildElements(input.paginationElement);
+        };
+    };
+    KTDataTableDomPaginationRenderer.prototype.removeChildElements = function (container) {
+        if (!container) {
+            return;
+        }
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+    };
+    KTDataTableDomPaginationRenderer.prototype.createPageSizeControls = function (input) {
+        if (!input.sizeElement) {
+            return input.sizeElement;
+        }
+        setTimeout(function () {
+            var _a;
+            var options = input.config.pageSizes.map(function (size) {
+                var option = document.createElement('option');
+                option.value = String(size);
+                option.text = String(size);
+                option.selected = input.state.pageSize === size;
+                return option;
+            });
+            (_a = input.sizeElement).append.apply(_a, options);
+        }, 100);
+        input.sizeElement.onchange = function (event) {
+            input.reloadPageSize(Number(event.target.value), 1);
+        };
+        return input.sizeElement;
+    };
+    KTDataTableDomPaginationRenderer.prototype.createPaginationControls = function (input) {
+        if (!input.infoElement ||
+            !input.paginationElement ||
+            input.dataLength === 0) {
+            return null;
+        }
+        this.setPaginationInfoText(input);
+        this.createPaginationButtons(input.paginationElement, input);
+        return input.paginationElement;
+    };
+    KTDataTableDomPaginationRenderer.prototype.setPaginationInfoText = function (input) {
+        input.infoElement.textContent = input.config.info
+            .replace('{start}', (input.state.page - 1) * input.state.pageSize + 1 + '')
+            .replace('{end}', Math.min(input.state.page * input.state.pageSize, input.state.totalItems) + '')
+            .replace('{total}', input.state.totalItems + '');
+    };
+    KTDataTableDomPaginationRenderer.prototype.createPaginationButtons = function (paginationContainer, input) {
+        var _a = input.state, currentPage = _a.page, totalPages = _a.totalPages;
+        var _b = input.config.pagination, previous = _b.previous, next = _b.next, number = _b.number, more = _b.more;
+        var createButton = function (text, className, disabled, handleClick) {
+            var button = document.createElement('button');
+            button.className = className;
+            button.innerHTML = text;
+            button.disabled = disabled;
+            button.onclick = handleClick;
+            return button;
+        };
+        paginationContainer.appendChild(createButton(previous.text, "".concat(previous.class).concat(currentPage === 1 ? ' disabled' : ''), currentPage === 1, function () { return input.paginateData(currentPage - 1); }));
+        if (input.config.pageMore) {
+            var range_1 = this.calculatePageRange(currentPage, totalPages, input.config.pageMoreLimit);
+            if (range_1.start > 1) {
+                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
+                    return input.paginateData(Math.max(1, range_1.start - 1));
+                }));
+            }
+            var _loop_1 = function (i) {
+                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return input.paginateData(i); }));
+            };
+            for (var i = range_1.start; i <= range_1.end; i++) {
+                _loop_1(i);
+            }
+            if (range_1.end < totalPages) {
+                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
+                    return input.paginateData(Math.min(totalPages, range_1.end + 1));
+                }));
+            }
+        }
+        else {
+            var _loop_2 = function (i) {
+                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return input.paginateData(i); }));
+            };
+            for (var i = 1; i <= totalPages; i++) {
+                _loop_2(i);
+            }
+        }
+        paginationContainer.appendChild(createButton(next.text, "".concat(next.class).concat(currentPage === totalPages ? ' disabled' : ''), currentPage === totalPages, function () { return input.paginateData(currentPage + 1); }));
+    };
+    KTDataTableDomPaginationRenderer.prototype.calculatePageRange = function (currentPage, totalPages, maxButtons) {
+        var startPage, endPage;
+        var halfMaxButtons = Math.floor(maxButtons / 2);
+        if (totalPages <= maxButtons) {
+            startPage = 1;
+            endPage = totalPages;
+        }
+        else {
+            startPage = Math.max(currentPage - halfMaxButtons, 1);
+            endPage = Math.min(startPage + maxButtons - 1, totalPages);
+            if (endPage - startPage < maxButtons - 1) {
+                startPage = Math.max(endPage - maxButtons + 1, 1);
+            }
+        }
+        return { start: startPage, end: endPage };
+    };
+    return KTDataTableDomPaginationRenderer;
+}());
+exports.KTDataTableDomPaginationRenderer = KTDataTableDomPaginationRenderer;
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-remote-provider.ts":
+/*!***************************************************************!*\
+  !*** ./src/components/datatable/datatable-remote-provider.ts ***!
+  \***************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDataTableRemoteDataProvider = void 0;
+var KTDataTableRemoteDataProvider = /** @class */ (function () {
+    function KTDataTableRemoteDataProvider(options) {
+        this.options = options;
+        this.abortController = null;
+        this.requestId = 0;
+    }
+    KTDataTableRemoteDataProvider.prototype.dispose = function () {
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+    };
+    KTDataTableRemoteDataProvider.prototype.fetch = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var currentRequestId, queryParams, response, error_1, responseData, error_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        currentRequestId = ++this.requestId;
+                        queryParams = this.getQueryParamsForFetchRequest();
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.performFetchRequest(queryParams)];
+                    case 2:
+                        response = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        if (error_1.name === 'AbortError') {
+                            return [2 /*return*/, { data: [], totalItems: 0, skipped: true }];
+                        }
+                        throw error_1;
+                    case 4:
+                        if (currentRequestId !== this.requestId) {
+                            return [2 /*return*/, { data: [], totalItems: 0, skipped: true }];
+                        }
+                        responseData = null;
+                        _a.label = 5;
+                    case 5:
+                        _a.trys.push([5, 7, , 8]);
+                        return [4 /*yield*/, response.json()];
+                    case 6:
+                        responseData = _a.sent();
+                        return [3 /*break*/, 8];
+                    case 7:
+                        error_2 = _a.sent();
+                        this.options.eventAdapter.emit('parseError', {
+                            response: response,
+                            error: String(error_2),
+                            status: response.status,
+                            statusText: response.statusText,
+                        });
+                        return [2 /*return*/, { data: [], totalItems: 0, skipped: true }];
+                    case 8:
+                        if (currentRequestId !== this.requestId) {
+                            return [2 /*return*/, { data: [], totalItems: 0, skipped: true }];
+                        }
+                        this.options.eventAdapter.emit('fetched', { response: responseData });
+                        if (typeof this.options.config.mapResponse === 'function') {
+                            responseData = this.options.config.mapResponse.call(this, responseData);
+                        }
+                        return [2 /*return*/, {
+                                data: responseData.data,
+                                totalItems: responseData.totalCount,
+                                response: responseData,
+                            }];
                 }
             });
-        }
-        updateHeaderCheckboxState();
-        fireEvent('changed');
-    }
-    // Reapply checked state to visible checkboxes based on selectedRows
-    function reapplyCheckedStates() {
-        var selectedRows = getSelectedRows();
-        if (!targetElements)
-            return;
-        targetElements.forEach(function (element) {
-            var _a;
-            if (!element)
-                return;
-            var value = element.value;
-            element.checked = selectedRows.includes(value);
-            // Update row class
-            var row = element.closest('tr');
-            if (row && ((_a = config.checkbox) === null || _a === void 0 ? void 0 : _a.checkedClass)) {
-                if (element.checked) {
-                    row.classList.add(config.checkbox.checkedClass);
-                }
-                else {
-                    row.classList.remove(config.checkbox.checkedClass);
-                }
-            }
         });
-    }
-    // Update header checkbox state (checked/indeterminate/unchecked)
-    function updateHeaderCheckboxState() {
-        if (!headerCheckElement || !targetElements)
-            return;
-        var total = targetElements.length;
-        var checked = 0;
-        for (var i = 0; i < total; i++) {
-            if (targetElements[i].checked)
-                checked++;
+    };
+    KTDataTableRemoteDataProvider.prototype.getQueryParamsForFetchRequest = function () {
+        var _a = this.options.stateStore.getState(), page = _a.page, pageSize = _a.pageSize, sortField = _a.sortField, sortOrder = _a.sortOrder, filters = _a.filters, search = _a.search;
+        var queryParams = new URLSearchParams();
+        queryParams.set('page', String(page));
+        queryParams.set('size', String(pageSize));
+        if (sortOrder !== undefined) {
+            queryParams.set('sortOrder', String(sortOrder));
         }
-        if (checked === 0) {
-            headerCheckElement.indeterminate = false;
-            headerCheckElement.checked = false;
-            headerChecked = false;
+        if (sortField !== undefined) {
+            queryParams.set('sortField', String(sortField));
         }
-        else if (checked > 0 && checked < total) {
-            headerCheckElement.indeterminate = true;
-            headerCheckElement.checked = false;
-            headerChecked = false;
+        if (Array.isArray(filters) && filters.length) {
+            queryParams.set('filters', JSON.stringify(filters.map(function (filter) { return ({
+                column: filter.column,
+                type: filter.type,
+                value: filter.value,
+            }); })));
         }
-        else if (checked === total) {
-            headerCheckElement.indeterminate = false;
-            headerCheckElement.checked = true;
-            headerChecked = true;
+        if (search) {
+            queryParams.set('search', typeof search === 'object' ? JSON.stringify(search) : search);
         }
-    }
-    // Fix: isChecked() implementation
-    function isChecked() {
-        return headerChecked;
-    }
-    function getChecked() {
-        return getSelectedRows();
-    }
-    function check() {
-        change(true);
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    function uncheck() {
-        change(false);
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    function toggle() {
-        checkboxToggle();
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    function updateState() {
-        // Called after redraw/pagination
-        targetElements = element.querySelectorAll(config.attributes.checkbox);
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    return {
-        init: init,
-        check: check,
-        uncheck: uncheck,
-        toggle: toggle,
-        isChecked: isChecked,
-        getChecked: getChecked,
-        updateState: updateState,
+        if (typeof this.options.config.mapRequest === 'function') {
+            queryParams = this.options.config.mapRequest.call(this, queryParams);
+        }
+        return queryParams;
     };
-}
+    KTDataTableRemoteDataProvider.prototype.performFetchRequest = function (queryParams) {
+        return __awaiter(this, void 0, void 0, function () {
+            var requestMethod, requestBody, apiEndpoint, apiEndpointWithQueryParams;
+            var _this = this;
+            return __generator(this, function (_a) {
+                requestMethod = this.options.config.requestMethod;
+                requestBody = undefined;
+                apiEndpoint = this.options.config.apiEndpoint;
+                if (this.abortController) {
+                    this.abortController.abort();
+                }
+                this.abortController = new AbortController();
+                if (requestMethod === 'POST') {
+                    requestBody = queryParams;
+                }
+                else if (requestMethod === 'GET') {
+                    apiEndpointWithQueryParams = this.options.createUrl(apiEndpoint);
+                    apiEndpointWithQueryParams.search = queryParams.toString();
+                    apiEndpoint = apiEndpointWithQueryParams.toString();
+                }
+                return [2 /*return*/, fetch(apiEndpoint, __assign(__assign({ method: requestMethod, body: requestBody, headers: this.options.config.requestHeaders }, (this.options.config.requestCredentials && {
+                        credentials: this.options.config.requestCredentials,
+                    })), (this.abortController && { signal: this.abortController.signal }))).catch(function (error) {
+                        if (error.name === 'AbortError') {
+                            return Promise.reject(error);
+                        }
+                        _this.options.eventAdapter.emit('error', { error: error });
+                        _this.options.noticeOnTable('Error performing fetch request: ' + String(error));
+                        throw error;
+                    })];
+            });
+        });
+    };
+    return KTDataTableRemoteDataProvider;
+}());
+exports.KTDataTableRemoteDataProvider = KTDataTableRemoteDataProvider;
 
 
 /***/ }),
@@ -5186,9 +6189,241 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                 updateData();
             });
         });
-    }
-    return { initSort: initSort, sortData: sortData, toggleSortOrder: toggleSortOrder, setSortIcon: setSortIcon };
-}
+    }
+    return { initSort: initSort, sortData: sortData, toggleSortOrder: toggleSortOrder, setSortIcon: setSortIcon };
+}
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-state-store.ts":
+/*!***********************************************************!*\
+  !*** ./src/components/datatable/datatable-state-store.ts ***!
+  \***********************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDataTableConfigStateStore = void 0;
+var KTDataTableConfigStateStore = /** @class */ (function () {
+    function KTDataTableConfigStateStore(config) {
+        this.config = config;
+        this.ensureState();
+    }
+    KTDataTableConfigStateStore.prototype.getState = function () {
+        this.ensureState();
+        return __assign({ page: 1, sortField: null, sortOrder: '', pageSize: this.config.pageSize, filters: [] }, this.config._state);
+    };
+    KTDataTableConfigStateStore.prototype.replaceState = function (state) {
+        this.config._state = state;
+        this.ensureState();
+    };
+    KTDataTableConfigStateStore.prototype.patchState = function (state) {
+        this.ensureState();
+        this.config._state = __assign(__assign({}, this.config._state), state);
+    };
+    KTDataTableConfigStateStore.prototype.setPage = function (page) {
+        this.patchState({ page: page });
+    };
+    KTDataTableConfigStateStore.prototype.setPageSize = function (pageSize, page) {
+        if (page === void 0) { page = 1; }
+        this.patchState({ pageSize: pageSize, page: page });
+    };
+    KTDataTableConfigStateStore.prototype.setSort = function (field, order) {
+        this.patchState({
+            sortField: field,
+            sortOrder: order,
+        });
+    };
+    KTDataTableConfigStateStore.prototype.setSearch = function (search) {
+        this.patchState({ search: search, page: 1 });
+    };
+    KTDataTableConfigStateStore.prototype.setFilter = function (filter) {
+        var filters = __spreadArray(__spreadArray([], (this.getState().filters || []).filter(function (currentFilter) { return currentFilter.column !== filter.column; }), true), [
+            filter,
+        ], false);
+        this.patchState({ filters: filters, page: 1 });
+    };
+    KTDataTableConfigStateStore.prototype.setOriginalData = function (originalData, originalDataAttributes) {
+        this.patchState({
+            originalData: originalData,
+            originalDataAttributes: originalDataAttributes,
+        });
+    };
+    KTDataTableConfigStateStore.prototype.ensureState = function () {
+        if (!this.config._state) {
+            this.config._state = {};
+        }
+    };
+    return KTDataTableConfigStateStore;
+}());
+exports.KTDataTableConfigStateStore = KTDataTableConfigStateStore;
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-table-renderer.ts":
+/*!**************************************************************!*\
+  !*** ./src/components/datatable/datatable-table-renderer.ts ***!
+  \**************************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDataTableDomTableRenderer = void 0;
+var KTDataTableDomTableRenderer = /** @class */ (function () {
+    function KTDataTableDomTableRenderer() {
+    }
+    KTDataTableDomTableRenderer.prototype.render = function (input) {
+        while (input.tableElement.tBodies.length) {
+            input.tableElement.removeChild(input.tableElement.tBodies[0]);
+        }
+        var tbodyElement = input.tableElement.createTBody();
+        if (input.originalTbodyClass) {
+            tbodyElement.className = input.originalTbodyClass;
+        }
+        this.renderContent(input, tbodyElement);
+        return tbodyElement;
+    };
+    KTDataTableDomTableRenderer.prototype.notice = function (tableElement, getLogicalColumnCount, message) {
+        if (message === void 0) { message = ''; }
+        var row = tableElement.tBodies[0].insertRow();
+        var cell = row.insertCell();
+        var logicalCount = getLogicalColumnCount();
+        cell.colSpan = logicalCount > 0 ? logicalCount : 1;
+        cell.innerHTML = message;
+    };
+    KTDataTableDomTableRenderer.prototype.renderContent = function (input, tbodyElement) {
+        var _this = this;
+        var fragment = document.createDocumentFragment();
+        tbodyElement.textContent = '';
+        if (input.data.length === 0) {
+            this.notice(input.tableElement, input.getLogicalColumnCount, input.config.infoEmpty || '');
+            return tbodyElement;
+        }
+        var allThs = input.theadElement
+            ? input.theadElement.querySelectorAll('th')
+            : [];
+        var ths = Array.from(allThs).filter(function (th) {
+            return th.hasAttribute('data-kt-datatable-column');
+        });
+        var columnsToRender = ths.length > 0 && ths.length !== allThs.length ? Array.from(allThs) : ths;
+        var logicalColumnCount = columnsToRender.length > 0
+            ? columnsToRender.length
+            : input.getLogicalColumnCount();
+        input.data.forEach(function (item, rowIndex) {
+            var row = document.createElement('tr');
+            if (input.originalTrClasses && input.originalTrClasses[rowIndex]) {
+                row.className = input.originalTrClasses[rowIndex];
+            }
+            if (!input.config.columns) {
+                _this.renderImplicitColumns(input, row, item, rowIndex, {
+                    columnsToRender: columnsToRender,
+                    logicalColumnCount: logicalColumnCount,
+                });
+            }
+            else {
+                _this.renderConfiguredColumns(input, row, item, rowIndex);
+            }
+            fragment.appendChild(row);
+        });
+        tbodyElement.appendChild(fragment);
+        return tbodyElement;
+    };
+    KTDataTableDomTableRenderer.prototype.renderImplicitColumns = function (input, row, item, rowIndex, options) {
+        var dataRowAttributes = input.getState().originalDataAttributes
+            ? input.getState().originalDataAttributes[rowIndex]
+            : null;
+        for (var colIndex = 0; colIndex < options.logicalColumnCount; colIndex++) {
+            var th = options.columnsToRender[colIndex];
+            var colName = th === null || th === void 0 ? void 0 : th.getAttribute('data-kt-datatable-column');
+            var td = document.createElement('td');
+            var value = void 0;
+            if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
+                value = item[colName];
+            }
+            else if (Object.prototype.hasOwnProperty.call(item, colIndex)) {
+                value = item[colIndex];
+            }
+            else {
+                value = '';
+            }
+            td.innerHTML = value;
+            this.applyOriginalTdClass(input, td, rowIndex, colIndex);
+            this.applyDataRowAttributes(td, dataRowAttributes, colIndex);
+            row.appendChild(td);
+        }
+    };
+    KTDataTableDomTableRenderer.prototype.renderConfiguredColumns = function (input, row, item, rowIndex) {
+        var _this = this;
+        Object.keys(input.config.columns).forEach(function (key, colIndex) {
+            var td = document.createElement('td');
+            var columnDef = input.config.columns[key];
+            _this.applyOriginalTdClass(input, td, rowIndex, colIndex);
+            if (typeof columnDef.render === 'function') {
+                var result = columnDef.render.call(input.context, item[key], item, input.context);
+                if (result instanceof HTMLElement ||
+                    result instanceof DocumentFragment) {
+                    td.appendChild(result);
+                }
+                else if (typeof result === 'string') {
+                    td.innerHTML = result;
+                }
+            }
+            else {
+                td.textContent = item[key];
+            }
+            if (typeof columnDef.createdCell === 'function') {
+                columnDef.createdCell.call(input.context, td, item[key], item, row);
+            }
+            row.appendChild(td);
+        });
+    };
+    KTDataTableDomTableRenderer.prototype.applyOriginalTdClass = function (input, td, rowIndex, colIndex) {
+        if (input.originalTdClasses &&
+            input.originalTdClasses[rowIndex] &&
+            input.originalTdClasses[rowIndex][colIndex]) {
+            td.className = input.originalTdClasses[rowIndex][colIndex];
+        }
+    };
+    KTDataTableDomTableRenderer.prototype.applyDataRowAttributes = function (td, dataRowAttributes, colIndex) {
+        if (dataRowAttributes && dataRowAttributes[colIndex]) {
+            for (var attr in dataRowAttributes[colIndex]) {
+                td.setAttribute(attr, dataRowAttributes[colIndex][attr]);
+            }
+        }
+    };
+    return KTDataTableDomTableRenderer;
+}());
+exports.KTDataTableDomTableRenderer = KTDataTableDomTableRenderer;
 
 
 /***/ }),
@@ -5266,35 +6501,20 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDataTable = void 0;
 exports.initAllDataTables = initAllDataTables;
 var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
-var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
 var index_1 = __webpack_require__(/*! ../../index */ "./src/index.ts");
 var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
 var datatable_checkbox_1 = __webpack_require__(/*! ./datatable-checkbox */ "./src/components/datatable/datatable-checkbox.ts");
 var datatable_sort_1 = __webpack_require__(/*! ./datatable-sort */ "./src/components/datatable/datatable-sort.ts");
+var datatable_event_adapter_1 = __webpack_require__(/*! ./datatable-event-adapter */ "./src/components/datatable/datatable-event-adapter.ts");
+var datatable_local_provider_1 = __webpack_require__(/*! ./datatable-local-provider */ "./src/components/datatable/datatable-local-provider.ts");
+var datatable_remote_provider_1 = __webpack_require__(/*! ./datatable-remote-provider */ "./src/components/datatable/datatable-remote-provider.ts");
+var datatable_state_store_1 = __webpack_require__(/*! ./datatable-state-store */ "./src/components/datatable/datatable-state-store.ts");
+var datatable_pagination_renderer_1 = __webpack_require__(/*! ./datatable-pagination-renderer */ "./src/components/datatable/datatable-pagination-renderer.ts");
+var datatable_table_renderer_1 = __webpack_require__(/*! ./datatable-table-renderer */ "./src/components/datatable/datatable-table-renderer.ts");
 /**
  * Custom DataTable plugin class with server-side API, pagination, and sorting
  * @classdesc A custom KTComponent class that integrates server-side API, pagination, and sorting functionality into a table.
@@ -5314,18 +6534,9 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._originalTheadClass = ''; // Store original thead class
         _this._originalTdClasses = []; // Store original td classes as a 2D array [row][col]
         _this._originalThClasses = []; // Store original th classes
+        _this._cleanupCallbacks = [];
         _this._data = [];
         _this._isFetching = false;
-        /**
-         * AbortController for cancelling previous fetch requests
-         * Used to prevent race conditions when multiple requests are triggered rapidly
-         */
-        _this._abortController = null;
-        /**
-         * Request ID counter for tracking request sequence
-         * Used to detect and ignore stale responses from older requests
-         */
-        _this._requestId = 0;
         if (data_1.default.has(element, _this._name)) {
             // Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
             var existing = KTDataTable.getInstance(element);
@@ -5337,21 +6548,22 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._defaultConfig = _this._initDefaultConfig(config);
         _this._init(element);
         _this._buildConfig();
+        _this._stateStore = new datatable_state_store_1.KTDataTableConfigStateStore(_this._config);
+        _this._eventAdapter = (0, datatable_event_adapter_1.createDataTableEventAdapter)(_this._fireEvent.bind(_this), _this._dispatchEvent.bind(_this));
         // Store the instance directly on the element
         KTDataTable.asElementWithInstance(element).instance = _this;
         _this._initElements();
+        _this._tableRenderer = new datatable_table_renderer_1.KTDataTableDomTableRenderer();
+        _this._paginationRenderer = new datatable_pagination_renderer_1.KTDataTableDomPaginationRenderer();
+        _this._initDataProviders();
         // Initialize checkbox handler
-        _this._checkbox = (0, datatable_checkbox_1.createCheckboxHandler)(_this._element, _this._config, function (eventName, eventData) {
-            _this._fireEvent(eventName, eventData);
-            _this._dispatchEvent(eventName, eventData);
-        });
+        _this._checkbox = (0, datatable_checkbox_1.createCheckboxHandler)(_this._element, _this._config, _this._emit.bind(_this));
         // Initialize sort handler
         _this._sortHandler = (0, datatable_sort_1.createSortHandler)(_this._config, _this._theadElement, function () { return ({
             sortField: _this.getState().sortField,
             sortOrder: _this.getState().sortOrder,
         }); }, function (field, order) {
-            _this._config._state.sortField = field;
-            _this._config._state.sortOrder = order;
+            _this._stateStore.setSort(field, order);
         }, _this._fireEvent.bind(_this), _this._dispatchEvent.bind(_this), _this._updateData.bind(_this));
         _this._sortHandler.initSort();
         if (_this._config.stateSave === false) {
@@ -5361,8 +6573,7 @@ var KTDataTable = /** @class */ (function (_super) {
             _this._loadState();
         }
         _this._updateData();
-        _this._fireEvent('init');
-        _this._dispatchEvent('init');
+        _this._emit('init');
         return _this;
     }
     KTDataTable.asElementWithInstance = function (element) {
@@ -5371,6 +6582,30 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.asSearchElementWithDebounce = function (element) {
         return element;
     };
+    KTDataTable.prototype._emit = function (eventName, eventData) {
+        this._eventAdapter.emit(eventName, eventData);
+    };
+    KTDataTable.prototype._initDataProviders = function () {
+        var _this = this;
+        this._localProvider = new datatable_local_provider_1.KTDataTableLocalDataProvider({
+            config: this._config,
+            elements: function () { return ({
+                tableElement: _this._tableElement,
+                tbodyElement: _this._tbodyElement,
+                theadElement: _this._theadElement,
+            }); },
+            getLogicalColumnCount: this._getLogicalColumnCount.bind(this),
+            storeOriginalClasses: this._storeOriginalClasses.bind(this),
+            stateStore: this._stateStore,
+        });
+        this._remoteProvider = new datatable_remote_provider_1.KTDataTableRemoteDataProvider({
+            config: this._config,
+            createUrl: this._createUrl.bind(this),
+            eventAdapter: this._eventAdapter,
+            noticeOnTable: this._noticeOnTable.bind(this),
+            stateStore: this._stateStore,
+        });
+    };
     /**
      * Initialize default configuration for the datatable
      * @param config User-provided configuration options
@@ -5640,32 +6875,39 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._updateData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var result, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         if (this._isFetching)
                             return [2 /*return*/]; // Prevent duplicate fetches
                         this._isFetching = true;
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, , 8, 9]);
+                        _b.trys.push([1, , 8, 9]);
                         this._showSpinner(); // Show spinner before fetching data
-                        if (!(typeof this._config.apiEndpoint === 'undefined')) return [3 /*break*/, 4];
-                        return [4 /*yield*/, this._fetchDataFromLocal()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, this._finalize()];
+                        this._emit('fetch');
+                        if (!(typeof this._config.apiEndpoint === 'undefined')) return [3 /*break*/, 2];
+                        _a = this._localProvider.fetchSync();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, this._remoteProvider.fetch()];
                     case 3:
-                        _a.sent();
-                        return [3 /*break*/, 7];
-                    case 4: return [4 /*yield*/, this._fetchDataFromServer()];
+                        _a = _b.sent();
+                        _b.label = 4;
+                    case 4:
+                        result = _a;
+                        if (!!result.skipped) return [3 /*break*/, 6];
+                        this._data = result.data;
+                        this._stateStore.patchState({ totalItems: result.totalItems });
+                        return [4 /*yield*/, this._draw()];
                     case 5:
-                        _a.sent();
-                        return [4 /*yield*/, this._finalize()];
-                    case 6:
-                        _a.sent();
-                        _a.label = 7;
-                    case 7: return [3 /*break*/, 9];
+                        _b.sent();
+                        this._emit('fetched');
+                        _b.label = 6;
+                    case 6: return [4 /*yield*/, this._finalize()];
+                    case 7:
+                        _b.sent();
+                        return [3 /*break*/, 9];
                     case 8:
                         // Finally block now correctly executes after promises resolve, not immediately
                         this._isFetching = false;
@@ -5690,367 +6932,65 @@ var KTDataTable = /** @class */ (function (_super) {
         this._attachSearchEvent();
         if (typeof index_1.default !== 'undefined') {
             index_1.default.init();
-        }
-        /**
-         * Hide spinner
-         */
-        this._hideSpinner();
-    };
-    /**
-     * Attach search event to the search input element
-     * @returns {void}
-     */
-    KTDataTable.prototype._attachSearchEvent = function () {
-        var _this = this;
-        var tableId = this._tableId();
-        var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
-        // Get search state
-        var search = this.getState().search;
-        // Set search value
-        if (searchElement) {
-            searchElement.value =
-                search === undefined || search === null
-                    ? ''
-                    : typeof search === 'string'
-                        ? search
-                        : String(search);
-        }
-        if (searchElement) {
-            // Check if a debounced search function already exists
-            var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
-            if (searchWithDebounce._debouncedSearch) {
-                // Remove the existing debounced event listener
-                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
-            }
-            // Create a new debounced search function
-            var debouncedSearch = this._debounce(function () {
-                _this.search(searchElement.value);
-            }, this._config.search.delay);
-            // Store the new debounced function as a property of the element
-            searchWithDebounce._debouncedSearch = debouncedSearch;
-            // Add the new debounced event listener
-            searchElement.addEventListener('keyup', debouncedSearch);
-        }
-    };
-    /**
-     * Fetch data from the DOM
-     * Fetch data from the table element and save it to the `originalData` state property.
-     * This method is used when the data is not fetched from the server via an API endpoint.
-     */
-    KTDataTable.prototype._fetchDataFromLocal = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, sortField, sortOrder, page, pageSize, search, originalData, _b, originalData_1, originalDataAttributes, _temp, searchTerm, startIndex, endIndex;
-            var _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        this._fireEvent('fetch');
-                        this._dispatchEvent('fetch');
-                        _a = this.getState(), sortField = _a.sortField, sortOrder = _a.sortOrder, page = _a.page, pageSize = _a.pageSize, search = _a.search;
-                        originalData = this.getState().originalData;
-                        // If the table element or the original data is not defined, bail
-                        if (!this._tableElement ||
-                            originalData === undefined ||
-                            this._tableConfigInvalidate() ||
-                            this._localTableHeaderInvalidate() ||
-                            this._localTableContentInvalidate()) {
-                            this._deleteState();
-                            _b = this._localExtractTableContent(), originalData_1 = _b.originalData, originalDataAttributes = _b.originalDataAttributes;
-                            this._config._state.originalData = originalData_1;
-                            this._config._state.originalDataAttributes = originalDataAttributes;
-                        }
-                        // Update the original data variable
-                        originalData = this.getState().originalData;
-                        _temp = (this._data = __spreadArray([], originalData, true));
-                        if (search) {
-                            searchTerm = typeof search === 'string' ? search : '';
-                            _temp = this._data = this._config.search.callback.call(this, this._data, searchTerm);
-                        }
-                        // If sorting is defined, sort the data
-                        if (sortField !== undefined &&
-                            sortOrder !== undefined &&
-                            sortOrder !== '') {
-                            if (typeof this._config.sort.callback === 'function') {
-                                this._data = this._config.sort.callback.call(this, this._data, sortField, sortOrder);
-                            }
-                        }
-                        // If there is data, slice it to the current page size
-                        if (((_c = this._data) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                            startIndex = (page - 1) * pageSize;
-                            endIndex = startIndex + pageSize;
-                            this._data = this._data.slice(startIndex, endIndex);
-                        }
-                        // Determine number of total rows
-                        this._config._state.totalItems = _temp.length;
-                        // Draw the data
-                        return [4 /*yield*/, this._draw()];
-                    case 1:
-                        // Draw the data
-                        _d.sent();
-                        this._fireEvent('fetched');
-                        this._dispatchEvent('fetched');
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Checks if the table content has been invalidated by comparing the current checksum of the table body
-     * with the stored checksum in the state. If the checksums are different, the state is updated with the
-     * new checksum and `true` is returned. Otherwise, `false` is returned.
-     *
-     * @returns {boolean} `true` if the table content has been invalidated, `false` otherwise.
-     */
-    KTDataTable.prototype._localTableContentInvalidate = function () {
-        var checksum = utils_1.default.checksum(JSON.stringify(this._tbodyElement.innerHTML));
-        if (this.getState()._contentChecksum !== checksum) {
-            this._config._state._contentChecksum = checksum;
-            return true;
-        }
-        return false;
-    };
-    KTDataTable.prototype._tableConfigInvalidate = function () {
-        // Remove _data and _state from config
-        var _a = this._config, _state = _a._state, restConfig = __rest(_a, ["_state"]);
-        var checksum = utils_1.default.checksum(JSON.stringify(restConfig));
-        if (_state._configChecksum !== checksum) {
-            this._config._state._configChecksum = checksum;
-            return true;
-        }
-        return false;
-    };
-    /**
-     * Extract the table content and returns it as an object containing an array of original data and an array of original data attributes.
-     *
-     * @returns {{originalData: T[], originalDataAttributes: KTDataTableAttributeInterface[]}} - An object containing an array of original data and an array of original data attributes.
-     */
-    KTDataTable.prototype._localExtractTableContent = function () {
-        var originalData = [];
-        var originalDataAttributes = [];
-        this._storeOriginalClasses();
-        var rows = this._tbodyElement.querySelectorAll('tr');
-        // Filter th elements to only include those with data-kt-datatable-column attribute
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var ths = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
-        });
-        rows.forEach(function (row) {
-            var dataRow = {};
-            var dataRowAttribute = {};
-            row.querySelectorAll('td').forEach(function (td, index) {
-                var _a, _b, _c;
-                var colName = (_a = ths[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-kt-datatable-column');
-                if (colName) {
-                    dataRow[colName] = (_b = td.innerHTML) === null || _b === void 0 ? void 0 : _b.trim();
-                }
-                else {
-                    // Store the original HTML for fallback
-                    dataRow[index] = (_c = td.innerHTML) === null || _c === void 0 ? void 0 : _c.trim();
-                }
-            });
-            if (Object.keys(dataRow).length > 0) {
-                originalData.push(dataRow);
-                originalDataAttributes.push(dataRowAttribute);
-            }
-        });
-        return { originalData: originalData, originalDataAttributes: originalDataAttributes };
-    };
-    /**
-     * Check if the table header is invalidated
-     * @returns {boolean} - Returns true if the table header is invalidated, false otherwise
-     */
-    KTDataTable.prototype._localTableHeaderInvalidate = function () {
-        var originalData = this.getState().originalData;
-        var totalColumns = originalData.length
-            ? Object.keys(originalData[0]).length
-            : 0;
-        // Count th elements with data-kt-datatable-column; when none (e.g. multi-row headers), use logical column count so we don't falsely invalidate
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var thsWithColumn = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
-        });
-        var currentTableHeaders = thsWithColumn.length > 0
-            ? thsWithColumn.length
-            : this._getLogicalColumnCount();
-        return currentTableHeaders !== totalColumns;
-    };
-    /**
-     * Returns the logical data column count (number of data columns), used for multi-row headers
-     * where querySelectorAll('th') would overcount. Prefers state.originalData, then first tbody row td count.
-     * @returns {number} Number of data columns, or 0 if unknown
-     */
-    KTDataTable.prototype._getLogicalColumnCount = function () {
-        var originalData = this.getState().originalData;
-        if (originalData && originalData.length > 0) {
-            return Object.keys(originalData[0]).length;
-        }
-        if (this._tbodyElement) {
-            var firstRow = this._tbodyElement.querySelector('tr');
-            if (firstRow) {
-                return firstRow.querySelectorAll('td').length;
-            }
-        }
-        return 0;
-    };
-    /**
-     * Fetch data from the server
-     */
-    KTDataTable.prototype._fetchDataFromServer = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var currentRequestId, queryParams, response, error_1, responseData, error_2;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        currentRequestId = ++this._requestId;
-                        this._fireEvent('fetch');
-                        this._dispatchEvent('fetch');
-                        queryParams = this._getQueryParamsForFetchRequest();
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, this._performFetchRequest(queryParams)];
-                    case 2:
-                        response = _a.sent();
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_1 = _a.sent();
-                        // Silently ignore AbortError - request was cancelled
-                        if (error_1.name === 'AbortError') {
-                            return [2 /*return*/];
-                        }
-                        throw error_1;
-                    case 4:
-                        // Check if this response is stale (a newer request has been initiated)
-                        if (currentRequestId !== this._requestId) {
-                            // Ignore stale response - a more recent request is in progress or has completed
-                            return [2 /*return*/];
-                        }
-                        responseData = null;
-                        _a.label = 5;
-                    case 5:
-                        _a.trys.push([5, 7, , 8]);
-                        return [4 /*yield*/, response.json()];
-                    case 6:
-                        responseData = _a.sent();
-                        return [3 /*break*/, 8];
-                    case 7:
-                        error_2 = _a.sent();
-                        // Fire event with complete error context for application handling
-                        this._fireEvent('parseError', {
-                            response: response,
-                            error: String(error_2),
-                            status: response.status,
-                            statusText: response.statusText,
-                        });
-                        this._dispatchEvent('parseError', {
-                            response: response,
-                            error: String(error_2),
-                            status: response.status,
-                            statusText: response.statusText,
-                        });
-                        return [2 /*return*/];
-                    case 8:
-                        // Double-check request ID after JSON parsing (additional safety)
-                        if (currentRequestId !== this._requestId) {
-                            return [2 /*return*/];
-                        }
-                        this._fireEvent('fetched', { response: responseData });
-                        this._dispatchEvent('fetched', { response: responseData });
-                        // Use the mapResponse function to transform the data if provided
-                        if (typeof this._config.mapResponse === 'function') {
-                            responseData = this._config.mapResponse.call(this, responseData);
-                        }
-                        this._data = responseData.data;
-                        this._config._state.totalItems = responseData.totalCount;
-                        return [4 /*yield*/, this._draw()];
-                    case 9:
-                        _a.sent();
-                        this._fireEvent('fetched');
-                        this._dispatchEvent('fetched');
-                        return [2 /*return*/];
-                }
-            });
-        });
+        }
+        /**
+         * Hide spinner
+         */
+        this._hideSpinner();
     };
     /**
-     * Get the query params for a fetch request
-     * @returns The query params for the fetch request
+     * Attach search event to the search input element
+     * @returns {void}
      */
-    KTDataTable.prototype._getQueryParamsForFetchRequest = function () {
-        // Get the current state of the datatable
-        var _a = this.getState(), page = _a.page, pageSize = _a.pageSize, sortField = _a.sortField, sortOrder = _a.sortOrder, filters = _a.filters, search = _a.search;
-        // Create a new URLSearchParams object to store the query params
-        var queryParams = new URLSearchParams();
-        // Add the current page number and page size to the query params
-        queryParams.set('page', String(page));
-        queryParams.set('size', String(pageSize));
-        // If there is a sort order and field set, add them to the query params
-        if (sortOrder !== undefined) {
-            queryParams.set('sortOrder', String(sortOrder));
-        }
-        if (sortField !== undefined) {
-            queryParams.set('sortField', String(sortField));
+    KTDataTable.prototype._attachSearchEvent = function () {
+        var _this = this;
+        var tableId = this._tableId();
+        var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
+        // Get search state
+        var search = this.getState().search;
+        // Set search value
+        if (searchElement) {
+            searchElement.value =
+                search === undefined || search === null
+                    ? ''
+                    : typeof search === 'string'
+                        ? search
+                        : String(search);
         }
-        // If there are any filters set, add them to the query params
-        if (Array.isArray(filters) && filters.length) {
-            queryParams.set('filters', JSON.stringify(filters.map(function (filter) { return ({
-                // Map the filter object to a simpler object with just the necessary properties
-                column: filter.column,
-                type: filter.type,
-                value: filter.value,
-            }); })));
+        if (searchElement) {
+            // Check if a debounced search function already exists
+            var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
+            if (searchWithDebounce._debouncedSearch) {
+                // Remove the existing debounced event listener
+                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
+            }
+            // Create a new debounced search function
+            var debouncedSearch = this._debounce(function () {
+                _this.search(searchElement.value);
+            }, this._config.search.delay);
+            // Store the new debounced function as a property of the element
+            searchWithDebounce._debouncedSearch = debouncedSearch;
+            // Add the new debounced event listener
+            searchElement.addEventListener('keyup', debouncedSearch);
         }
-        if (search) {
-            queryParams.set('search', typeof search === 'object' ? JSON.stringify(search) : search);
+    };
+    /**
+     * Returns the logical data column count (number of data columns), used for multi-row headers
+     * where querySelectorAll('th') would overcount. Prefers state.originalData, then first tbody row td count.
+     * @returns {number} Number of data columns, or 0 if unknown
+     */
+    KTDataTable.prototype._getLogicalColumnCount = function () {
+        var originalData = this.getState().originalData;
+        if (originalData && originalData.length > 0) {
+            return Object.keys(originalData[0]).length;
         }
-        // If a mapRequest function is provided, call it with the query params object
-        if (typeof this._config.mapRequest === 'function') {
-            queryParams = this._config.mapRequest.call(this, queryParams);
+        if (this._tbodyElement) {
+            var firstRow = this._tbodyElement.querySelector('tr');
+            if (firstRow) {
+                return firstRow.querySelectorAll('td').length;
+            }
         }
-        // Return the query params object
-        return queryParams;
-    };
-    KTDataTable.prototype._performFetchRequest = function (queryParams) {
-        return __awaiter(this, void 0, void 0, function () {
-            var requestMethod, requestBody, apiEndpointWithQueryParams;
-            var _this = this;
-            return __generator(this, function (_a) {
-                requestMethod = this._config.requestMethod;
-                requestBody = undefined;
-                // Cancel previous request to prevent race conditions
-                if (this._abortController) {
-                    this._abortController.abort();
-                }
-                // Create new AbortController for this request
-                this._abortController = new AbortController();
-                // If the request method is POST, send the query params as the request body
-                if (requestMethod === 'POST') {
-                    requestBody = queryParams;
-                }
-                else if (requestMethod === 'GET') {
-                    apiEndpointWithQueryParams = this._createUrl(this._config.apiEndpoint);
-                    apiEndpointWithQueryParams.search = queryParams.toString();
-                    this._config.apiEndpoint = apiEndpointWithQueryParams.toString();
-                }
-                return [2 /*return*/, fetch(this._config.apiEndpoint, __assign(__assign({ method: requestMethod, body: requestBody, headers: this._config.requestHeaders }, (this._config.requestCredentials && {
-                        credentials: this._config.requestCredentials,
-                    })), (this._abortController && { signal: this._abortController.signal }))).catch(function (error) {
-                        // Silently ignore AbortError - this is expected when requests are cancelled
-                        if (error.name === 'AbortError') {
-                            return Promise.reject(error);
-                        }
-                        // Trigger an error event for non-abort errors
-                        _this._fireEvent('error', { error: error });
-                        _this._dispatchEvent('error', { error: error });
-                        _this._noticeOnTable('Error performing fetch request: ' + String(error));
-                        throw error;
-                    })];
-            });
-        });
+        return 0;
     };
     /**
      * Creates a complete URL from a relative path or a full URL.
@@ -6086,10 +7026,10 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._draw = function () {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                this._config._state.totalPages =
-                    Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0;
-                this._fireEvent('draw');
-                this._dispatchEvent('draw');
+                this._stateStore.patchState({
+                    totalPages: Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0,
+                });
+                this._emit('draw');
                 this._dispose();
                 // Update the table and pagination controls
                 if (this._theadElement && this._tbodyElement) {
@@ -6098,8 +7038,7 @@ var KTDataTable = /** @class */ (function (_super) {
                 if (this._infoElement && this._paginationElement) {
                     this._updatePagination();
                 }
-                this._fireEvent('drew');
-                this._dispatchEvent('drew');
+                this._emit('drew');
                 // Spinner is hidden in _finalize() to ensure it stays visible until the entire request completes
                 // Removed duplicate _hideSpinner() call here to prevent premature hiding
                 if (this._config.stateSave) {
@@ -6114,115 +7053,18 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {HTMLTableSectionElement} The new table body element
      */
     KTDataTable.prototype._updateTable = function () {
-        // Clear the existing table contents using a more efficient method
-        while (this._tableElement.tBodies.length) {
-            this._tableElement.removeChild(this._tableElement.tBodies[0]);
-        }
-        // Create the table body with the new data
-        var tbodyElement = this._tableElement.createTBody();
-        // Apply the original class to the new tbody element
-        if (this._originalTbodyClass) {
-            tbodyElement.className = this._originalTbodyClass;
-        }
-        this._updateTableContent(tbodyElement);
-        return tbodyElement;
-    };
-    /**
-     * Update the table content
-     * @param tbodyElement The table body element
-     * @returns {HTMLTableSectionElement} The updated table body element
-     */
-    KTDataTable.prototype._updateTableContent = function (tbodyElement) {
-        var _this = this;
-        var fragment = document.createDocumentFragment();
-        tbodyElement.textContent = ''; // Clear the tbody element
-        if (this._data.length === 0) {
-            this._noticeOnTable(this._config.infoEmpty || '');
-            return tbodyElement;
-        }
-        // Filter th elements to only include those with data-kt-datatable-column attribute
-        // This prevents creating blank td elements for merged header cells (colspan/rowspan)
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var ths = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
-        });
-        // When no th has data-kt-datatable-column (e.g. multi-row headers), use logical column count from tbody so we don't overcount thead cells
-        var columnsToRender = ths.length > 0 ? ths : [];
-        var logicalColumnCount = ths.length > 0 ? ths.length : this._getLogicalColumnCount();
-        this._data.forEach(function (item, rowIndex) {
-            var row = document.createElement('tr');
-            // Apply original tr class if available
-            if (_this._originalTrClasses && _this._originalTrClasses[rowIndex]) {
-                row.className = _this._originalTrClasses[rowIndex];
-            }
-            if (!_this._config.columns) {
-                var dataRowAttributes = _this.getState().originalDataAttributes
-                    ? _this.getState().originalDataAttributes[rowIndex]
-                    : null;
-                for (var colIndex = 0; colIndex < logicalColumnCount; colIndex++) {
-                    var th = columnsToRender[colIndex];
-                    var colName = th === null || th === void 0 ? void 0 : th.getAttribute('data-kt-datatable-column');
-                    var td = document.createElement('td');
-                    var value = void 0;
-                    if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
-                        value = item[colName];
-                    }
-                    else if (Object.prototype.hasOwnProperty.call(item, colIndex)) {
-                        value = item[colIndex];
-                    }
-                    else {
-                        value = '';
-                    }
-                    td.innerHTML = value;
-                    // Apply original td class if available
-                    if (_this._originalTdClasses &&
-                        _this._originalTdClasses[rowIndex] &&
-                        _this._originalTdClasses[rowIndex][colIndex]) {
-                        td.className = _this._originalTdClasses[rowIndex][colIndex];
-                    }
-                    if (dataRowAttributes && dataRowAttributes[colIndex]) {
-                        for (var attr in dataRowAttributes[colIndex]) {
-                            td.setAttribute(attr, dataRowAttributes[colIndex][attr]);
-                        }
-                    }
-                    row.appendChild(td);
-                }
-            }
-            else {
-                Object.keys(_this._config.columns).forEach(function (key, colIndex) {
-                    var td = document.createElement('td');
-                    var columnDef = _this._config.columns[key];
-                    // Apply original td class if available
-                    if (_this._originalTdClasses &&
-                        _this._originalTdClasses[rowIndex] &&
-                        _this._originalTdClasses[rowIndex][colIndex]) {
-                        td.className = _this._originalTdClasses[rowIndex][colIndex];
-                    }
-                    if (typeof columnDef.render === 'function') {
-                        var result = columnDef.render.call(_this, item[key], item, _this);
-                        if (result instanceof HTMLElement ||
-                            result instanceof DocumentFragment) {
-                            td.appendChild(result);
-                        }
-                        else if (typeof result === 'string') {
-                            td.innerHTML = result;
-                        }
-                    }
-                    else {
-                        td.textContent = item[key];
-                    }
-                    if (typeof columnDef.createdCell === 'function') {
-                        columnDef.createdCell.call(_this, td, item[key], item, row);
-                    }
-                    row.appendChild(td);
-                });
-            }
-            fragment.appendChild(row);
+        return this._tableRenderer.render({
+            config: this._config,
+            context: this,
+            data: this._data,
+            getLogicalColumnCount: this._getLogicalColumnCount.bind(this),
+            getState: this.getState.bind(this),
+            originalTbodyClass: this._originalTbodyClass,
+            originalTrClasses: this._originalTrClasses,
+            originalTdClasses: this._originalTdClasses,
+            tableElement: this._tableElement,
+            theadElement: this._theadElement,
         });
-        tbodyElement.appendChild(fragment);
-        return tbodyElement;
     };
     /**
      * Show a notice on the table
@@ -6231,66 +7073,22 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._noticeOnTable = function (message) {
         if (message === void 0) { message = ''; }
-        var row = this._tableElement.tBodies[0].insertRow();
-        var cell = row.insertCell();
-        var logicalCount = this._getLogicalColumnCount();
-        // Use logical column count so multi-row headers don't overcount; fallback to 1 when 0 so message still displays
-        cell.colSpan = logicalCount > 0 ? logicalCount : 1;
-        cell.innerHTML = message;
+        this._tableRenderer.notice(this._tableElement, this._getLogicalColumnCount.bind(this), message);
     };
     KTDataTable.prototype._updatePagination = function () {
-        this._removeChildElements(this._sizeElement);
-        this._createPageSizeControls(this._sizeElement);
-        this._removeChildElements(this._paginationElement);
-        this._createPaginationControls(this._infoElement, this._paginationElement);
-    };
-    /**
-     * Removes all child elements from the given container element.
-     * @param container The container element to remove the child elements from.
-     */
-    KTDataTable.prototype._removeChildElements = function (container) {
-        if (!container) {
-            return;
-        }
-        // Loop through all child elements of the container and remove them one by one
-        while (container.firstChild) {
-            // Remove the first child element (which is the first element in the list of child elements)
-            container.removeChild(container.firstChild);
-        }
-    };
-    /**
-     * Creates a container element for the items per page selector.
-     * @param _sizeElement The element to create the page size controls in.
-     * @returns The container element.
-     */
-    KTDataTable.prototype._createPageSizeControls = function (_sizeElement) {
-        var _this = this;
-        // If no element is provided, return early
-        if (!_sizeElement) {
-            return _sizeElement;
+        var cleanup = this._paginationRenderer.render({
+            config: this._config,
+            dataLength: this._data.length,
+            infoElement: this._infoElement,
+            paginateData: this._paginateData.bind(this),
+            paginationElement: this._paginationElement,
+            reloadPageSize: this._reloadPageSize.bind(this),
+            sizeElement: this._sizeElement,
+            state: this.getState(),
+        });
+        if (typeof cleanup === 'function') {
+            this._cleanupCallbacks.push(cleanup);
         }
-        // Wait for the element to be attached to the DOM
-        setTimeout(function () {
-            // Create <option> elements for each page size option
-            var options = _this._config.pageSizes.map(function (size) {
-                var option = document.createElement('option');
-                option.value = String(size);
-                option.text = String(size);
-                option.selected = _this.getState().pageSize === size;
-                return option;
-            });
-            // Add the <option> elements to the provided element
-            _sizeElement.append.apply(_sizeElement, options);
-        }, 100);
-        // Create an event listener for the "change" event on the element
-        var _pageSizeControlsEvent = function (event) {
-            // When the element changes, reload the page with the new page size and page number 1
-            _this._reloadPageSize(Number(event.target.value), 1);
-        };
-        // Bind the event listener to the component instance
-        _sizeElement.onchange = _pageSizeControlsEvent.bind(this);
-        // Return the element
-        return _sizeElement;
     };
     /**
      * Reloads the data with the specified page size and optional page number.
@@ -6300,120 +7098,10 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._reloadPageSize = function (pageSize, page) {
         if (page === void 0) { page = 1; }
         // Update the page size and page number in the state
-        this._config._state.pageSize = pageSize;
-        this._config._state.page = page;
+        this._stateStore.setPageSize(pageSize, page);
         // Update the data with the new page size and page number
         this._updateData();
     };
-    /**
-     * Creates the pagination controls for the component.
-     * @param _infoElement The element to set the info text in.
-     * @param _paginationElement The element to create the pagination controls in.
-     * @return {HTMLElement} The element containing the pagination controls.
-     */
-    KTDataTable.prototype._createPaginationControls = function (_infoElement, _paginationElement) {
-        if (!_infoElement || !_paginationElement || this._data.length === 0) {
-            return null;
-        }
-        this._setPaginationInfoText(_infoElement);
-        var paginationContainer = this._createPaginationContainer(_paginationElement);
-        if (paginationContainer) {
-            this._createPaginationButtons(paginationContainer);
-        }
-        return paginationContainer;
-    };
-    /**
-     * Sets the info text for the pagination controls.
-     * @param _infoElement The element to set the info text in.
-     */
-    KTDataTable.prototype._setPaginationInfoText = function (_infoElement) {
-        _infoElement.textContent = this._config.info
-            .replace('{start}', (this.getState().page - 1) * this.getState().pageSize + 1 + '')
-            .replace('{end}', Math.min(this.getState().page * this.getState().pageSize, this.getState().totalItems) + '')
-            .replace('{total}', this.getState().totalItems + '');
-    };
-    /**
-     * Creates the container element for the pagination controls.
-     * @param _paginationElement The element to create the pagination controls in.
-     * @return {HTMLElement} The container element.
-     */
-    KTDataTable.prototype._createPaginationContainer = function (_paginationElement) {
-        // No longer create a wrapping div. Just return the pagination element itself.
-        return _paginationElement;
-    };
-    /**
-     * Creates the pagination buttons for the component.
-     * @param paginationContainer The container element for the pagination controls.
-     */
-    KTDataTable.prototype._createPaginationButtons = function (paginationContainer) {
-        var _this = this;
-        var _a = this.getState(), currentPage = _a.page, totalPages = _a.totalPages;
-        var _b = this._config.pagination, previous = _b.previous, next = _b.next, number = _b.number, more = _b.more;
-        // Helper function to create a button
-        var createButton = function (text, className, disabled, handleClick) {
-            var button = document.createElement('button');
-            button.className = className;
-            button.innerHTML = text;
-            button.disabled = disabled;
-            button.onclick = handleClick;
-            return button;
-        };
-        // Add Previous Button
-        paginationContainer.appendChild(createButton(previous.text, "".concat(previous.class).concat(currentPage === 1 ? ' disabled' : ''), currentPage === 1, function () { return _this._paginateData(currentPage - 1); }));
-        // Calculate range of pages
-        var pageMoreEnabled = this._config.pageMore;
-        if (pageMoreEnabled) {
-            var maxButtons = this._config.pageMoreLimit;
-            var range_1 = this._calculatePageRange(currentPage, totalPages, maxButtons);
-            // Add start ellipsis
-            if (range_1.start > 1) {
-                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
-                    return _this._paginateData(Math.max(1, range_1.start - 1));
-                }));
-            }
-            var _loop_1 = function (i) {
-                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return _this._paginateData(i); }));
-            };
-            // Add page buttons
-            for (var i = range_1.start; i <= range_1.end; i++) {
-                _loop_1(i);
-            }
-            // Add end ellipsis
-            if (pageMoreEnabled && range_1.end < totalPages) {
-                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
-                    return _this._paginateData(Math.min(totalPages, range_1.end + 1));
-                }));
-            }
-        }
-        else {
-            var _loop_2 = function (i) {
-                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return _this._paginateData(i); }));
-            };
-            // Add page buttons
-            for (var i = 1; i <= totalPages; i++) {
-                _loop_2(i);
-            }
-        }
-        // Add Next Button
-        paginationContainer.appendChild(createButton(next.text, "".concat(next.class).concat(currentPage === totalPages ? ' disabled' : ''), currentPage === totalPages, function () { return _this._paginateData(currentPage + 1); }));
-    };
-    // New helper method to calculate page range
-    KTDataTable.prototype._calculatePageRange = function (currentPage, totalPages, maxButtons) {
-        var startPage, endPage;
-        var halfMaxButtons = Math.floor(maxButtons / 2);
-        if (totalPages <= maxButtons) {
-            startPage = 1;
-            endPage = totalPages;
-        }
-        else {
-            startPage = Math.max(currentPage - halfMaxButtons, 1);
-            endPage = Math.min(startPage + maxButtons - 1, totalPages);
-            if (endPage - startPage < maxButtons - 1) {
-                startPage = Math.max(endPage - maxButtons + 1, 1);
-            }
-        }
-        return { start: startPage, end: endPage };
-    };
     /**
      * Method for handling pagination
      * @param page - The page number to navigate to
@@ -6422,10 +7110,9 @@ var KTDataTable = /** @class */ (function (_super) {
         if (page < 1 || !Number.isInteger(page)) {
             return;
         }
-        this._fireEvent('pagination', { page: page });
-        this._dispatchEvent('pagination', { page: page });
+        this._emit('pagination', { page: page });
         if (page >= 1 && page <= this.getState().totalPages) {
-            this._config._state.page = page;
+            this._stateStore.setPage(page);
             this._updateData();
         }
     };
@@ -6464,8 +7151,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {void}
      */
     KTDataTable.prototype._saveState = function () {
-        this._fireEvent('stateSave');
-        this._dispatchEvent('stateSave');
+        this._emit('stateSave');
         var ns = this._tableNamespace();
         if (ns) {
             localStorage.setItem(ns, JSON.stringify(this.getState()));
@@ -6482,7 +7168,7 @@ var KTDataTable = /** @class */ (function (_super) {
         try {
             var state = JSON.parse(stateString);
             if (state)
-                this._config._state = state;
+                this._stateStore.replaceState(state);
             return state;
         }
         catch (_a) { }
@@ -6529,16 +7215,17 @@ var KTDataTable = /** @class */ (function (_super) {
      * This method is called before re-rendering or when disposing the component.
      */
     KTDataTable.prototype._dispose = function () {
+        this._cleanupCallbacks.forEach(function (cleanup) { return cleanup(); });
+        this._cleanupCallbacks = [];
         // --- 1. Remove search input event listener (debounced) ---
         var tableId = this._tableId();
         var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
         if (searchElement) {
             var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
-            if (!searchWithDebounce._debouncedSearch) {
-                return;
+            if (searchWithDebounce._debouncedSearch) {
+                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
+                delete searchWithDebounce._debouncedSearch;
             }
-            searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
-            delete searchWithDebounce._debouncedSearch;
         }
         // --- 2. Remove page size dropdown event listener ---
         if (this._sizeElement && this._sizeElement.onchange) {
@@ -6606,23 +7293,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {KTDataTableStateInterface} The current state of the table.
      */
     KTDataTable.prototype.getState = function () {
-        return __assign({ 
-            /**
-             * The current page number.
-             */
-            page: 1, 
-            /**
-             * The field that the data is sorted by.
-             */
-            sortField: null, 
-            /**
-             * The sort order (ascending or descending).
-             */
-            sortOrder: '', 
-            /**
-             * The number of rows to display per page.
-             */
-            pageSize: this._config.pageSize, filters: [] }, this._config._state);
+        return this._stateStore.getState();
     };
     /**
      * Sorts the data in the table by the specified field.
@@ -6633,10 +7304,8 @@ var KTDataTable = /** @class */ (function (_super) {
         var state = this.getState();
         var sortOrder = this._sortHandler.toggleSortOrder(state.sortField, state.sortOrder, field);
         this._sortHandler.setSortIcon(field, sortOrder);
-        this._config._state.sortField = field;
-        this._config._state.sortOrder = sortOrder;
-        this._fireEvent('sort', { field: field, order: sortOrder });
-        this._dispatchEvent('sort', { field: field, order: sortOrder });
+        this._stateStore.setSort(field, sortOrder);
+        this._emit('sort', { field: field, order: sortOrder });
         this._updateData();
     };
     /**
@@ -6669,15 +7338,13 @@ var KTDataTable = /** @class */ (function (_super) {
      * Triggers the 'reload' event and the 'kt.datatable.reload' custom event.
      */
     KTDataTable.prototype.reload = function () {
-        this._fireEvent('reload');
-        this._dispatchEvent('reload');
+        this._emit('reload');
         // Fetch the data from the server using the current sort and filter settings
         this._updateData();
     };
     KTDataTable.prototype.redraw = function (page) {
         if (page === void 0) { page = 1; }
-        this._fireEvent('redraw');
-        this._dispatchEvent('redraw');
+        this._emit('redraw');
         this._paginateData(page);
     };
     /**
@@ -6706,18 +7373,16 @@ var KTDataTable = /** @class */ (function (_super) {
      * @throws Error if the filter object is null or undefined.
      */
     KTDataTable.prototype.setFilter = function (filter) {
-        this._config._state.filters = __spreadArray(__spreadArray([], (this.getState().filters || []).filter(function (f) { return f.column !== filter.column; }), true), [
-            filter,
-        ], false);
-        this._config._state.page = 1;
+        this._stateStore.setFilter(filter);
         return this;
     };
     KTDataTable.prototype.dispose = function () {
+        var _a;
+        (_a = this._remoteProvider) === null || _a === void 0 ? void 0 : _a.dispose();
         this._dispose();
     };
     KTDataTable.prototype.search = function (query) {
-        this._config._state.search = query;
-        this._config._state.page = 1;
+        this._stateStore.setSearch(query);
         this.reload();
     };
     /**
@@ -6810,8 +7475,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype.check = function () {
         this._checkbox.check();
-        this._fireEvent('checked');
-        this._dispatchEvent('checked');
+        this._emit('checked');
     };
     /**
      * Uncheck all visible row checkboxes
@@ -6819,8 +7483,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype.uncheck = function () {
         this._checkbox.uncheck();
-        this._fireEvent('unchecked');
-        this._dispatchEvent('unchecked');
+        this._emit('unchecked');
     };
     /**
      * Get all checked row IDs (across all pages if preserveSelection is true)
@@ -18947,9 +19610,9 @@ exports["default"] = KTUtils;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTCarousel = exports.KTPinInput = exports.KTRangeSlider = exports.KTClipboard = exports.KTRepeater = exports.KTRating = exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
-var dom_1 = __webpack_require__(/*! ./helpers/dom */ "./src/helpers/dom.ts");
+exports.KTComponents = exports.KTCarousel = exports.KTPinInput = exports.KTRangeSlider = exports.KTClipboard = exports.KTRepeater = exports.KTRating = exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTContextMenu = exports.KTDropdown = void 0;
 var dropdown_1 = __webpack_require__(/*! ./components/dropdown */ "./src/components/dropdown/index.ts");
+var context_menu_1 = __webpack_require__(/*! ./components/context-menu */ "./src/components/context-menu/index.ts");
 var modal_1 = __webpack_require__(/*! ./components/modal */ "./src/components/modal/index.ts");
 var drawer_1 = __webpack_require__(/*! ./components/drawer */ "./src/components/drawer/index.ts");
 var collapse_1 = __webpack_require__(/*! ./components/collapse */ "./src/components/collapse/index.ts");
@@ -18978,6 +19641,8 @@ var pin_input_1 = __webpack_require__(/*! ./components/pin-input */ "./src/compo
 var carousel_1 = __webpack_require__(/*! ./components/carousel */ "./src/components/carousel/index.ts");
 var dropdown_2 = __webpack_require__(/*! ./components/dropdown */ "./src/components/dropdown/index.ts");
 Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_2.KTDropdown; } }));
+var context_menu_2 = __webpack_require__(/*! ./components/context-menu */ "./src/components/context-menu/index.ts");
+Object.defineProperty(exports, "KTContextMenu", ({ enumerable: true, get: function () { return context_menu_2.KTContextMenu; } }));
 var modal_2 = __webpack_require__(/*! ./components/modal */ "./src/components/modal/index.ts");
 Object.defineProperty(exports, "KTModal", ({ enumerable: true, get: function () { return modal_2.KTModal; } }));
 var drawer_2 = __webpack_require__(/*! ./components/drawer */ "./src/components/drawer/index.ts");
@@ -19030,9 +19695,10 @@ var pin_input_2 = __webpack_require__(/*! ./components/pin-input */ "./src/compo
 Object.defineProperty(exports, "KTPinInput", ({ enumerable: true, get: function () { return pin_input_2.KTPinInput; } }));
 var carousel_2 = __webpack_require__(/*! ./components/carousel */ "./src/components/carousel/index.ts");
 Object.defineProperty(exports, "KTCarousel", ({ enumerable: true, get: function () { return carousel_2.KTCarousel; } }));
-var KTComponents = {
+exports.KTComponents = {
     init: function () {
         dropdown_1.KTDropdown.init();
+        context_menu_1.KTContextMenu.init();
         modal_1.KTModal.init();
         drawer_1.KTDrawer.init();
         collapse_1.KTCollapse.init();
@@ -19061,10 +19727,68 @@ var KTComponents = {
         carousel_1.KTCarousel.init();
     },
 };
-exports["default"] = KTComponents;
-dom_1.default.ready(function () {
-    KTComponents.init();
-});
+exports["default"] = exports.KTComponents;
+
+
+/***/ }),
+
+/***/ "./src/init-all.ts":
+/*!*************************!*\
+  !*** ./src/init-all.ts ***!
+  \*************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.initAllComponents = void 0;
+var dom_1 = __webpack_require__(/*! ./helpers/dom */ "./src/helpers/dom.ts");
+var index_1 = __webpack_require__(/*! ./index */ "./src/index.ts");
+var initAllComponents = function () {
+    dom_1.default.ready(function () {
+        index_1.KTComponents.init();
+    });
+};
+exports.initAllComponents = initAllComponents;
+(0, exports.initAllComponents)();
+
+
+/***/ }),
+
+/***/ "./src/legacy.ts":
+/*!***********************!*\
+  !*** ./src/legacy.ts ***!
+  \***********************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports["default"] = void 0;
+__exportStar(__webpack_require__(/*! ./index */ "./src/index.ts"), exports);
+var index_1 = __webpack_require__(/*! ./index */ "./src/index.ts");
+Object.defineProperty(exports, "default", ({ enumerable: true, get: function () { return index_1.default; } }));
+__webpack_require__(/*! ./init-all */ "./src/init-all.ts");
 
 
 /***/ })
@@ -19135,7 +19859,7 @@ dom_1.default.ready(function () {
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/legacy.ts");
 /******/ 	
 /******/ 	return __webpack_exports__;
 /******/ })()