@keenthemes/ktui 1.2.5 → 1.2.7

package/dist/ktui.js

@@ -5253,85 +5253,77 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createCheckboxHandler = createCheckboxHandler;
+exports.KTDataTableCheckboxHandler = void 0;
 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;
-    function ensureState() {
-        var state = config._state;
-        if (!state) {
-            state = {};
-            config._state = state;
-        }
-        return state;
-    }
-    // Helper: get selectedRows from state, always as string[]
-    function getSelectedRows() {
-        var state = ensureState();
-        if (!Array.isArray(state.selectedRows))
-            state.selectedRows = [];
-        return state.selectedRows.map(String);
-    }
-    // Helper: set selectedRows in state
-    function setSelectedRows(rows) {
-        var state = ensureState();
-        state.selectedRows = Array.from(new Set(rows.map(String)));
+var KTDataTableCheckboxHandler = /** @class */ (function () {
+    function KTDataTableCheckboxHandler(element, config, fireEvent, deps) {
+        var _this = this;
+        var _a;
+        this._headerChecked = false;
+        this._headerCheckElement = null;
+        this._targetElements = null;
+        this._delegatedEventId = null;
+        this._checkboxListener = function (event) {
+            _this._checkboxToggle(event);
+        };
+        this._element = element;
+        this._config = config;
+        this._fireEvent = fireEvent;
+        this._deps = deps;
+        this._preserveSelection = ((_a = config.checkbox) === null || _a === void 0 ? void 0 : _a.preserveSelection) !== false;
     }
-    // Helper: get all visible row IDs (values)
-    function getVisibleRowIds() {
-        if (!targetElements)
+    KTDataTableCheckboxHandler.prototype._getSelectedRows = function () {
+        var rows = this._deps.getState().selectedRows;
+        return Array.isArray(rows) ? rows.map(String) : [];
+    };
+    KTDataTableCheckboxHandler.prototype._setSelectedRows = function (rows) {
+        this._deps.setSelectedRows(Array.from(new Set(rows.map(String))));
+    };
+    KTDataTableCheckboxHandler.prototype._getVisibleRowIds = function () {
+        if (!this._targetElements)
             return [];
-        return Array.from(targetElements)
+        return Array.from(this._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() {
-        var attrs = config.attributes;
+    KTDataTableCheckboxHandler.prototype.init = function () {
+        var attrs = this._config.attributes;
         if (!(attrs === null || attrs === void 0 ? void 0 : attrs.check) || !attrs.checkbox) {
             return;
         }
-        headerCheckElement = element.querySelector(attrs.check);
-        if (!headerCheckElement)
+        this._headerCheckElement =
+            this._element.querySelector(attrs.check);
+        if (!this._headerCheckElement)
             return;
-        headerChecked = headerCheckElement.checked;
-        targetElements = element.querySelectorAll(attrs.checkbox);
-        checkboxHandler();
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    function checkboxHandler() {
+        this._headerChecked = this._headerCheckElement.checked;
+        this._targetElements =
+            this._element.querySelectorAll(attrs.checkbox);
+        this._checkboxHandler();
+        this._reapplyCheckedStates();
+        this._updateHeaderCheckboxState();
+    };
+    KTDataTableCheckboxHandler.prototype._checkboxHandler = function () {
+        var _this = this;
         var _a;
-        if (!headerCheckElement)
+        if (!this._headerCheckElement)
             return;
-        var rowCheckboxSelector = (_a = config.attributes) === null || _a === void 0 ? void 0 : _a.checkbox;
+        var rowCheckboxSelector = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.checkbox;
         if (!rowCheckboxSelector)
             return;
-        headerCheckElement.addEventListener('click', checkboxListener);
-        event_handler_1.default.on(document.body, rowCheckboxSelector, 'input', (function (event) {
+        this._headerCheckElement.addEventListener('click', this._checkboxListener);
+        this._delegatedEventId = event_handler_1.default.on(this._element, rowCheckboxSelector, 'input', (function (event) {
             if (event)
-                handleRowCheckboxChange(event);
+                _this._handleRowCheckboxChange(event);
         }));
-    }
-    // When a row checkbox is changed
-    function handleRowCheckboxChange(event) {
+    };
+    KTDataTableCheckboxHandler.prototype._handleRowCheckboxChange = function (event) {
         var input = event.target;
         if (!input)
             return;
         var value = input.value;
-        var selectedRows = getSelectedRows();
+        var selectedRows = this._getSelectedRows();
         var wasChecked = selectedRows.includes(value);
         var isNowChecked = input.checked;
-        // Update state first
         if (isNowChecked) {
             if (!wasChecked)
                 selectedRows.push(value);
@@ -5339,160 +5331,408 @@ function createCheckboxHandler(element, config, fireEvent) {
         else {
             selectedRows = selectedRows.filter(function (v) { return v !== value; });
         }
-        setSelectedRows(selectedRows);
-        updateHeaderCheckboxState();
-        // Fire specific checked/unchecked events after state is updated
+        this._setSelectedRows(selectedRows);
+        this._updateHeaderCheckboxState();
         if (isNowChecked && !wasChecked) {
-            fireEvent('checked');
+            this._fireEvent('checked', { value: value });
         }
         else if (!isNowChecked && wasChecked) {
-            fireEvent('unchecked');
+            this._fireEvent('unchecked', { value: value });
         }
-        // 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
+        this._fireEvent('changed');
+    };
+    KTDataTableCheckboxHandler.prototype._checkboxToggle = function (_event) {
+        var checked = !this.isChecked();
+        this._change(checked);
         var eventType = checked ? 'checked' : 'unchecked';
-        fireEvent(eventType);
-    }
-    // Change all visible checkboxes and update selectedRows
-    function change(checked) {
+        this._fireEvent(eventType);
+    };
+    KTDataTableCheckboxHandler.prototype._change = function (checked) {
         var payload = { cancel: false };
-        fireEvent('change', payload);
+        this._fireEvent('change', payload);
         if (payload.cancel === true)
             return;
-        headerChecked = checked;
-        if (headerCheckElement)
-            headerCheckElement.checked = checked;
-        if (targetElements) {
-            var visibleIds_1 = getVisibleRowIds();
-            var selectedRows = getSelectedRows();
+        this._headerChecked = checked;
+        if (this._headerCheckElement)
+            this._headerCheckElement.checked = checked;
+        if (this._targetElements) {
+            var visibleIds_1 = this._getVisibleRowIds();
+            var selectedRows = this._getSelectedRows();
             if (checked) {
-                // Add all visible IDs to selectedRows
-                selectedRows = preserveSelection
+                selectedRows = this._preserveSelection
                     ? Array.from(new Set(__spreadArray(__spreadArray([], selectedRows, true), visibleIds_1, true)))
                     : visibleIds_1;
             }
             else {
-                // Remove all visible IDs from selectedRows
-                selectedRows = preserveSelection
+                selectedRows = this._preserveSelection
                     ? selectedRows.filter(function (v) { return !visibleIds_1.includes(v); })
                     : [];
             }
-            setSelectedRows(selectedRows);
-            // Update visible checkboxes
-            targetElements.forEach(function (element) {
+            this._setSelectedRows(selectedRows);
+            this._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)
+        this._updateHeaderCheckboxState();
+        this._fireEvent('changed');
+    };
+    KTDataTableCheckboxHandler.prototype._reapplyCheckedStates = function () {
+        var _this = this;
+        var selectedRows = this._getSelectedRows();
+        if (!this._targetElements)
             return;
-        targetElements.forEach(function (element) {
+        this._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 (row && ((_a = _this._config.checkbox) === null || _a === void 0 ? void 0 : _a.checkedClass)) {
                 if (element.checked) {
-                    row.classList.add(config.checkbox.checkedClass);
+                    row.classList.add(_this._config.checkbox.checkedClass);
                 }
                 else {
-                    row.classList.remove(config.checkbox.checkedClass);
+                    row.classList.remove(_this._config.checkbox.checkedClass);
                 }
             }
         });
-    }
-    // Update header checkbox state (checked/indeterminate/unchecked)
-    function updateHeaderCheckboxState() {
-        if (!headerCheckElement || !targetElements)
+    };
+    KTDataTableCheckboxHandler.prototype._updateHeaderCheckboxState = function () {
+        if (!this._headerCheckElement || !this._targetElements)
             return;
-        var total = targetElements.length;
+        var total = this._targetElements.length;
         var checked = 0;
         for (var i = 0; i < total; i++) {
-            if (targetElements[i].checked)
+            if (this._targetElements[i].checked)
                 checked++;
         }
         if (checked === 0) {
-            headerCheckElement.indeterminate = false;
-            headerCheckElement.checked = false;
-            headerChecked = false;
+            this._headerCheckElement.indeterminate = false;
+            this._headerCheckElement.checked = false;
+            this._headerChecked = false;
         }
         else if (checked > 0 && checked < total) {
-            headerCheckElement.indeterminate = true;
-            headerCheckElement.checked = false;
-            headerChecked = false;
+            this._headerCheckElement.indeterminate = true;
+            this._headerCheckElement.checked = false;
+            this._headerChecked = false;
         }
         else if (checked === total) {
-            headerCheckElement.indeterminate = false;
-            headerCheckElement.checked = true;
-            headerChecked = true;
+            this._headerCheckElement.indeterminate = false;
+            this._headerCheckElement.checked = true;
+            this._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() {
+    };
+    KTDataTableCheckboxHandler.prototype.isChecked = function () {
+        return this._headerChecked;
+    };
+    KTDataTableCheckboxHandler.prototype.getChecked = function () {
+        return this._getSelectedRows();
+    };
+    KTDataTableCheckboxHandler.prototype.check = function () {
+        this._change(true);
+        this._reapplyCheckedStates();
+        this._updateHeaderCheckboxState();
+    };
+    KTDataTableCheckboxHandler.prototype.uncheck = function () {
+        this._change(false);
+        this._reapplyCheckedStates();
+        this._updateHeaderCheckboxState();
+    };
+    KTDataTableCheckboxHandler.prototype.toggle = function () {
+        this._checkboxToggle();
+        this._reapplyCheckedStates();
+        this._updateHeaderCheckboxState();
+    };
+    KTDataTableCheckboxHandler.prototype.updateState = function () {
         var _a;
-        var rowCheckSel = (_a = config.attributes) === null || _a === void 0 ? void 0 : _a.checkbox;
+        var rowCheckSel = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.checkbox;
         if (!rowCheckSel) {
             return;
         }
-        targetElements = element.querySelectorAll(rowCheckSel);
-        reapplyCheckedStates();
-        updateHeaderCheckboxState();
-    }
-    return {
-        init: init,
-        check: check,
-        uncheck: uncheck,
-        toggle: toggle,
-        isChecked: isChecked,
-        getChecked: getChecked,
-        updateState: updateState,
+        this._targetElements =
+            this._element.querySelectorAll(rowCheckSel);
+        this._reapplyCheckedStates();
+        this._updateHeaderCheckboxState();
+    };
+    KTDataTableCheckboxHandler.prototype.dispose = function () {
+        var _a;
+        if (this._headerCheckElement) {
+            this._headerCheckElement.removeEventListener('click', this._checkboxListener);
+        }
+        var rowCheckboxSelector = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.checkbox;
+        if (this._delegatedEventId && rowCheckboxSelector) {
+            event_handler_1.default.off(this._element, 'input', this._delegatedEventId);
+            this._delegatedEventId = null;
+        }
+        this._headerCheckElement = null;
+        this._targetElements = null;
     };
+    return KTDataTableCheckboxHandler;
+}());
+exports.KTDataTableCheckboxHandler = KTDataTableCheckboxHandler;
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-column-utils.ts":
+/*!************************************************************!*\
+  !*** ./src/components/datatable/datatable-column-utils.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.resolveColumns = resolveColumns;
+exports.getLogicalColumnCount = getLogicalColumnCount;
+/**
+ * Resolve column headers from a thead element.
+ * Returns both the raw th list and the typed (data-kt-datatable-column) subset.
+ * When some ths lack the attribute, columnsByIndex falls back to all ths by index.
+ */
+function resolveColumns(theadElement) {
+    var allThs = theadElement
+        ? Array.from(theadElement.querySelectorAll('th'))
+        : [];
+    var typedThs = allThs.filter(function (th) {
+        return th.hasAttribute('data-kt-datatable-column');
+    });
+    var columnsByIndex = typedThs.length > 0 ? typedThs : allThs;
+    return { allThs: allThs, typedThs: typedThs, columnsByIndex: columnsByIndex };
 }
+/**
+ * Get the logical column count: number of data columns.
+ * Prefers originalData keys, falls back to first tbody row td count,
+ * then to resolved columns from thead.
+ */
+function getLogicalColumnCount(theadElement, tbodyElement, originalData) {
+    if (originalData && originalData.length > 0) {
+        return Object.keys(originalData[0]).length;
+    }
+    if (tbodyElement) {
+        var firstRow = tbodyElement.querySelector('tr');
+        if (firstRow) {
+            return firstRow.querySelectorAll('td').length;
+        }
+    }
+    var columnsByIndex = resolveColumns(theadElement).columnsByIndex;
+    return columnsByIndex.length;
+}
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-defaults.ts":
+/*!********************************************************!*\
+  !*** ./src/components/datatable/datatable-defaults.ts ***!
+  \********************************************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+
+/**
+ * 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.DATATABLE_DEFAULTS = exports.DEFAULT_PAGE_MORE_LIMIT = exports.DEFAULT_SEARCH_DELAY = exports.DEFAULT_PAGE_SIZES = void 0;
+/** Default page size options shown in the size selector */
+exports.DEFAULT_PAGE_SIZES = [5, 10, 20, 30, 50];
+/** Default debounce delay (ms) for search input */
+exports.DEFAULT_SEARCH_DELAY = 500;
+/** Default maximum visible page buttons before showing '...' */
+exports.DEFAULT_PAGE_MORE_LIMIT = 3;
+/**
+ * Default configuration for KTDataTable.
+ * Extracted from _initDefaultConfig() for separation of concerns.
+ * Note: sort.callback and search.callback are NOT included here because
+ * they require instance context (this._sortHandler). They are added
+ * in datatable.ts _initDefaultConfig().
+ */
+exports.DATATABLE_DEFAULTS = {
+    /**
+     * HTTP method for server-side API call
+     */
+    requestMethod: 'GET',
+    /**
+     * Custom HTTP headers for the API request
+     */
+    requestHeaders: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    /**
+     * Pagination info template
+     */
+    info: '{start}-{end} of {total}',
+    /**
+     * Info text when there is no data
+     */
+    infoEmpty: 'No records found',
+    /**
+     * Available page sizes
+     */
+    pageSizes: __spreadArray([], exports.DEFAULT_PAGE_SIZES, true),
+    /**
+     * Default page size
+     */
+    pageSize: 10,
+    /**
+     * Enable or disable pagination more button
+     */
+    pageMore: true,
+    /**
+     * Maximum number of pages before enabling pagination more button
+     */
+    pageMoreLimit: 3,
+    /**
+     * Pagination button templates
+     */
+    pagination: {
+        number: {
+            /**
+             * CSS classes to be added to the pagination button
+             */
+            class: 'kt-datatable-pagination-button',
+            /**
+             * Text to be displayed in the pagination button
+             */
+            text: '{page}',
+        },
+        previous: {
+            /**
+             * CSS classes to be added to the previous pagination button
+             */
+            class: 'kt-datatable-pagination-button kt-datatable-pagination-prev',
+            /**
+             * Text to be displayed in the previous pagination button
+             */
+            text: "\n\t\t\t\t<svg class=\"rtl:transform rtl:rotate-180 size-3.5 shrink-0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<path d=\"M8.86501 16.7882V12.8481H21.1459C21.3724 12.8481 21.5897 12.7581 21.7498 12.5979C21.91 12.4378 22 12.2205 22 11.994C22 11.7675 21.91 11.5503 21.7498 11.3901C21.5897 11.2299 21.3724 11.1399 21.1459 11.1399H8.86501V7.2112C8.86628 7.10375 8.83517 6.9984 8.77573 6.90887C8.7163 6.81934 8.63129 6.74978 8.53177 6.70923C8.43225 6.66869 8.32283 6.65904 8.21775 6.68155C8.11267 6.70405 8.0168 6.75766 7.94262 6.83541L2.15981 11.6182C2.1092 11.668 2.06901 11.7274 2.04157 11.7929C2.01413 11.8584 2 11.9287 2 11.9997C2 12.0707 2.01413 12.141 2.04157 12.2065C2.06901 12.272 2.1092 12.3314 2.15981 12.3812L7.94262 17.164C8.0168 17.2417 8.11267 17.2953 8.21775 17.3178C8.32283 17.3403 8.43225 17.3307 8.53177 17.2902C8.63129 17.2496 8.7163 17.18 8.77573 17.0905C8.83517 17.001 8.86628 16.8956 8.86501 16.7882Z\" fill=\"currentColor\"/>\n\t\t\t\t</svg>\n\t\t\t",
+        },
+        next: {
+            /**
+             * CSS classes to be added to the next pagination button
+             */
+            class: 'kt-datatable-pagination-button kt-datatable-pagination-next',
+            /**
+             * Text to be displayed in the next pagination button
+             */
+            text: "\n\t\t\t\t<svg class=\"rtl:transform rtl:rotate-180 size-3.5 shrink-0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<path d=\"M15.135 7.21144V11.1516H2.85407C2.62756 11.1516 2.41032 11.2415 2.25015 11.4017C2.08998 11.5619 2 11.7791 2 12.0056C2 12.2321 2.08998 12.4494 2.25015 12.6096C2.41032 12.7697 2.62756 12.8597 2.85407 12.8597H15.135V16.7884C15.1337 16.8959 15.1648 17.0012 15.2243 17.0908C15.2837 17.1803 15.3687 17.2499 15.4682 17.2904C15.5677 17.3309 15.6772 17.3406 15.7822 17.3181C15.8873 17.2956 15.9832 17.242 16.0574 17.1642L21.8402 12.3814C21.8908 12.3316 21.931 12.2722 21.9584 12.2067C21.9859 12.1412 22 12.0709 22 11.9999C22 11.9289 21.9859 11.8586 21.9584 11.7931C21.931 11.7276 21.8908 11.6683 21.8402 11.6185L16.0574 6.83565C15.9832 6.75791 15.8873 6.70429 15.7822 6.68179C15.6772 6.65929 15.5677 6.66893 15.4682 6.70948C15.3687 6.75002 15.2837 6.81959 15.2243 6.90911C15.1648 6.99864 15.1337 7.10399 15.135 7.21144Z\" fill=\"currentColor\"/>\n\t\t\t\t</svg>\n\t\t\t",
+        },
+        more: {
+            /**
+             * CSS classes to be added to the pagination more button
+             */
+            class: 'kt-datatable-pagination-button kt-datatable-pagination-more',
+            /**
+             * Text to be displayed in the pagination more button
+             */
+            text: '...',
+        },
+    },
+    /**
+     * Sorting options — classes only; callback is added in datatable.ts
+     */
+    sort: {
+        /**
+         * CSS classes to be added to the sortable headers
+         */
+        classes: {
+            base: 'kt-table-col',
+            asc: 'asc',
+            desc: 'desc',
+        },
+    },
+    /**
+     * Search options — delay only; callback is added in datatable.ts
+     */
+    search: {
+        /**
+         * Delay in milliseconds before the search function is applied to the data array
+         * @default 500
+         */
+        delay: 500, // ms
+    },
+    /**
+     * Loading spinner options
+     */
+    loading: {
+        /**
+         * Template to be displayed during data fetching process
+         */
+        template: "\n\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n\t\t\t\t<div class=\"kt-datatable-loading\">\n\t\t\t\t\t<svg class=\"animate-spin -ml-1 h-5 w-5 text-gray-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t\t<circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t\t<path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t\t{content}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t",
+        /**
+         * Loading text to be displayed in the template
+         */
+        content: 'Loading...',
+    },
+    /**
+     * Selectors of the elements to be targeted
+     */
+    attributes: {
+        /**
+         * Data table element
+         */
+        table: 'table[data-kt-datatable-table="true"]',
+        /**
+         * Pagination info element
+         */
+        info: '[data-kt-datatable-info="true"]',
+        /**
+         * Page size dropdown element
+         */
+        size: '[data-kt-datatable-size="true"]',
+        /**
+         * Pagination element
+         */
+        pagination: '[data-kt-datatable-pagination="true"]',
+        /**
+         * Spinner element
+         */
+        spinner: '[data-kt-datatable-spinner="true"]',
+        /**
+         * Checkbox element
+         */
+        check: '[data-kt-datatable-check="true"]',
+        checkbox: '[data-kt-datatable-row-check="true"]',
+    },
+    /**
+     * Enable or disable state saving
+     */
+    stateSave: true,
+    checkbox: {
+        checkedClass: 'checked',
+    },
+    /**
+     * Table layout algorithm: 'auto' (default) or 'fixed' for consistent column widths
+     */
+    tableLayout: 'auto',
+    /**
+     * Private properties
+     */
+    _state: {},
+    loadingClass: 'loading',
+};
 
 
 /***/ }),
 
-/***/ "./src/components/datatable/datatable-event-adapter.ts":
+/***/ "./src/components/datatable/datatable-layout-plugin.ts":
 /*!*************************************************************!*\
-  !*** ./src/components/datatable/datatable-event-adapter.ts ***!
+  !*** ./src/components/datatable/datatable-layout-plugin.ts ***!
   \*************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
@@ -5501,16 +5741,338 @@ function createCheckboxHandler(element, config, fireEvent) {
  * 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.createDataTableEventAdapter = createDataTableEventAdapter;
-function createDataTableEventAdapter(fireEvent, dispatchEvent) {
+exports.createStickyLayoutPlugin = void 0;
+var LOCKED_CELL_CLASS = 'kt-datatable-locked-cell';
+var LOCKED_HEADER_CLASS = 'kt-datatable-locked-header';
+var LOCKED_TOP_ROW_CLASS = 'kt-datatable-locked-top-row';
+var LOCKED_BOTTOM_ROW_CLASS = 'kt-datatable-locked-bottom-row';
+var LOCKED_LEFT_CLASS = 'kt-datatable-locked-left';
+var LOCKED_RIGHT_CLASS = 'kt-datatable-locked-right';
+var LOCKED_LAYOUT_SEPARATE_CLASS = 'kt-datatable-locked-layout-separate';
+var LOCKED_HEADER_SECTION_CLASS = 'kt-datatable-locked-header-section';
+var HEADER_Z_INDEX = 40;
+var ROW_Z_INDEX = 30;
+var COLUMN_Z_INDEX = 35;
+var INTERSECTION_Z_INDEX = 45;
+var toPositiveInteger = function (value) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.max(0, Math.floor(value));
+};
+var hasStickyColumns = function (config) {
+    var _a, _b;
+    var lockedLayout = config.lockedLayout;
+    if (!(lockedLayout === null || lockedLayout === void 0 ? void 0 : lockedLayout.stickyColumns)) {
+        return false;
+    }
+    return ((((_a = lockedLayout.stickyColumns.left) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 ||
+        (((_b = lockedLayout.stickyColumns.right) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0);
+};
+var hasLockedLayoutConfig = function (config) {
+    var _a, _b, _c, _d, _e, _f;
+    var lockedLayout = config.lockedLayout;
+    if (!lockedLayout) {
+        return false;
+    }
+    return (lockedLayout.stickyHeader === true ||
+        toPositiveInteger((_a = lockedLayout.stickyRows) === null || _a === void 0 ? void 0 : _a.top) > 0 ||
+        toPositiveInteger((_b = lockedLayout.stickyRows) === null || _b === void 0 ? void 0 : _b.bottom) > 0 ||
+        (((_d = (_c = lockedLayout.stickyColumns) === null || _c === void 0 ? void 0 : _c.left) === null || _d === void 0 ? void 0 : _d.length) || 0) > 0 ||
+        (((_f = (_e = lockedLayout.stickyColumns) === null || _e === void 0 ? void 0 : _e.right) === null || _f === void 0 ? void 0 : _f.length) || 0) > 0);
+};
+var getScrollContainer = function (rootElement) {
+    return (rootElement.closest('.kt-table-wrapper') ||
+        rootElement.querySelector('.kt-table-wrapper') ||
+        rootElement);
+};
+var clearStickyStyles = function (tableElement, scrollContainer) {
+    tableElement.classList.remove('kt-datatable-locked-layout', LOCKED_LAYOUT_SEPARATE_CLASS);
+    scrollContainer.classList.remove('kt-datatable-locked-layout-host');
+    tableElement.style.borderCollapse = '';
+    tableElement.style.borderSpacing = '';
+    var theadElement = tableElement.tHead;
+    if (theadElement) {
+        theadElement.classList.remove(LOCKED_HEADER_SECTION_CLASS);
+        theadElement.style.position = '';
+        theadElement.style.top = '';
+        theadElement.style.zIndex = '';
+    }
+    var stickyElements = tableElement.querySelectorAll(".".concat(LOCKED_CELL_CLASS));
+    stickyElements.forEach(function (element) {
+        element.classList.remove(LOCKED_CELL_CLASS, LOCKED_HEADER_CLASS, LOCKED_TOP_ROW_CLASS, LOCKED_BOTTOM_ROW_CLASS, LOCKED_LEFT_CLASS, LOCKED_RIGHT_CLASS);
+        element.style.position = '';
+        element.style.top = '';
+        element.style.bottom = '';
+        element.style.left = '';
+        element.style.right = '';
+        element.style.zIndex = '';
+        element.style.backgroundColor = '';
+    });
+};
+var getDirection = function (tableElement) {
+    var _a;
+    var scopedDir = (_a = tableElement
+        .closest('[dir]')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir');
+    var globalDir = typeof document !== 'undefined'
+        ? document.documentElement.getAttribute('dir')
+        : null;
+    return scopedDir === 'rtl' || globalDir === 'rtl' ? 'rtl' : 'ltr';
+};
+var resolveEdgeProperty = function (edge, direction) {
+    if (direction === 'rtl') {
+        return edge === 'left' ? 'right' : 'left';
+    }
+    return edge;
+};
+var setStickyEdge = function (element, edge, offset, direction) {
+    var resolvedEdge = resolveEdgeProperty(edge, direction);
+    if (resolvedEdge === 'left') {
+        element.style.left = "".concat(offset, "px");
+        element.style.right = '';
+    }
+    else {
+        element.style.right = "".concat(offset, "px");
+        element.style.left = '';
+    }
+};
+var ensureStickyCell = function (element, className, zIndex) {
+    element.classList.add(LOCKED_CELL_CLASS, className);
+    element.style.position = 'sticky';
+    element.style.zIndex = String(zIndex);
+};
+var measureStickyHeaderHeight = function (theadElement) { return Math.round(theadElement.offsetHeight); };
+/** Offset for top sticky body rows so they sit flush under a sticky header. */
+var getStickyTopRowOffset = function (headerHeight, useCollapsedBorders) {
+    if (headerHeight <= 0) {
+        return 0;
+    }
+    // Collapsed row borders are shared between thead and the first tbody row.
+    return useCollapsedBorders ? headerHeight - 1 : headerHeight;
+};
+var markIntersectionZIndex = function (element) {
+    var isRowLocked = element.classList.contains(LOCKED_HEADER_CLASS) ||
+        element.classList.contains(LOCKED_TOP_ROW_CLASS) ||
+        element.classList.contains(LOCKED_BOTTOM_ROW_CLASS);
+    var isColumnLocked = element.classList.contains(LOCKED_LEFT_CLASS) ||
+        element.classList.contains(LOCKED_RIGHT_CLASS);
+    if (isRowLocked && isColumnLocked) {
+        element.style.zIndex = String(INTERSECTION_Z_INDEX);
+    }
+};
+var applyStickyHeader = function (theadElement, enabled, useSectionSticky) {
+    if (!enabled) {
+        return 0;
+    }
+    if (useSectionSticky) {
+        theadElement.classList.add(LOCKED_HEADER_SECTION_CLASS);
+        theadElement.style.position = 'sticky';
+        theadElement.style.top = '0';
+        theadElement.style.zIndex = String(HEADER_Z_INDEX);
+        Array.from(theadElement.rows).forEach(function (row) {
+            Array.from(row.cells).forEach(function (cell) {
+                var headerCell = cell;
+                headerCell.classList.add(LOCKED_CELL_CLASS, LOCKED_HEADER_CLASS);
+            });
+        });
+        return measureStickyHeaderHeight(theadElement);
+    }
+    var cumulativeTop = 0;
+    Array.from(theadElement.rows).forEach(function (row) {
+        var rowTop = cumulativeTop;
+        Array.from(row.cells).forEach(function (cell) {
+            var headerCell = cell;
+            ensureStickyCell(headerCell, LOCKED_HEADER_CLASS, HEADER_Z_INDEX);
+            headerCell.style.top = "".concat(rowTop, "px");
+        });
+        cumulativeTop += row.offsetHeight;
+    });
+    return cumulativeTop;
+};
+var applyStickyRows = function (tbodyElement, headerHeight, topCount, bottomCount, useCollapsedBorders) {
+    var rows = Array.from(tbodyElement.rows);
+    var topOffset = getStickyTopRowOffset(headerHeight, useCollapsedBorders);
+    rows.slice(0, topCount).forEach(function (row) {
+        var rowTop = topOffset;
+        Array.from(row.cells).forEach(function (cell) {
+            var td = cell;
+            ensureStickyCell(td, LOCKED_TOP_ROW_CLASS, ROW_Z_INDEX);
+            td.style.top = "".concat(rowTop, "px");
+        });
+        topOffset += row.offsetHeight;
+    });
+    var bottomOffset = 0;
+    rows
+        .slice(Math.max(0, rows.length - bottomCount))
+        .reverse()
+        .forEach(function (row) {
+        var rowBottom = bottomOffset;
+        Array.from(row.cells).forEach(function (cell) {
+            var td = cell;
+            ensureStickyCell(td, LOCKED_BOTTOM_ROW_CLASS, ROW_Z_INDEX);
+            td.style.bottom = "".concat(rowBottom, "px");
+        });
+        bottomOffset += row.offsetHeight;
+    });
+};
+var getColumnIndexMap = function (theadElement, config) {
+    var map = new Map();
+    var typedHeaders = Array.from(theadElement.querySelectorAll('th[data-kt-datatable-column]'));
+    if (typedHeaders.length > 0) {
+        typedHeaders.forEach(function (th, index) {
+            var column = th.getAttribute('data-kt-datatable-column');
+            if (column) {
+                map.set(column, index);
+            }
+        });
+        return map;
+    }
+    if (config.columns) {
+        Object.keys(config.columns).forEach(function (key, index) {
+            map.set(key, index);
+        });
+    }
+    return map;
+};
+var getColumnCells = function (tableElement, columnIndex) {
+    var cells = [];
+    tableElement.querySelectorAll('tr').forEach(function (row) {
+        var cell = row.children.item(columnIndex);
+        if (cell instanceof HTMLTableCellElement) {
+            cells.push(cell);
+        }
+    });
+    return cells;
+};
+var applyStickyColumns = function (tableElement, theadElement, config) {
+    var _a;
+    var lockedColumns = (_a = config.lockedLayout) === null || _a === void 0 ? void 0 : _a.stickyColumns;
+    if (!lockedColumns) {
+        return;
+    }
+    var direction = getDirection(tableElement);
+    var columnMap = getColumnIndexMap(theadElement, config);
+    var leftOffset = 0;
+    (lockedColumns.left || []).forEach(function (key) {
+        var index = columnMap.get(key);
+        if (typeof index !== 'number') {
+            return;
+        }
+        var cells = getColumnCells(tableElement, index);
+        if (cells.length === 0) {
+            return;
+        }
+        var width = cells[0].getBoundingClientRect().width;
+        cells.forEach(function (cell) {
+            ensureStickyCell(cell, LOCKED_LEFT_CLASS, COLUMN_Z_INDEX);
+            setStickyEdge(cell, 'left', leftOffset, direction);
+        });
+        leftOffset += width;
+    });
+    var rightOffset = 0;
+    __spreadArray([], (lockedColumns.right || []), true).reverse().forEach(function (key) {
+        var index = columnMap.get(key);
+        if (typeof index !== 'number') {
+            return;
+        }
+        var cells = getColumnCells(tableElement, index);
+        if (cells.length === 0) {
+            return;
+        }
+        var width = cells[0].getBoundingClientRect().width;
+        cells.forEach(function (cell) {
+            ensureStickyCell(cell, LOCKED_RIGHT_CLASS, COLUMN_Z_INDEX);
+            setStickyEdge(cell, 'right', rightOffset, direction);
+        });
+        rightOffset += width;
+    });
+    tableElement
+        .querySelectorAll(".".concat(LOCKED_CELL_CLASS))
+        .forEach(markIntersectionZIndex);
+};
+var createStickyLayoutPlugin = function () {
+    var resizeHandler = null;
+    var scrollContainerTarget = null;
+    var isApplying = false;
+    var applyLayout = function (ctx) {
+        var _a, _b;
+        if (isApplying || !hasLockedLayoutConfig(ctx.config)) {
+            return;
+        }
+        isApplying = true;
+        try {
+            var scrollContainer = getScrollContainer(ctx.rootElement);
+            clearStickyStyles(ctx.tableElement, scrollContainer);
+            ctx.tableElement.classList.add('kt-datatable-locked-layout');
+            scrollContainer.classList.add('kt-datatable-locked-layout-host');
+            if (hasStickyColumns(ctx.config)) {
+                ctx.tableElement.classList.add(LOCKED_LAYOUT_SEPARATE_CLASS);
+                ctx.tableElement.style.borderCollapse = 'separate';
+                ctx.tableElement.style.borderSpacing = '0';
+            }
+            var lockedLayout = ctx.config.lockedLayout || {};
+            var useCollapsedBorders = !hasStickyColumns(ctx.config);
+            var headerHeight = applyStickyHeader(ctx.theadElement, lockedLayout.stickyHeader === true, useCollapsedBorders);
+            applyStickyRows(ctx.tbodyElement, headerHeight, toPositiveInteger((_a = lockedLayout.stickyRows) === null || _a === void 0 ? void 0 : _a.top), toPositiveInteger((_b = lockedLayout.stickyRows) === null || _b === void 0 ? void 0 : _b.bottom), useCollapsedBorders);
+            applyStickyColumns(ctx.tableElement, ctx.theadElement, ctx.config);
+        }
+        finally {
+            isApplying = false;
+        }
+    };
+    var detachResizeListener = function () {
+        if (!resizeHandler) {
+            return;
+        }
+        window.removeEventListener('resize', resizeHandler);
+        if (scrollContainerTarget) {
+            scrollContainerTarget.removeEventListener('scroll', resizeHandler);
+        }
+        resizeHandler = null;
+        scrollContainerTarget = null;
+    };
     return {
-        emit: function (eventName, eventData) {
-            fireEvent(eventName, eventData);
-            dispatchEvent(eventName, eventData);
+        beforeDraw: function (ctx) {
+            var scrollContainer = getScrollContainer(ctx.rootElement);
+            clearStickyStyles(ctx.tableElement, scrollContainer);
+        },
+        afterDraw: function (ctx) {
+            detachResizeListener();
+            applyLayout(ctx);
+            // Throttle re-layout with rAF to avoid running on every resize/scroll event
+            var rafId = 0;
+            var throttledApply = function () {
+                if (rafId)
+                    return;
+                rafId = requestAnimationFrame(function () {
+                    rafId = 0;
+                    applyLayout(ctx);
+                });
+            };
+            var scrollContainer = getScrollContainer(ctx.rootElement);
+            resizeHandler = throttledApply;
+            window.addEventListener('resize', resizeHandler);
+            scrollContainerTarget = scrollContainer;
+            scrollContainer.addEventListener('scroll', resizeHandler);
+        },
+        dispose: function (ctx) {
+            detachResizeListener();
+            var scrollContainer = getScrollContainer(ctx.rootElement);
+            clearStickyStyles(ctx.tableElement, scrollContainer);
         },
     };
-}
+};
+exports.createStickyLayoutPlugin = createStickyLayoutPlugin;
 
 
 /***/ }),
@@ -5585,6 +6147,34 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDataTableLocalDataProvider = void 0;
 var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
+var datatable_column_utils_1 = __webpack_require__(/*! ./datatable-column-utils */ "./src/components/datatable/datatable-column-utils.ts");
+var datatable_utils_1 = __webpack_require__(/*! ./datatable-utils */ "./src/components/datatable/datatable-utils.ts");
+var FILTER_MATCHERS = {
+    text: function (cellValue, filterValue) {
+        if (!filterValue)
+            return true;
+        return (0, datatable_utils_1.stripHtml)(cellValue)
+            .toLowerCase()
+            .includes(String(filterValue).toLowerCase());
+    },
+    numeric: function (cellValue, filterValue) {
+        var num = parseFloat(String(cellValue !== null && cellValue !== void 0 ? cellValue : '').replace(/[^0-9.-]/g, ''));
+        return !Number.isNaN(num) && num === filterValue;
+    },
+    dateRange: function (cellValue, filterValue) {
+        var range = filterValue;
+        if (!(range === null || range === void 0 ? void 0 : range.from) && !(range === null || range === void 0 ? void 0 : range.to))
+            return true;
+        var cellDate = new Date(String(cellValue !== null && cellValue !== void 0 ? cellValue : ''));
+        if (Number.isNaN(cellDate.getTime()))
+            return false;
+        if (range.from && cellDate < new Date(range.from))
+            return false;
+        if (range.to && cellDate > new Date(range.to))
+            return false;
+        return true;
+    },
+};
 var KTDataTableLocalDataProvider = /** @class */ (function () {
     function KTDataTableLocalDataProvider(options) {
         this.options = options;
@@ -5600,11 +6190,13 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
         var _a, _b;
         var state = this.options.stateStore.getState();
         var originalData = state.originalData;
+        var skipDomInvalidation = Boolean(this.options.config.lockedLayout || this.options.config.layoutPlugin);
         if (!this.options.elements().tableElement ||
             originalData === undefined ||
-            this.tableConfigInvalidate() ||
-            this.localTableHeaderInvalidate() ||
-            this.localTableContentInvalidate()) {
+            (!skipDomInvalidation &&
+                (this.tableConfigInvalidate() ||
+                    this.localTableHeaderInvalidate() ||
+                    this.localTableContentInvalidate()))) {
             var _c = this.localExtractTableContent(), originalData_1 = _c.originalData, originalDataAttributes = _c.originalDataAttributes;
             this.options.stateStore.setOriginalData(originalData_1, originalDataAttributes);
         }
@@ -5619,6 +6211,17 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
                 filteredData = data = searchCallback.call(this, data, searchTerm);
             }
         }
+        // Apply column filters
+        var filters = this.options.stateStore.getState().filters;
+        if (filters && filters.length > 0) {
+            filteredData = data = data.filter(function (item) {
+                return filters.every(function (filter) {
+                    var cellValue = item[filter.column];
+                    var matcher = FILTER_MATCHERS[filter.type];
+                    return matcher ? matcher(cellValue, filter.value) : true;
+                });
+            });
+        }
         var sortCallback = (_b = this.options.config.sort) === null || _b === void 0 ? void 0 : _b.callback;
         if (sortField !== undefined &&
             sortOrder !== undefined &&
@@ -5637,9 +6240,27 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
         };
     };
     KTDataTableLocalDataProvider.prototype.localTableContentInvalidate = function () {
+        var _a, _b;
         var tbodyElement = this.options.elements().tbodyElement;
         var checksum = utils_1.default.checksum(JSON.stringify(tbodyElement.innerHTML));
         if (this.options.stateStore.getState()._contentChecksum !== checksum) {
+            var domRowCount = tbodyElement.querySelectorAll('tr').length;
+            var storedRowCount = (_b = (_a = this.options.stateStore.getState().originalData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+            // Programmatic dataset with an empty tbody must not re-import from the DOM.
+            if (domRowCount === 0 && storedRowCount > 0) {
+                return false;
+            }
+            // After pagination redraw the tbody only holds the current page. A checksum
+            // mismatch there must not shrink originalData to pageSize rows.
+            if (storedRowCount > 0 &&
+                domRowCount > 0 &&
+                domRowCount < storedRowCount) {
+                var pageSize = this.options.stateStore.getState().pageSize;
+                if (domRowCount <= pageSize) {
+                    this.options.stateStore.patchState({ _contentChecksum: checksum });
+                    return false;
+                }
+            }
             this.options.stateStore.patchState({ _contentChecksum: checksum });
             return true;
         }
@@ -5649,9 +6270,13 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
         var _a;
         var _b = this.options.config, _state = _b._state, restConfig = __rest(_b, ["_state"]);
         var checksum = utils_1.default.checksum(JSON.stringify(restConfig));
-        if (((_a = _state === null || _state === void 0 ? void 0 : _state._configChecksum) !== null && _a !== void 0 ? _a : '') !== checksum) {
+        var previousChecksum = (_a = _state === null || _state === void 0 ? void 0 : _state._configChecksum) !== null && _a !== void 0 ? _a : '';
+        if (previousChecksum !== checksum) {
             this.options.stateStore.patchState({ _configChecksum: checksum });
-            return true;
+            // First load skips this check (originalData === undefined). On the first
+            // pagination fetch, previousChecksum is still empty — record it but do
+            // not re-extract from the paginated DOM (that would shrink originalData).
+            return previousChecksum !== '';
         }
         return false;
     };
@@ -5661,13 +6286,7 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
         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;
+        var columnsByIndex = (0, datatable_column_utils_1.resolveColumns)(theadElement).columnsByIndex;
         rows.forEach(function (row) {
             var dataRow = {};
             var dataRowAttribute = {};
@@ -5690,22 +6309,23 @@ var KTDataTableLocalDataProvider = /** @class */ (function () {
     };
     KTDataTableLocalDataProvider.prototype.localTableHeaderInvalidate = function () {
         var originalData = this.options.stateStore.getState().originalData;
+        if (!(originalData === null || originalData === void 0 ? void 0 : originalData.length)) {
+            return false;
+        }
         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;
+        var typedThs = (0, datatable_column_utils_1.resolveColumns)(theadElement).typedThs;
+        if (typedThs.length === 0) {
+            return (this.options.getLogicalColumnCount() !==
+                Object.keys(originalData[0]).length);
+        }
+        var typedColumnNames = typedThs
+            .map(function (th) { return th.getAttribute('data-kt-datatable-column'); })
+            .filter(function (name) { return Boolean(name); });
+        var dataColumnKeys = Object.keys(originalData[0]);
+        var matchingTypedColumns = typedColumnNames.filter(function (name) {
+            return dataColumnKeys.includes(name);
+        }).length;
+        return typedColumnNames.length !== matchingTypedColumns;
     };
     return KTDataTableLocalDataProvider;
 }());
@@ -5718,7 +6338,7 @@ exports.KTDataTableLocalDataProvider = KTDataTableLocalDataProvider;
 /*!*******************************************************************!*\
   !*** ./src/components/datatable/datatable-pagination-renderer.ts ***!
   \*******************************************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
 /**
@@ -5727,6 +6347,7 @@ exports.KTDataTableLocalDataProvider = KTDataTableLocalDataProvider;
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDataTableDomPaginationRenderer = void 0;
+var datatable_defaults_1 = __webpack_require__(/*! ./datatable-defaults */ "./src/components/datatable/datatable-defaults.ts");
 var KTDataTableDomPaginationRenderer = /** @class */ (function () {
     function KTDataTableDomPaginationRenderer() {
     }
@@ -5743,6 +6364,7 @@ var KTDataTableDomPaginationRenderer = /** @class */ (function () {
         return function () {
             if (input.sizeElement) {
                 input.sizeElement.onchange = null;
+                _this.removeChildElements(input.sizeElement);
             }
             if (input.paginationElement) {
                 _this.removeChildElements(input.paginationElement);
@@ -5759,21 +6381,19 @@ var KTDataTableDomPaginationRenderer = /** @class */ (function () {
     };
     KTDataTableDomPaginationRenderer.prototype.createPageSizeControls = function (input) {
         var _a;
+        var _b;
         if (!input.sizeElement) {
             return;
         }
-        var pageSizes = (_a = input.config.pageSizes) !== null && _a !== void 0 ? _a : [5, 10, 20, 30, 50];
-        setTimeout(function () {
-            var _a;
-            var options = 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);
+        var pageSizes = (_b = input.config.pageSizes) !== null && _b !== void 0 ? _b : datatable_defaults_1.DEFAULT_PAGE_SIZES;
+        var options = 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);
         input.sizeElement.onchange = function (event) {
             input.reloadPageSize(Number(event.target.value), 1);
         };
@@ -5805,7 +6425,7 @@ var KTDataTableDomPaginationRenderer = /** @class */ (function () {
         }
         var _b = input.state, currentPage = _b.page, totalPages = _b.totalPages;
         var previous = pagination.previous, next = pagination.next, number = pagination.number, more = pagination.more;
-        var pageMoreLimit = (_a = input.config.pageMoreLimit) !== null && _a !== void 0 ? _a : 3;
+        var pageMoreLimit = (_a = input.config.pageMoreLimit) !== null && _a !== void 0 ? _a : datatable_defaults_1.DEFAULT_PAGE_MORE_LIMIT;
         var createButton = function (text, className, disabled, handleClick) {
             var button = document.createElement('button');
             button.className = className;
@@ -5865,6 +6485,81 @@ var KTDataTableDomPaginationRenderer = /** @class */ (function () {
 exports.KTDataTableDomPaginationRenderer = KTDataTableDomPaginationRenderer;
 
 
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-registry.ts":
+/*!********************************************************!*\
+  !*** ./src/components/datatable/datatable-registry.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.createDataTableRegistry = createDataTableRegistry;
+var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
+function createDataTableRegistry() {
+    var instances = new Map();
+    function toElementWithInstance(element) {
+        return element;
+    }
+    function register(element, instance) {
+        instances.set(element, instance);
+        toElementWithInstance(element).instance = instance;
+    }
+    function get(element) {
+        var _a;
+        return (_a = instances.get(element)) !== null && _a !== void 0 ? _a : toElementWithInstance(element).instance;
+    }
+    function remove(element) {
+        instances.delete(element);
+        var el = toElementWithInstance(element);
+        if (el.instance)
+            delete el.instance;
+    }
+    function clear() {
+        instances.clear();
+    }
+    function createAll(factory) {
+        if (typeof document === 'undefined')
+            return;
+        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
+        elements.forEach(function (element) {
+            if (element.hasAttribute('data-kt-datatable') &&
+                !element.classList.contains('datatable-initialized')) {
+                var instance = factory(element);
+                register(element, instance);
+            }
+        });
+    }
+    function reinit(factory) {
+        if (typeof document === 'undefined')
+            return;
+        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
+        elements.forEach(function (element) {
+            try {
+                var instance = get(element);
+                if (instance && typeof instance.dispose === 'function') {
+                    instance.dispose();
+                }
+                data_1.default.remove(element, 'datatable');
+                element.removeAttribute('data-kt-datatable-initialized');
+                element.classList.remove('datatable-initialized');
+            }
+            catch (_a) {
+                // ignore per-element errors
+            }
+        });
+        clear();
+        createAll(factory);
+    }
+    return { register: register, get: get, remove: remove, clear: clear, createAll: createAll, reinit: reinit };
+}
+
+
 /***/ }),
 
 /***/ "./src/components/datatable/datatable-remote-provider.ts":
@@ -5974,7 +6669,7 @@ var KTDataTableRemoteDataProvider = /** @class */ (function () {
                         return [3 /*break*/, 8];
                     case 7:
                         error_2 = _a.sent();
-                        this.options.eventAdapter.emit('parseError', {
+                        this.options.eventAdapter.emit('fetchError', {
                             response: response,
                             error: String(error_2),
                             status: response.status,
@@ -5985,7 +6680,6 @@ var KTDataTableRemoteDataProvider = /** @class */ (function () {
                         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);
                         }
@@ -6065,13 +6759,87 @@ var KTDataTableRemoteDataProvider = /** @class */ (function () {
 exports.KTDataTableRemoteDataProvider = KTDataTableRemoteDataProvider;
 
 
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-search-handler.ts":
+/*!**************************************************************!*\
+  !*** ./src/components/datatable/datatable-search-handler.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.createSearchHandler = createSearchHandler;
+function createSearchHandler() {
+    function findSearchElement(tableId) {
+        return document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
+    }
+    function asSearchElementWithDebounce(element) {
+        return element;
+    }
+    function debounce(func, wait) {
+        var timeout;
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var later = function () {
+                clearTimeout(timeout);
+                func.apply(void 0, args);
+            };
+            clearTimeout(timeout);
+            timeout = window.setTimeout(later, wait);
+        };
+    }
+    function attach(tableId, currentSearch, delay, onSearch) {
+        var searchElement = findSearchElement(tableId);
+        if (!searchElement)
+            return;
+        // Restore search value from state
+        if (currentSearch !== undefined && currentSearch !== null) {
+            searchElement.value =
+                typeof currentSearch === 'string'
+                    ? currentSearch
+                    : String(currentSearch);
+        }
+        // Remove existing debounced listener if any
+        var el = asSearchElementWithDebounce(searchElement);
+        if (el._debouncedSearch) {
+            searchElement.removeEventListener('keyup', el._debouncedSearch);
+        }
+        // Create and attach new debounced search
+        var debouncedSearch = debounce(function () {
+            onSearch(searchElement.value);
+        }, delay);
+        el._debouncedSearch = debouncedSearch;
+        searchElement.addEventListener('keyup', debouncedSearch);
+    }
+    function detach(tableId) {
+        var searchElement = findSearchElement(tableId);
+        if (!searchElement)
+            return;
+        var el = asSearchElementWithDebounce(searchElement);
+        if (el._debouncedSearch) {
+            searchElement.removeEventListener('keyup', el._debouncedSearch);
+            delete el._debouncedSearch;
+        }
+    }
+    return { attach: attach, detach: detach };
+}
+
+
 /***/ }),
 
 /***/ "./src/components/datatable/datatable-sort.ts":
 /*!****************************************************!*\
   !*** ./src/components/datatable/datatable-sort.ts ***!
   \****************************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
 /**
@@ -6079,12 +6847,21 @@ exports.KTDataTableRemoteDataProvider = KTDataTableRemoteDataProvider;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createSortHandler = createSortHandler;
-function createSortHandler(config, theadElement, getState, setState, fireEvent, dispatchEvent, updateData) {
-    // Helper to compare values for sorting (string)
-    function compareValues(a, b, sortOrder) {
-        var aText = String(a).replace(/<[^>]*>|&nbsp;/g, '');
-        var bText = String(b).replace(/<[^>]*>|&nbsp;/g, '');
+exports.KTDataTableSortHandler = void 0;
+var datatable_utils_1 = __webpack_require__(/*! ./datatable-utils */ "./src/components/datatable/datatable-utils.ts");
+var KTDataTableSortHandler = /** @class */ (function () {
+    function KTDataTableSortHandler(deps) {
+        this._sortAbortController = null;
+        this._config = deps.config;
+        this._theadElement = deps.theadElement;
+        this._getState = deps.getState;
+        this._setState = deps.setState;
+        this._emit = deps.emit;
+        this._updateData = deps.updateData;
+    }
+    KTDataTableSortHandler._compareValues = function (a, b, sortOrder) {
+        var aText = (0, datatable_utils_1.stripHtml)(a);
+        var bText = (0, datatable_utils_1.stripHtml)(b);
         return aText > bText
             ? sortOrder === 'asc'
                 ? 1
@@ -6094,18 +6871,16 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                     ? -1
                     : 1
                 : 0;
-    }
-    // Parse value for numeric sort: strip currency/commas, then parseFloat
-    function parseNumeric(value) {
+    };
+    KTDataTableSortHandler._parseNumeric = function (value) {
         if (value === null || value === undefined || value === '') {
             return Number.NaN;
         }
         var s = String(value).replace(/[^0-9.-]/g, '');
         var n = parseFloat(s);
         return Number.isNaN(n) ? Number.NaN : n;
-    }
-    // Compare two numbers; NaN sorts to the end for both asc and desc
-    function compareNumeric(aNum, bNum, sortOrder) {
+    };
+    KTDataTableSortHandler._compareNumeric = function (aNum, bNum, sortOrder) {
         var aNaN = Number.isNaN(aNum);
         var bNaN = Number.isNaN(bNum);
         if (aNaN && bNaN)
@@ -6119,42 +6894,56 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
         if (aNum > bNum)
             return sortOrder === 'asc' ? 1 : -1;
         return 0;
-    }
-    function getColumnDef(sortField) {
-        var columns = config.columns;
+    };
+    KTDataTableSortHandler.prototype._getColumnDef = function (sortField) {
+        var columns = this._config.columns;
         if (!columns)
             return undefined;
         var key = typeof sortField === 'number'
             ? Object.keys(columns)[sortField]
             : sortField;
         return key !== undefined ? columns[key] : undefined;
-    }
-    function sortData(data, sortField, sortOrder) {
-        var columnDef = getColumnDef(sortField);
+    };
+    KTDataTableSortHandler.prototype.sortData = function (data, sortField, sortOrder) {
+        var columnDef = this._getColumnDef(sortField);
         var sortValueFn = columnDef === null || columnDef === void 0 ? void 0 : columnDef.sortValue;
         var useNumeric = !sortValueFn && (columnDef === null || columnDef === void 0 ? void 0 : columnDef.sortType) === 'numeric';
+        // Pre-strip HTML from cell values once (instead of on every comparison).
+        // For N rows this runs N regex replacements instead of N*log(N).
+        var strippedCache = new Map();
+        if (!sortValueFn) {
+            for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+                var item = data_1[_i];
+                strippedCache.set(item, (0, datatable_utils_1.stripHtml)(item[sortField]));
+            }
+        }
         return data.sort(function (a, b) {
+            var _a, _b, _c, _d;
             var aRaw = a[sortField];
             var bRaw = b[sortField];
             if (typeof sortValueFn === 'function') {
                 var aVal = sortValueFn(aRaw, a);
                 var bVal = sortValueFn(bRaw, b);
-                var aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
-                var bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
+                var aNum = typeof aVal === 'number'
+                    ? aVal
+                    : KTDataTableSortHandler._parseNumeric(aVal);
+                var bNum = typeof bVal === 'number'
+                    ? bVal
+                    : KTDataTableSortHandler._parseNumeric(bVal);
                 if (typeof aVal === 'number' && typeof bVal === 'number') {
-                    return compareNumeric(aNum, bNum, sortOrder);
+                    return KTDataTableSortHandler._compareNumeric(aNum, bNum, sortOrder);
                 }
-                return compareValues(aVal, bVal, sortOrder);
+                return KTDataTableSortHandler._compareValues(aVal, bVal, sortOrder);
             }
             if (useNumeric) {
-                var aNum = parseNumeric(aRaw);
-                var bNum = parseNumeric(bRaw);
-                return compareNumeric(aNum, bNum, sortOrder);
+                var aNum = KTDataTableSortHandler._parseNumeric((_a = strippedCache.get(a)) !== null && _a !== void 0 ? _a : aRaw);
+                var bNum = KTDataTableSortHandler._parseNumeric((_b = strippedCache.get(b)) !== null && _b !== void 0 ? _b : bRaw);
+                return KTDataTableSortHandler._compareNumeric(aNum, bNum, sortOrder);
             }
-            return compareValues(aRaw, bRaw, sortOrder);
+            return KTDataTableSortHandler._compareValues((_c = strippedCache.get(a)) !== null && _c !== void 0 ? _c : aRaw, (_d = strippedCache.get(b)) !== null && _d !== void 0 ? _d : bRaw, sortOrder);
         });
-    }
-    function toggleSortOrder(currentField, currentOrder, newField) {
+    };
+    KTDataTableSortHandler.prototype.toggleSortOrder = function (currentField, currentOrder, newField) {
         if (currentField === newField) {
             switch (currentOrder) {
                 case 'asc':
@@ -6166,17 +6955,16 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
             }
         }
         return 'asc';
-    }
-    function setSortIcon(sortField, sortOrder) {
+    };
+    KTDataTableSortHandler.prototype.setSortIcon = function (sortField, sortOrder) {
         var _a, _b, _c, _d, _e, _f;
-        var baseClass = ((_b = (_a = config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base) || '';
+        var baseClass = ((_b = (_a = this._config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base) || '';
         var sortClass = sortOrder
             ? sortOrder === 'asc'
-                ? ((_d = (_c = config.sort) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.asc) || ''
-                : ((_f = (_e = config.sort) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.desc) || ''
+                ? ((_d = (_c = this._config.sort) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.asc) || ''
+                : ((_f = (_e = this._config.sort) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.desc) || ''
             : '';
-        // Clear all headers: remove sort state so only the active column shows highlighted arrow
-        var allTh = theadElement.querySelectorAll('th');
+        var allTh = this._theadElement.querySelectorAll('th');
         allTh.forEach(function (header) {
             var el = header;
             el.setAttribute('aria-sort', 'none');
@@ -6185,10 +6973,9 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                 sortElement.className = baseClass;
             }
         });
-        // Apply sort state to the active column so table.css [aria-sort='asc'] / [aria-sort='desc'] can highlight the arrow
         var th = typeof sortField === 'number'
             ? allTh[sortField]
-            : theadElement.querySelector("th[data-kt-datatable-column=\"".concat(String(sortField), "\"], th[data-kt-datatable-column-sort=\"").concat(String(sortField), "\"]"));
+            : this._theadElement.querySelector("th[data-kt-datatable-column=\"".concat(String(sortField), "\"], th[data-kt-datatable-column-sort=\"").concat(String(sortField), "\"]"));
         if (th) {
             var sortElement = th.querySelector(".".concat(baseClass));
             if (sortElement) {
@@ -6201,20 +6988,23 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                 th.setAttribute('aria-sort', 'none');
             }
         }
-    }
-    function initSort() {
-        if (!theadElement)
+    };
+    KTDataTableSortHandler.prototype.initSort = function () {
+        var _this = this;
+        if (!this._theadElement)
             return;
-        // Set the initial sort icon
-        setSortIcon(getState().sortField, getState().sortOrder);
-        // Get all the table headers
-        var headers = Array.from(theadElement.querySelectorAll('th'));
+        // Abort previous sort listeners before attaching new ones
+        if (this._sortAbortController) {
+            this._sortAbortController.abort();
+        }
+        this._sortAbortController = new AbortController();
+        var signal = this._sortAbortController.signal;
+        this.setSortIcon(this._getState().sortField, this._getState().sortOrder);
+        var headers = Array.from(this._theadElement.querySelectorAll('th'));
         headers.forEach(function (header) {
             var _a, _b;
-            // If the sort class is not found, it's not a sortable column
-            if (!header.querySelector(".".concat((_b = (_a = config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base)))
+            if (!header.querySelector(".".concat((_b = (_a = _this._config.sort) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.base)))
                 return;
-            // Check if sorting is disabled for this column
             var sortDisabled = header.getAttribute('data-kt-datatable-column-sort') === 'false';
             if (sortDisabled)
                 return;
@@ -6224,17 +7014,154 @@ function createSortHandler(config, theadElement, getState, setState, fireEvent,
                 ? sortAttribute
                 : header.cellIndex;
             header.addEventListener('click', function () {
-                var state = getState();
-                var sortOrder = toggleSortOrder(state.sortField, state.sortOrder, sortField);
-                setSortIcon(sortField, sortOrder);
-                setState(sortField, sortOrder);
-                fireEvent('sort', { field: sortField, order: sortOrder });
-                dispatchEvent('sort', { field: sortField, order: sortOrder });
-                updateData();
-            });
+                var state = _this._getState();
+                var sortOrder = _this.toggleSortOrder(state.sortField, state.sortOrder, sortField);
+                _this.setSortIcon(sortField, sortOrder);
+                _this._setState(sortField, sortOrder);
+                _this._emit('sort', { field: sortField, order: sortOrder });
+                _this._updateData();
+            }, { signal: signal });
         });
+    };
+    KTDataTableSortHandler.prototype.dispose = function () {
+        if (this._sortAbortController) {
+            this._sortAbortController.abort();
+            this._sortAbortController = null;
+        }
+    };
+    return KTDataTableSortHandler;
+}());
+exports.KTDataTableSortHandler = KTDataTableSortHandler;
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-spinner.ts":
+/*!*******************************************************!*\
+  !*** ./src/components/datatable/datatable-spinner.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.createSpinner = createSpinner;
+function createSpinner() {
+    function findSpinner(root, spinnerSel) {
+        return root && spinnerSel
+            ? root.querySelector(spinnerSel)
+            : null;
+    }
+    function createSpinnerElement(tableElement, loading) {
+        var template = document.createElement('template');
+        template.innerHTML = loading.template
+            .trim()
+            .replace('{content}', loading.content);
+        var first = template.content.firstChild;
+        if (!first || !(first instanceof HTMLElement))
+            return null;
+        var spinner = first;
+        spinner.setAttribute('data-kt-datatable-spinner', 'true');
+        tableElement.appendChild(spinner);
+        return spinner;
+    }
+    function show(root, config, tableElement) {
+        var _a, _b;
+        var spinnerSel = (_a = config.attributes) === null || _a === void 0 ? void 0 : _a.spinner;
+        var fromDom = findSpinner(root, spinnerSel);
+        var spinner = fromDom !== null && fromDom !== void 0 ? fromDom : (config.loading
+            ? createSpinnerElement(tableElement, config.loading)
+            : null);
+        if (spinner)
+            spinner.style.display = 'block';
+        root === null || root === void 0 ? void 0 : root.classList.add((_b = config.loadingClass) !== null && _b !== void 0 ? _b : 'loading');
+    }
+    function hide(root, config) {
+        var _a, _b;
+        var spinner = findSpinner(root, (_a = config.attributes) === null || _a === void 0 ? void 0 : _a.spinner);
+        if (spinner)
+            spinner.style.display = 'none';
+        root === null || root === void 0 ? void 0 : root.classList.remove((_b = config.loadingClass) !== null && _b !== void 0 ? _b : 'loading');
+    }
+    function remove(root, config) {
+        var _a, _b;
+        var spinner = findSpinner(root, (_a = config.attributes) === null || _a === void 0 ? void 0 : _a.spinner);
+        if (spinner === null || spinner === void 0 ? void 0 : spinner.parentNode)
+            spinner.parentNode.removeChild(spinner);
+        root === null || root === void 0 ? void 0 : root.classList.remove((_b = config.loadingClass) !== null && _b !== void 0 ? _b : 'loading');
     }
-    return { initSort: initSort, sortData: sortData, toggleSortOrder: toggleSortOrder, setSortIcon: setSortIcon };
+    return { show: show, hide: hide, remove: remove };
+}
+
+
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-state-persistence.ts":
+/*!*****************************************************************!*\
+  !*** ./src/components/datatable/datatable-state-persistence.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.createStatePersistence = createStatePersistence;
+exports.resolveTableNamespace = resolveTableNamespace;
+function createStatePersistence() {
+    function save(namespace, state) {
+        if (namespace) {
+            try {
+                localStorage.setItem(namespace, JSON.stringify(state));
+            }
+            catch (_a) {
+                // localStorage unavailable (e.g. Node.js without --localstorage-file)
+            }
+        }
+    }
+    function load(namespace) {
+        try {
+            var stateString = localStorage.getItem(namespace);
+            if (!stateString)
+                return null;
+            return JSON.parse(stateString);
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    function remove(namespace) {
+        if (namespace) {
+            try {
+                localStorage.removeItem(namespace);
+            }
+            catch (_a) {
+                // localStorage unavailable
+            }
+        }
+    }
+    return { save: save, load: load, remove: remove };
+}
+/**
+ * Resolve the namespace for a datatable state key.
+ * Priority: config.stateNamespace > table element ID > root element ID > fallback name.
+ */
+function resolveTableNamespace(config, tableElement, rootElement, fallbackName) {
+    if (config.stateNamespace) {
+        return config.stateNamespace;
+    }
+    var tableIdAttr = tableElement === null || tableElement === void 0 ? void 0 : tableElement.getAttribute('id');
+    if (tableIdAttr)
+        return tableIdAttr;
+    var rootIdAttr = rootElement === null || rootElement === void 0 ? void 0 : rootElement.getAttribute('id');
+    if (rootIdAttr)
+        return rootIdAttr;
+    return fallbackName;
 }
 
 
@@ -6334,7 +7261,7 @@ exports.KTDataTableConfigStateStore = KTDataTableConfigStateStore;
 /*!**************************************************************!*\
   !*** ./src/components/datatable/datatable-table-renderer.ts ***!
   \**************************************************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
 /**
@@ -6343,6 +7270,7 @@ exports.KTDataTableConfigStateStore = KTDataTableConfigStateStore;
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTDataTableDomTableRenderer = void 0;
+var datatable_column_utils_1 = __webpack_require__(/*! ./datatable-column-utils */ "./src/components/datatable/datatable-column-utils.ts");
 var KTDataTableDomTableRenderer = /** @class */ (function () {
     function KTDataTableDomTableRenderer() {
     }
@@ -6350,20 +7278,77 @@ var KTDataTableDomTableRenderer = /** @class */ (function () {
         while (input.tableElement.tBodies.length) {
             input.tableElement.removeChild(input.tableElement.tBodies[0]);
         }
-        var tbodyElement = input.tableElement.createTBody();
-        if (input.originalTbodyClass) {
-            tbodyElement.className = input.originalTbodyClass;
+        var tbodyElement = input.tableElement.createTBody();
+        if (input.originalClasses.tbody) {
+            tbodyElement.className = input.originalClasses.tbody;
+        }
+        this.applyTableLayout(input);
+        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.style.textAlign = 'center';
+        cell.innerHTML = message;
+    };
+    KTDataTableDomTableRenderer.prototype.applyTableLayout = function (input) {
+        var tableLayout = input.config.tableLayout || 'auto';
+        var tableElement = input.tableElement;
+        tableElement.style.tableLayout = tableLayout;
+        if (tableLayout === 'fixed') {
+            if (!tableElement.style.width) {
+                tableElement.style.width = '100%';
+            }
+            this.updateColgroup(input);
+        }
+        else {
+            var existingColgroup = tableElement.querySelector('colgroup');
+            if (existingColgroup) {
+                tableElement.removeChild(existingColgroup);
+            }
+        }
+    };
+    KTDataTableDomTableRenderer.prototype.updateColgroup = function (input) {
+        var tableElement = input.tableElement;
+        var existingColgroup = tableElement.querySelector('colgroup');
+        if (existingColgroup) {
+            tableElement.removeChild(existingColgroup);
+        }
+        var colgroup = document.createElement('colgroup');
+        if (input.config.columns) {
+            var columns = input.config.columns;
+            for (var _i = 0, _a = Object.keys(columns); _i < _a.length; _i++) {
+                var key = _a[_i];
+                var col = document.createElement('col');
+                if (columns[key].width) {
+                    col.style.width = columns[key].width;
+                }
+                colgroup.appendChild(col);
+            }
+        }
+        else {
+            var columnsByIndex = (0, datatable_column_utils_1.resolveColumns)(input.theadElement).columnsByIndex;
+            for (var _b = 0, columnsByIndex_1 = columnsByIndex; _b < columnsByIndex_1.length; _b++) {
+                var th = columnsByIndex_1[_b];
+                var col = document.createElement('col');
+                var width = th.getAttribute('data-kt-datatable-column-width');
+                if (width) {
+                    col.style.width = width;
+                }
+                colgroup.appendChild(col);
+            }
+        }
+        var thead = tableElement.querySelector('thead');
+        if (thead) {
+            tableElement.insertBefore(colgroup, thead);
+        }
+        else {
+            tableElement.appendChild(colgroup);
         }
-        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;
@@ -6373,20 +7358,14 @@ var KTDataTableDomTableRenderer = /** @class */ (function () {
             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 columnsToRender = (0, datatable_column_utils_1.resolveColumns)(input.theadElement).columnsByIndex;
         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.originalClasses.tr && input.originalClasses.tr[rowIndex]) {
+                row.className = input.originalClasses.tr[rowIndex];
             }
             if (!input.config.columns) {
                 _this.renderImplicitColumns(input, row, item, rowIndex, {
@@ -6451,7 +7430,14 @@ var KTDataTableDomTableRenderer = /** @class */ (function () {
                 }
             }
             else {
-                td.textContent = item[colKey];
+                var cellValue = item[colKey];
+                if (cellValue === null || cellValue === undefined) {
+                    td.textContent = '';
+                }
+                else {
+                    // Match implicit column rendering: preserve HTML from DOM extraction.
+                    td.innerHTML = String(cellValue);
+                }
             }
             if (typeof columnDef.createdCell === 'function') {
                 columnDef.createdCell.call(input.context, td, item[colKey], item, row);
@@ -6460,10 +7446,10 @@ var KTDataTableDomTableRenderer = /** @class */ (function () {
         });
     };
     KTDataTableDomTableRenderer.prototype.applyOriginalTdClass = function (input, td, rowIndex, colIndex) {
-        if (input.originalTdClasses &&
-            input.originalTdClasses[rowIndex] &&
-            input.originalTdClasses[rowIndex][colIndex]) {
-            td.className = input.originalTdClasses[rowIndex][colIndex];
+        if (input.originalClasses.td &&
+            input.originalClasses.td[rowIndex] &&
+            input.originalClasses.td[rowIndex][colIndex]) {
+            td.className = input.originalClasses.td[rowIndex][colIndex];
         }
     };
     KTDataTableDomTableRenderer.prototype.applyDataRowAttributes = function (td, dataRowAttributes, colIndex) {
@@ -6478,6 +7464,30 @@ var KTDataTableDomTableRenderer = /** @class */ (function () {
 exports.KTDataTableDomTableRenderer = KTDataTableDomTableRenderer;
 
 
+/***/ }),
+
+/***/ "./src/components/datatable/datatable-utils.ts":
+/*!*****************************************************!*\
+  !*** ./src/components/datatable/datatable-utils.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.stripHtml = stripHtml;
+/**
+ * Strip HTML tags and &nbsp; entities from a value, returning plain text.
+ * Used by sort, search, and filter pipelines.
+ */
+function stripHtml(value) {
+    return String(value).replace(/<[^>]*>|&nbsp;/g, '');
+}
+
+
 /***/ }),
 
 /***/ "./src/components/datatable/datatable.ts":
@@ -6553,20 +7563,36 @@ 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 __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 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_layout_plugin_1 = __webpack_require__(/*! ./datatable-layout-plugin */ "./src/components/datatable/datatable-layout-plugin.ts");
+var datatable_defaults_1 = __webpack_require__(/*! ./datatable-defaults */ "./src/components/datatable/datatable-defaults.ts");
+var datatable_column_utils_1 = __webpack_require__(/*! ./datatable-column-utils */ "./src/components/datatable/datatable-column-utils.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");
+var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
+var datatable_search_handler_1 = __webpack_require__(/*! ./datatable-search-handler */ "./src/components/datatable/datatable-search-handler.ts");
+var datatable_state_persistence_1 = __webpack_require__(/*! ./datatable-state-persistence */ "./src/components/datatable/datatable-state-persistence.ts");
+var datatable_spinner_1 = __webpack_require__(/*! ./datatable-spinner */ "./src/components/datatable/datatable-spinner.ts");
+var datatable_registry_1 = __webpack_require__(/*! ./datatable-registry */ "./src/components/datatable/datatable-registry.ts");
+var datatable_utils_1 = __webpack_require__(/*! ./datatable-utils */ "./src/components/datatable/datatable-utils.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.
@@ -6576,27 +7602,34 @@ var datatable_table_renderer_1 = __webpack_require__(/*! ./datatable-table-rende
  * @param {HTMLElement} element The table element
  * @param {KTDataTableConfigInterface} [config] Additional configuration options
  */
+var datatableRegistry = (0, datatable_registry_1.createDataTableRegistry)();
 var KTDataTable = /** @class */ (function (_super) {
     __extends(KTDataTable, _super);
     function KTDataTable(element, config) {
         var _this = _super.call(this) || this;
         _this._name = 'datatable';
-        _this._originalTbodyClass = ''; // Store original tbody class
-        _this._originalTrClasses = []; // Store original tr classes
-        _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._originalClasses = {
+            tbody: '',
+            thead: '',
+            tr: [],
+            td: [],
+            th: [],
+        };
         _this._infoElement = null;
         _this._sizeElement = null;
         _this._paginationElement = null;
+        _this._layoutPlugin = null;
         _this._cleanupCallbacks = [];
+        _this._searchHandler = (0, datatable_search_handler_1.createSearchHandler)();
+        _this._statePersistence = (0, datatable_state_persistence_1.createStatePersistence)();
+        _this._spinner = (0, datatable_spinner_1.createSpinner)();
         _this._data = [];
         _this._isFetching = false;
         if (data_1.default.has(element, _this._name)) {
-            // Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
+            // Already initialized (e.g. by createInstances). Merge demo config and redraw once.
             var existing = KTDataTable.getInstance(element);
             if (existing && config) {
-                existing._mergeConfig(config);
+                existing._applyRuntimeConfig(config);
             }
             return _this;
         }
@@ -6605,43 +7638,59 @@ var KTDataTable = /** @class */ (function (_super) {
         if (!_this._element) {
             return _this;
         }
+        if (!_this._element.hasAttribute('data-kt-datatable')) {
+            _this._element.setAttribute('data-kt-datatable', 'true');
+        }
         _this._buildConfig();
+        _this._normalizePageSizeConfig();
         _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));
+        _this._eventAdapter = {
+            emit: function (eventName, eventData) {
+                _this._emit(eventName, eventData);
+            },
+        };
         // Store the instance directly on the element
-        KTDataTable.asElementWithInstance(element).instance = _this;
+        datatableRegistry.register(element, _this);
         _this._initElements();
+        _this._layoutPlugin = _this._createLayoutPlugin();
         _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, _this._emit.bind(_this));
+        _this._checkbox = new datatable_checkbox_1.KTDataTableCheckboxHandler(_this._element, _this._config, _this._emit.bind(_this), {
+            getState: function () { return _this._stateStore.getState(); },
+            setSelectedRows: function (rows) {
+                _this._stateStore.patchState({ selectedRows: rows });
+            },
+        });
         // 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._stateStore.setSort(field, order);
-        }, _this._fireEvent.bind(_this), _this._dispatchEvent.bind(_this), _this._updateData.bind(_this));
+        _this._sortHandler = new datatable_sort_1.KTDataTableSortHandler({
+            config: _this._config,
+            theadElement: _this._theadElement,
+            getState: function () { return ({
+                sortField: _this.getState().sortField,
+                sortOrder: _this.getState().sortOrder,
+            }); },
+            setState: function (field, order) {
+                _this._stateStore.setSort(field, order);
+            },
+            emit: _this._emit.bind(_this),
+            updateData: _this._updateData.bind(_this),
+        });
         _this._sortHandler.initSort();
         if (_this._config.stateSave === false) {
             _this._deleteState();
         }
         if (_this._config.stateSave) {
             _this._loadState();
+            _this._normalizePageState();
         }
         _this._updateData();
-        _this._emit('init');
         return _this;
     }
-    KTDataTable.asElementWithInstance = function (element) {
-        return element;
-    };
-    KTDataTable.asSearchElementWithDebounce = function (element) {
-        return element;
-    };
     KTDataTable.prototype._emit = function (eventName, eventData) {
-        this._eventAdapter.emit(eventName, eventData);
+        this._fireEvent(eventName, eventData);
+        this._dispatchEvent("kt.datatable.".concat(eventName), eventData);
     };
     KTDataTable.prototype._initDataProviders = function () {
         var _this = this;
@@ -6664,206 +7713,96 @@ var KTDataTable = /** @class */ (function (_super) {
             stateStore: this._stateStore,
         });
     };
+    KTDataTable.prototype._createLayoutPlugin = function () {
+        if (this._config.layoutPlugin) {
+            return this._config.layoutPlugin;
+        }
+        if (this._config.lockedLayout) {
+            return (0, datatable_layout_plugin_1.createStickyLayoutPlugin)();
+        }
+        return null;
+    };
+    /**
+     * Apply config from a late constructor call (e.g. docs demo script after auto-init).
+     */
+    KTDataTable.prototype._applyRuntimeConfig = function (config) {
+        this._mergeConfig(config);
+        this._normalizePageSizeConfig();
+        this._layoutPlugin = this._createLayoutPlugin();
+        this.reload();
+    };
+    KTDataTable.prototype._normalizePageSizeConfig = function () {
+        var configuredPageSizes = Array.isArray(this._config.pageSizes)
+            ? this._config.pageSizes
+            : [];
+        var pageSizes = configuredPageSizes
+            .map(function (size) { return Number(size); })
+            .filter(function (size) { return Number.isFinite(size) && size > 0; })
+            .map(function (size) { return Math.floor(size); });
+        var fallbackPageSizes = __spreadArray([], datatable_defaults_1.DEFAULT_PAGE_SIZES, true);
+        this._config.pageSizes =
+            pageSizes.length > 0 ? Array.from(new Set(pageSizes)) : fallbackPageSizes;
+        var configuredPageSize = Number(this._config.pageSize);
+        this._config.pageSize =
+            Number.isFinite(configuredPageSize) && configuredPageSize > 0
+                ? Math.floor(configuredPageSize)
+                : this._config.pageSizes[0];
+    };
+    KTDataTable.prototype._normalizePageState = function () {
+        var statePageSize = Number(this._config._state.pageSize);
+        this._config._state.pageSize =
+            Number.isFinite(statePageSize) && statePageSize > 0
+                ? Math.floor(statePageSize)
+                : this._config.pageSize;
+        var statePage = Number(this._config._state.page);
+        this._config._state.page =
+            Number.isFinite(statePage) && statePage > 0 ? Math.floor(statePage) : 1;
+    };
+    KTDataTable.prototype._getLayoutPluginContext = function () {
+        return {
+            rootElement: this._element,
+            tableElement: this._tableElement,
+            theadElement: this._theadElement,
+            tbodyElement: this._tbodyElement,
+            config: this._config,
+        };
+    };
     /**
      * Initialize default configuration for the datatable
      * @param config User-provided configuration options
      * @returns Default configuration merged with user-provided options
      */
+    KTDataTable.prototype._createDefaultSearchCallback = function () {
+        return (function (data, search) {
+            if (!data || !search) {
+                return [];
+            }
+            var searchLower = search.toLowerCase();
+            return data.filter(function (item) {
+                if (!item) {
+                    return false;
+                }
+                return Object.values(item).some(function (value) {
+                    if (typeof value !== 'string' &&
+                        typeof value !== 'number' &&
+                        typeof value !== 'boolean') {
+                        return false;
+                    }
+                    var valueText = (0, datatable_utils_1.stripHtml)(value).toLowerCase();
+                    return valueText.includes(searchLower);
+                });
+            });
+        });
+    };
     KTDataTable.prototype._initDefaultConfig = function (config) {
         var _this = this;
-        return __assign({ 
-            /**
-             * HTTP method for server-side API call
-             */
-            requestMethod: 'GET', 
-            /**
-             * Custom HTTP headers for the API request
-             */
-            requestHeaders: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-            }, 
-            /**
-             * Pagination info template
-             */
-            info: '{start}-{end} of {total}', 
-            /**
-             * Info text when there is no data
-             */
-            infoEmpty: 'No records found', 
-            /**
-             * Available page sizes
-             */
-            pageSizes: [5, 10, 20, 30, 50], 
-            /**
-             * Default page size
-             */
-            pageSize: 10, 
-            /**
-             * Enable or disable pagination more button
-             */
-            pageMore: true, 
-            /**
-             * Maximum number of pages before enabling pagination more button
-             */
-            pageMoreLimit: 3, 
-            /**
-             * Pagination button templates
-             */
-            pagination: {
-                number: {
-                    /**
-                     * CSS classes to be added to the pagination button
-                     */
-                    class: 'kt-datatable-pagination-button',
-                    /**
-                     * Text to be displayed in the pagination button
-                     */
-                    text: '{page}',
-                },
-                previous: {
-                    /**
-                     * CSS classes to be added to the previous pagination button
-                     */
-                    class: 'kt-datatable-pagination-button kt-datatable-pagination-prev',
-                    /**
-                     * Text to be displayed in the previous pagination button
-                     */
-                    text: "\n\t\t\t\t\t\t<svg class=\"rtl:transform rtl:rotate-180 size-3.5 shrink-0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<path d=\"M8.86501 16.7882V12.8481H21.1459C21.3724 12.8481 21.5897 12.7581 21.7498 12.5979C21.91 12.4378 22 12.2205 22 11.994C22 11.7675 21.91 11.5503 21.7498 11.3901C21.5897 11.2299 21.3724 11.1399 21.1459 11.1399H8.86501V7.2112C8.86628 7.10375 8.83517 6.9984 8.77573 6.90887C8.7163 6.81934 8.63129 6.74978 8.53177 6.70923C8.43225 6.66869 8.32283 6.65904 8.21775 6.68155C8.11267 6.70405 8.0168 6.75766 7.94262 6.83541L2.15981 11.6182C2.1092 11.668 2.06901 11.7274 2.04157 11.7929C2.01413 11.8584 2 11.9287 2 11.9997C2 12.0707 2.01413 12.141 2.04157 12.2065C2.06901 12.272 2.1092 12.3314 2.15981 12.3812L7.94262 17.164C8.0168 17.2417 8.11267 17.2953 8.21775 17.3178C8.32283 17.3403 8.43225 17.3307 8.53177 17.2902C8.63129 17.2496 8.7163 17.18 8.77573 17.0905C8.83517 17.001 8.86628 16.8956 8.86501 16.7882Z\" fill=\"currentColor\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t",
-                },
-                next: {
-                    /**
-                     * CSS classes to be added to the next pagination button
-                     */
-                    class: 'kt-datatable-pagination-button kt-datatable-pagination-next',
-                    /**
-                     * Text to be displayed in the next pagination button
-                     */
-                    text: "\n\t\t\t\t\t\t<svg class=\"rtl:transform rtl:rotate-180 size-3.5 shrink-0\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<path d=\"M15.135 7.21144V11.1516H2.85407C2.62756 11.1516 2.41032 11.2415 2.25015 11.4017C2.08998 11.5619 2 11.7791 2 12.0056C2 12.2321 2.08998 12.4494 2.25015 12.6096C2.41032 12.7697 2.62756 12.8597 2.85407 12.8597H15.135V16.7884C15.1337 16.8959 15.1648 17.0012 15.2243 17.0908C15.2837 17.1803 15.3687 17.2499 15.4682 17.2904C15.5677 17.3309 15.6772 17.3406 15.7822 17.3181C15.8873 17.2956 15.9832 17.242 16.0574 17.1642L21.8402 12.3814C21.8908 12.3316 21.931 12.2722 21.9584 12.2067C21.9859 12.1412 22 12.0709 22 11.9999C22 11.9289 21.9859 11.8586 21.9584 11.7931C21.931 11.7276 21.8908 11.6683 21.8402 11.6185L16.0574 6.83565C15.9832 6.75791 15.8873 6.70429 15.7822 6.68179C15.6772 6.65929 15.5677 6.66893 15.4682 6.70948C15.3687 6.75002 15.2837 6.81959 15.2243 6.90911C15.1648 6.99864 15.1337 7.10399 15.135 7.21144Z\" fill=\"currentColor\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t",
-                },
-                more: {
-                    /**
-                     * CSS classes to be added to the pagination more button
-                     */
-                    class: 'kt-datatable-pagination-button kt-datatable-pagination-more',
-                    /**
-                     * Text to be displayed in the pagination more button
-                     */
-                    text: '...',
-                },
-            }, 
-            /**
-             * Sorting options
-             */
-            sort: {
-                /**
-                 * CSS classes to be added to the sortable headers
-                 */
-                classes: {
-                    base: 'kt-table-col',
-                    asc: 'asc',
-                    desc: 'desc',
-                },
-                /**
-                 * Local sorting callback function
-                 * Sorts the data array based on the sort field and order
-                 * @param data Data array to be sorted
-                 * @param sortField Property name of the data object to be sorted by
-                 * @param sortOrder Sorting order (ascending or descending)
-                 * @returns Sorted data array
-                 */
-                callback: function (data, sortField, sortOrder) {
+        return __assign(__assign(__assign({}, datatable_defaults_1.DATATABLE_DEFAULTS), { 
+            // Per-instance state; DATATABLE_DEFAULTS._state is a shared singleton.
+            _state: {}, sort: __assign(__assign({}, datatable_defaults_1.DATATABLE_DEFAULTS.sort), { callback: function (data, sortField, sortOrder) {
                     return _this._sortHandler
                         ? _this._sortHandler.sortData(data, sortField, sortOrder)
                         : data;
-                },
-            }, search: {
-                /**
-                 * Delay in milliseconds before the search function is applied to the data array
-                 * @default 500
-                 */
-                delay: 500, // ms
-                /**
-                 * Local search callback function
-                 * Filters the data array based on the search string
-                 * @param data Data array to be filtered
-                 * @param search Search string used to filter the data array
-                 * @returns Filtered data array
-                 */
-                callback: function (data, search) {
-                    if (!data || !search) {
-                        return [];
-                    }
-                    return data.filter(function (item) {
-                        if (!item) {
-                            return false;
-                        }
-                        return Object.values(item).some(function (value) {
-                            if (typeof value !== 'string' &&
-                                typeof value !== 'number' &&
-                                typeof value !== 'boolean') {
-                                return false;
-                            }
-                            var valueText = String(value)
-                                .replace(/<|>|&nbsp;/g, '')
-                                .toLowerCase();
-                            return valueText.includes(search.toLowerCase());
-                        });
-                    });
-                },
-            }, 
-            /**
-             * Loading spinner options
-             */
-            loading: {
-                /**
-                 * Template to be displayed during data fetching process
-                 */
-                template: "\n\t\t\t\t\t<div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n\t\t\t\t\t\t<div class=\"kt-datatable-loading\">\n\t\t\t\t\t\t\t<svg class=\"animate-spin -ml-1 h-5 w-5 text-gray-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t\t\t\t<circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t\t\t\t<path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t",
-                /**
-                 * Loading text to be displayed in the template
-                 */
-                content: 'Loading...',
-            }, 
-            /**
-             * Selectors of the elements to be targeted
-             */
-            attributes: {
-                /**
-                 * Data table element
-                 */
-                table: 'table[data-kt-datatable-table="true"]',
-                /**
-                 * Pagination info element
-                 */
-                info: '[data-kt-datatable-info="true"]',
-                /**
-                 * Page size dropdown element
-                 */
-                size: '[data-kt-datatable-size="true"]',
-                /**
-                 * Pagination element
-                 */
-                pagination: '[data-kt-datatable-pagination="true"]',
-                /**
-                 * Spinner element
-                 */
-                spinner: '[data-kt-datatable-spinner="true"]',
-                /**
-                 * Checkbox element
-                 */
-                check: '[data-kt-datatable-check="true"]',
-                checkbox: '[data-kt-datatable-row-check="true"]',
-            }, 
-            /**
-             * Enable or disable state saving
-             */
-            stateSave: true, checkbox: {
-                checkedClass: 'checked',
-            }, 
-            /**
-             * Private properties
-             */
-            _state: {}, loadingClass: 'loading' }, config);
+                } }), search: __assign(__assign({}, datatable_defaults_1.DATATABLE_DEFAULTS.search), { callback: this._createDefaultSearchCallback() }) }), config);
     };
     /**
      * Initialize table, tbody, thead, info, size, and pagination elements
@@ -6904,24 +7843,24 @@ var KTDataTable = /** @class */ (function (_super) {
         var _this = this;
         // Store tbody class
         if (this._tbodyElement) {
-            this._originalTbodyClass = this._tbodyElement.className || '';
+            this._originalClasses.tbody = this._tbodyElement.className || '';
         }
         // Store thead class and th classes
         if (this._theadElement) {
-            this._originalTheadClass = this._theadElement.className || '';
+            this._originalClasses.thead = this._theadElement.className || '';
             // Store th classes
             var thElements = this._theadElement.querySelectorAll('th');
-            this._originalThClasses = Array.from(thElements).map(function (th) { return th.className || ''; });
+            this._originalClasses.th = Array.from(thElements).map(function (th) { return th.className || ''; });
         }
         // Store tr and td classes
         if (this._tbodyElement) {
             var originalRows = this._tbodyElement.querySelectorAll('tr');
-            this._originalTrClasses = Array.from(originalRows).map(function (row) { return row.className || ''; });
+            this._originalClasses.tr = Array.from(originalRows).map(function (row) { return row.className || ''; });
             // Store td classes as a 2D array
-            this._originalTdClasses = [];
+            this._originalClasses.td = [];
             Array.from(originalRows).forEach(function (row, rowIndex) {
                 var tdElements = row.querySelectorAll('td');
-                _this._originalTdClasses[rowIndex] = Array.from(tdElements).map(function (td) { return td.className || ''; });
+                _this._originalClasses.td[rowIndex] = Array.from(tdElements).map(function (td) { return td.className || ''; });
             });
         }
     };
@@ -6941,8 +7880,7 @@ var KTDataTable = /** @class */ (function (_super) {
                         _b.label = 1;
                     case 1:
                         _b.trys.push([1, , 8, 9]);
-                        this._showSpinner(); // Show spinner before fetching data
-                        this._emit('fetch');
+                        this._spinner.show(this._element, this._config, this._tableElement); // Show spinner before fetching data
                         if (!(typeof this._config.apiEndpoint === 'undefined')) return [3 /*break*/, 2];
                         _a = this._localProvider.fetchSync();
                         return [3 /*break*/, 4];
@@ -6958,11 +7896,11 @@ var KTDataTable = /** @class */ (function (_super) {
                         return [4 /*yield*/, this._draw()];
                     case 5:
                         _b.sent();
-                        this._emit('fetched');
                         _b.label = 6;
                     case 6: return [4 /*yield*/, this._finalize()];
                     case 7:
                         _b.sent();
+                        this._emit('update');
                         return [3 /*break*/, 9];
                     case 8:
                         // Finally block now correctly executes after promises resolve, not immediately
@@ -6978,7 +7916,8 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {void}
      */
     KTDataTable.prototype._finalize = function () {
-        var _a;
+        var _this = this;
+        var _a, _b, _c;
         (_a = this._element) === null || _a === void 0 ? void 0 : _a.classList.add('datatable-initialized');
         // Initialize checkbox logic
         this._checkbox.init();
@@ -6986,50 +7925,20 @@ var KTDataTable = /** @class */ (function (_super) {
         if (this._sortHandler) {
             this._sortHandler.initSort();
         }
-        this._attachSearchEvent();
-        if (typeof index_1.default !== 'undefined') {
-            index_1.default.init();
-        }
+        this._searchHandler.attach(this._tableId(), this.getState().search, (_c = (_b = this._config.search) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : datatable_defaults_1.DEFAULT_SEARCH_DELAY, function (query) { return _this.search(query); });
         /**
          * Hide spinner
          */
-        this._hideSpinner();
-    };
-    /**
-     * Attach search event to the search input element
-     * @returns {void}
-     */
-    KTDataTable.prototype._attachSearchEvent = function () {
-        var _this = this;
-        var _a, _b;
-        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);
-            }, (_b = (_a = this._config.search) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : 500);
-            // Store the new debounced function as a property of the element
-            searchWithDebounce._debouncedSearch = debouncedSearch;
-            // Add the new debounced event listener
-            searchElement.addEventListener('keyup', debouncedSearch);
+        this._spinner.hide(this._element, this._config);
+        // Update content checksum AFTER all DOM modifications (checkbox init
+        // adds checked-class to <tr> elements which changes tbody innerHTML).
+        // If we save the checksum earlier (in _draw), the next fetchSync()
+        // sees a mismatch, re-extracts from the DOM, and loses rows that
+        // were on other pages — making pagination show empty.
+        if (!this._config.apiEndpoint) {
+            this._stateStore.patchState({
+                _contentChecksum: utils_1.default.checksum(JSON.stringify(this._tbodyElement.innerHTML)),
+            });
         }
     };
     /**
@@ -7038,17 +7947,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @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;
+        return (0, datatable_column_utils_1.getLogicalColumnCount)(this._theadElement, this._tbodyElement, this.getState().originalData);
     };
     /**
      * Creates a complete URL from a relative path or a full URL.
@@ -7117,12 +8016,17 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._draw = function () {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                this._stateStore.patchState({
-                    totalPages: Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0,
-                });
-                this._emit('draw');
-                this._dispose();
+            var normalizedPageSize, totalPages, page;
+            var _a, _b, _c, _d;
+            return __generator(this, function (_e) {
+                normalizedPageSize = Math.max(1, Number(this.getState().pageSize) || Number(this._config.pageSize) || 1);
+                totalPages = Math.ceil(this.getState().totalItems / normalizedPageSize) || 0;
+                page = totalPages > 0
+                    ? Math.min(Math.max(1, this.getState().page), totalPages)
+                    : 1;
+                this._stateStore.patchState({ totalPages: totalPages, page: page });
+                (_b = (_a = this._layoutPlugin) === null || _a === void 0 ? void 0 : _a.beforeDraw) === null || _b === void 0 ? void 0 : _b.call(_a, this._getLayoutPluginContext());
+                this._cleanupForRedraw();
                 // Update the table and pagination controls
                 if (this._theadElement && this._tbodyElement) {
                     this._updateTable();
@@ -7130,7 +8034,7 @@ var KTDataTable = /** @class */ (function (_super) {
                 if (this._infoElement || this._sizeElement || this._paginationElement) {
                     this._updatePagination();
                 }
-                this._emit('drew');
+                (_d = (_c = this._layoutPlugin) === null || _c === void 0 ? void 0 : _c.afterDraw) === null || _d === void 0 ? void 0 : _d.call(_c, this._getLayoutPluginContext());
                 // 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) {
@@ -7145,18 +8049,17 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {HTMLTableSectionElement} The new table body element
      */
     KTDataTable.prototype._updateTable = function () {
-        return this._tableRenderer.render({
+        this._tbodyElement = 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,
+            originalClasses: this._originalClasses,
             tableElement: this._tableElement,
             theadElement: this._theadElement,
         });
+        return this._tbodyElement;
     };
     /**
      * Show a notice on the table
@@ -7202,91 +8105,31 @@ var KTDataTable = /** @class */ (function (_super) {
         if (page < 1 || !Number.isInteger(page)) {
             return;
         }
-        this._emit('pagination', { page: page });
         if (page >= 1 && page <= this.getState().totalPages) {
             this._stateStore.setPage(page);
             this._updateData();
         }
     };
-    // Method to show the loading spinner
-    KTDataTable.prototype._showSpinner = function () {
-        var _a, _b;
-        var root = this._element;
-        var spinnerSel = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.spinner;
-        var fromDom = root && spinnerSel
-            ? root.querySelector(spinnerSel)
-            : null;
-        var spinner = fromDom !== null && fromDom !== void 0 ? fromDom : this._createSpinner();
-        if (spinner) {
-            spinner.style.display = 'block';
-        }
-        root === null || root === void 0 ? void 0 : root.classList.add((_b = this._config.loadingClass) !== null && _b !== void 0 ? _b : 'loading');
-    };
-    // Method to hide the loading spinner
-    KTDataTable.prototype._hideSpinner = function () {
-        var _a, _b;
-        var root = this._element;
-        var spinnerSel = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.spinner;
-        var spinner = root && spinnerSel
-            ? root.querySelector(spinnerSel)
-            : null;
-        if (spinner) {
-            spinner.style.display = 'none';
-        }
-        root === null || root === void 0 ? void 0 : root.classList.remove((_b = this._config.loadingClass) !== null && _b !== void 0 ? _b : 'loading');
-    };
-    // Method to create a spinner element if it doesn't exist
-    KTDataTable.prototype._createSpinner = function () {
-        var loading = this._config.loading;
-        if (!loading) {
-            return null;
-        }
-        var template = document.createElement('template');
-        template.innerHTML = loading.template
-            .trim()
-            .replace('{content}', loading.content);
-        var first = template.content.firstChild;
-        if (!first || !(first instanceof HTMLElement)) {
-            return null;
-        }
-        var spinner = first;
-        spinner.setAttribute('data-kt-datatable-spinner', 'true');
-        this._tableElement.appendChild(spinner);
-        return spinner;
-    };
     /**
      * Saves the current state of the table to local storage.
      * @returns {void}
      */
     KTDataTable.prototype._saveState = function () {
-        this._emit('stateSave');
-        var ns = this._tableNamespace();
-        if (ns) {
-            localStorage.setItem(ns, JSON.stringify(this.getState()));
-        }
+        this._statePersistence.save(this._tableNamespace(), this.getState());
     };
     /**
      * Loads the saved state of the table from local storage, if it exists.
      * @returns {Object} The saved state of the table, or null if no saved state exists.
      */
     KTDataTable.prototype._loadState = function () {
-        var stateString = localStorage.getItem(this._tableNamespace());
-        if (!stateString)
-            return null;
-        try {
-            var state = JSON.parse(stateString);
-            if (state)
-                this._stateStore.replaceState(state);
-            return state;
-        }
-        catch (_a) { }
-        return null;
+        var ns = this._tableNamespace();
+        var saved = this._statePersistence.load(ns);
+        if (saved)
+            this._stateStore.replaceState(saved);
+        return saved;
     };
     KTDataTable.prototype._deleteState = function () {
-        var ns = this._tableNamespace();
-        if (ns) {
-            localStorage.removeItem(ns);
-        }
+        this._statePersistence.remove(this._tableNamespace());
     };
     /**
      * Gets the namespace for the table's state.
@@ -7297,13 +8140,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {string} The namespace for the table's state.
      */
     KTDataTable.prototype._tableNamespace = function () {
-        var _a;
-        // Use the specified namespace, if one is given
-        if (this._config.stateNamespace) {
-            return this._config.stateNamespace;
-        }
-        // Fallback to the component's UID
-        return (_a = this._tableId()) !== null && _a !== void 0 ? _a : this._name;
+        return (0, datatable_state_persistence_1.resolveTableNamespace)(this._config, this._tableElement, this._element, this._name);
     };
     KTDataTable.prototype._tableId = function () {
         var _a, _b;
@@ -7321,90 +8158,43 @@ var KTDataTable = /** @class */ (function (_super) {
      * Clean up all event listeners, handlers, and DOM nodes created by this instance.
      * This method is called before re-rendering or when disposing the component.
      */
-    KTDataTable.prototype._dispose = function () {
-        var _a, _b, _c;
-        var root = this._element;
-        if (!root) {
+    /**
+     * Clean up event listeners and DOM artifacts for a redraw cycle.
+     * Does NOT remove the instance from the registry — the datatable
+     * remains accessible via getInstance() during the redraw window.
+     */
+    KTDataTable.prototype._cleanupForRedraw = function () {
+        var _a, _b;
+        (_b = (_a = this._layoutPlugin) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a, this._getLayoutPluginContext());
+        if (!this._element) {
             return;
         }
         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) {
-                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
-                delete searchWithDebounce._debouncedSearch;
-            }
-        }
-        // --- 2. Remove page size dropdown event listener ---
+        this._searchHandler.detach(this._tableId());
         if (this._sizeElement && this._sizeElement.onchange) {
             this._sizeElement.onchange = null;
         }
-        // --- 3. Remove all pagination button event listeners ---
         if (this._paginationElement) {
-            // Remove all child nodes (buttons) to ensure no lingering listeners
             while (this._paginationElement.firstChild) {
                 this._paginationElement.removeChild(this._paginationElement.firstChild);
             }
         }
-        // --- 4. Dispose of handler objects (checkbox, sort) ---
-        // KTDataTableCheckboxAPI does not have a dispose method, but we can remove header checkbox listener
-        var checkboxWithDispose = this._checkbox;
-        if (this._checkbox && typeof checkboxWithDispose.dispose === 'function') {
-            checkboxWithDispose.dispose();
-        }
-        else {
-            var checkSel = (_a = this._config.attributes) === null || _a === void 0 ? void 0 : _a.check;
-            if (checkSel) {
-                var headerCheckElement = root.querySelector(checkSel);
-                if (headerCheckElement) {
-                    headerCheckElement.replaceWith(headerCheckElement.cloneNode(true));
-                }
-            }
-        }
-        // KTDataTableSortAPI does not have a dispose method, but we can remove th click listeners by replacing them
-        if (this._theadElement) {
-            var ths = this._theadElement.querySelectorAll('th');
-            ths.forEach(function (th) {
-                th.replaceWith(th.cloneNode(true));
-            });
-        }
-        // --- 5. Remove spinner DOM node if it exists ---
-        var spinnerSel = (_b = this._config.attributes) === null || _b === void 0 ? void 0 : _b.spinner;
-        if (spinnerSel) {
-            var spinner = root.querySelector(spinnerSel);
-            if (spinner === null || spinner === void 0 ? void 0 : spinner.parentNode) {
-                spinner.parentNode.removeChild(spinner);
-            }
-        }
-        root.classList.remove((_c = this._config.loadingClass) !== null && _c !== void 0 ? _c : 'loading');
-        // --- 6. Remove instance reference from the DOM element ---
-        var elementWithInstance = KTDataTable.asElementWithInstance(root);
-        if (elementWithInstance.instance) {
-            delete elementWithInstance.instance;
-        }
-        data_1.default.remove(root, this._name);
-        // --- 7. (Optional) Clear localStorage state ---
-        // Uncomment the following line if you want to clear state on dispose:
-        // this._deleteState();
+        this._checkbox.dispose();
+        this._sortHandler.dispose();
+        this._spinner.remove(this._element, this._config);
     };
-    KTDataTable.prototype._debounce = function (func, wait) {
-        var timeout;
-        return function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var later = function () {
-                clearTimeout(timeout);
-                func.apply(void 0, args);
-            };
-            clearTimeout(timeout);
-            timeout = window.setTimeout(later, wait);
-        };
+    /**
+     * Full disposal — cleans up listeners AND removes the instance from
+     * the registry. Only called when the component is being destroyed.
+     */
+    KTDataTable.prototype._dispose = function () {
+        this._cleanupForRedraw();
+        var root = this._element;
+        if (root) {
+            datatableRegistry.remove(root);
+            data_1.default.remove(root, this._name);
+        }
     };
     /**
      * Gets the current state of the table.
@@ -7415,12 +8205,14 @@ var KTDataTable = /** @class */ (function (_super) {
     };
     /**
      * Sorts the data in the table by the specified field.
+     * When `order` is provided, applies that sort direction instead of toggling.
      * @param field The field to sort by.
+     * @param order Optional sort direction (`asc`, `desc`, or `''` to clear).
      */
-    KTDataTable.prototype.sort = function (field) {
-        // Use the sort handler to update state and trigger sorting
-        var state = this.getState();
-        var sortOrder = this._sortHandler.toggleSortOrder(state.sortField, state.sortOrder, field);
+    KTDataTable.prototype.sort = function (field, order) {
+        var sortOrder = order !== undefined
+            ? order
+            : this._sortHandler.toggleSortOrder(this.getState().sortField, this.getState().sortOrder, field);
         this._sortHandler.setSortIcon(field, sortOrder);
         this._stateStore.setSort(field, sortOrder);
         this._emit('sort', { field: field, order: sortOrder });
@@ -7452,36 +8244,28 @@ var KTDataTable = /** @class */ (function (_super) {
         this._reloadPageSize(pageSize);
     };
     /**
-     * Reloads the data from the server and updates the table.
-     * Triggers the 'reload' event and the 'kt.datatable.reload' custom event.
+     * Reloads the data from the source (API or DOM) and redraws the table.
+     * @returns {Promise<void>}
      */
     KTDataTable.prototype.reload = function () {
-        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._emit('redraw');
         this._paginateData(page);
     };
     /**
      * Show the loading spinner of the data table.
      */
     KTDataTable.prototype.showSpinner = function () {
-        /**
-         * Show the loading spinner of the data table.
-         */
-        this._showSpinner();
+        this._spinner.show(this._element, this._config, this._tableElement);
     };
     /**
      * Hide the loading spinner of the data table.
      */
     KTDataTable.prototype.hideSpinner = function () {
-        /**
-         * Hide the loading spinner of the data table.
-         */
-        this._hideSpinner();
+        this._spinner.hide(this._element, this._config);
     };
     /**
      * Filter data using the specified filter object.
@@ -7508,21 +8292,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * This function is now browser-guarded and must be called explicitly.
      */
     KTDataTable.createInstances = function () {
-        var _this = this;
-        if (typeof document === 'undefined')
-            return;
-        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
-        elements.forEach(function (element) {
-            if (element.hasAttribute('data-kt-datatable') &&
-                !element.classList.contains('datatable-initialized')) {
-                /**
-                 * Create an instance of KTDataTable for the given element
-                 * @param element The element to create an instance for
-                 */
-                var instance = new KTDataTable(element);
-                _this._instances.set(element, instance);
-            }
-        });
+        datatableRegistry.createAll(function (el) { return new KTDataTable(el); });
     };
     /**
      * Get the KTDataTable instance for a given element.
@@ -7531,21 +8301,13 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns The KTDataTable instance or undefined if not found
      */
     KTDataTable.getInstance = function (element) {
-        // First check the static Map (for instances created via createInstances)
-        var instanceFromMap = this._instances.get(element);
-        if (instanceFromMap) {
-            return instanceFromMap;
-        }
-        // Fallback to element's instance property (for manually created instances)
-        return KTDataTable.asElementWithInstance(element).instance;
+        return datatableRegistry.get(element);
     };
     /**
      * Initializes all KTDataTable instances on the page.
      * This function is now browser-guarded and must be called explicitly.
      */
     KTDataTable.init = function () {
-        if (typeof document === 'undefined')
-            return;
         KTDataTable.createInstances();
     };
     /**
@@ -7553,25 +8315,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * Useful for Livewire wire:navigate where the DOM is replaced and new tables need to be initialized.
      */
     KTDataTable.reinit = function () {
-        if (typeof document === 'undefined')
-            return;
-        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
-        elements.forEach(function (element) {
-            try {
-                var instance = KTDataTable.getInstance(element);
-                if (instance && typeof instance.dispose === 'function') {
-                    instance.dispose();
-                }
-                data_1.default.remove(element, 'datatable');
-                element.removeAttribute('data-kt-datatable-initialized');
-                element.classList.remove('datatable-initialized');
-            }
-            catch (_a) {
-                // ignore per-element errors
-            }
-        });
-        KTDataTable._instances.clear();
-        KTDataTable.createInstances();
+        datatableRegistry.reinit(function (el) { return new KTDataTable(el); });
     };
     /**
      * Check if all visible rows are checked (header checkbox state)
@@ -7611,16 +8355,18 @@ var KTDataTable = /** @class */ (function (_super) {
         return this._checkbox.getChecked();
     };
     /**
-     * Reapply checked state to visible checkboxes (after redraw/pagination)
+     * Re-apply checkbox checked states to visible rows after a redraw or pagination change.
      * @returns {void}
      */
-    KTDataTable.prototype.update = function () {
+    KTDataTable.prototype.refreshCheckboxes = function () {
         this._checkbox.updateState();
     };
     /**
-     * Static variables
+     * @deprecated Use {@link refreshCheckboxes} instead.
      */
-    KTDataTable._instances = new Map();
+    KTDataTable.prototype.update = function () {
+        this.refreshCheckboxes();
+    };
     return KTDataTable;
 }(component_1.default));
 exports.KTDataTable = KTDataTable;
@@ -20186,6 +20932,12 @@ exports.KTComponents = {
         carousel_1.KTCarousel.init();
     },
 };
+// Livewire wire:navigate support: re-init all components after SPA navigation
+if (typeof window !== 'undefined') {
+    document.addEventListener('livewire:navigate', function () {
+        exports.KTComponents.init();
+    });
+}
 exports["default"] = exports.KTComponents;