@keenthemes/ktui 1.2.5 → 1.2.7

package/lib/esm/components/datatable/datatable.js

@@ -64,17 +64,33 @@ 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));
+};
 import KTComponent from '../component';
-import KTComponents from '../../index';
 import KTData from '../../helpers/data';
-import { createCheckboxHandler, } from './datatable-checkbox';
-import { createSortHandler } from './datatable-sort';
-import { createDataTableEventAdapter } from './datatable-event-adapter';
+import { KTDataTableCheckboxHandler, } from './datatable-checkbox';
+import { KTDataTableSortHandler } from './datatable-sort';
+import { createStickyLayoutPlugin } from './datatable-layout-plugin';
+import { DATATABLE_DEFAULTS, DEFAULT_PAGE_SIZES, DEFAULT_SEARCH_DELAY } from './datatable-defaults';
+import { getLogicalColumnCount } from './datatable-column-utils';
 import { KTDataTableLocalDataProvider } from './datatable-local-provider';
 import { KTDataTableRemoteDataProvider } from './datatable-remote-provider';
 import { KTDataTableConfigStateStore } from './datatable-state-store';
 import { KTDataTableDomPaginationRenderer } from './datatable-pagination-renderer';
 import { KTDataTableDomTableRenderer } from './datatable-table-renderer';
+import KTUtils from '../../helpers/utils';
+import { createSearchHandler } from './datatable-search-handler';
+import { createStatePersistence, resolveTableNamespace, } from './datatable-state-persistence';
+import { createSpinner } from './datatable-spinner';
+import { createDataTableRegistry } from './datatable-registry';
+import { stripHtml } from './datatable-utils';
 /**
  * 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.
@@ -84,27 +100,34 @@ import { KTDataTableDomTableRenderer } from './datatable-table-renderer';
  * @param {HTMLElement} element The table element
  * @param {KTDataTableConfigInterface} [config] Additional configuration options
  */
+var datatableRegistry = 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 = createSearchHandler();
+        _this._statePersistence = createStatePersistence();
+        _this._spinner = createSpinner();
         _this._data = [];
         _this._isFetching = false;
         if (KTData.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;
         }
@@ -113,43 +136,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 KTDataTableConfigStateStore(_this._config);
-        _this._eventAdapter = 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 KTDataTableDomTableRenderer();
         _this._paginationRenderer = new KTDataTableDomPaginationRenderer();
         _this._initDataProviders();
         // Initialize checkbox handler
-        _this._checkbox = createCheckboxHandler(_this._element, _this._config, _this._emit.bind(_this));
+        _this._checkbox = new 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 = 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 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;
@@ -172,206 +211,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 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([], 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 = 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), { 
+            // Per-instance state; DATATABLE_DEFAULTS._state is a shared singleton.
+            _state: {}, sort: __assign(__assign({}, 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.search), { callback: this._createDefaultSearchCallback() }) }), config);
     };
     /**
      * Initialize table, tbody, thead, info, size, and pagination elements
@@ -412,24 +341,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 || ''; });
             });
         }
     };
@@ -449,8 +378,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];
@@ -466,11 +394,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
@@ -486,7 +414,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();
@@ -494,50 +423,20 @@ var KTDataTable = /** @class */ (function (_super) {
         if (this._sortHandler) {
             this._sortHandler.initSort();
         }
-        this._attachSearchEvent();
-        if (typeof KTComponents !== 'undefined') {
-            KTComponents.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 : 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: KTUtils.checksum(JSON.stringify(this._tbodyElement.innerHTML)),
+            });
         }
     };
     /**
@@ -546,17 +445,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 getLogicalColumnCount(this._theadElement, this._tbodyElement, this.getState().originalData);
     };
     /**
      * Creates a complete URL from a relative path or a full URL.
@@ -625,12 +514,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();
@@ -638,7 +532,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) {
@@ -653,18 +547,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
@@ -710,91 +603,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.
@@ -805,13 +638,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 resolveTableNamespace(this._config, this._tableElement, this._element, this._name);
     };
     KTDataTable.prototype._tableId = function () {
         var _a, _b;
@@ -829,90 +656,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;
-        }
-        KTData.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);
+            KTData.remove(root, this._name);
+        }
     };
     /**
      * Gets the current state of the table.
@@ -923,12 +703,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 });
@@ -960,36 +742,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.
@@ -1016,21 +790,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.
@@ -1039,21 +799,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();
     };
     /**
@@ -1061,25 +813,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();
-                }
-                KTData.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)
@@ -1119,16 +853,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;
 }(KTComponent));
 export { KTDataTable };