@keenthemes/ktui 1.2.3 → 1.2.4

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

@@ -64,32 +64,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import KTComponent from '../component';
-import KTUtils from '../../helpers/utils';
 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 { 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';
 /**
  * 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.
@@ -109,18 +94,9 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._originalTheadClass = ''; // Store original thead class
         _this._originalTdClasses = []; // Store original td classes as a 2D array [row][col]
         _this._originalThClasses = []; // Store original th classes
+        _this._cleanupCallbacks = [];
         _this._data = [];
         _this._isFetching = false;
-        /**
-         * AbortController for cancelling previous fetch requests
-         * Used to prevent race conditions when multiple requests are triggered rapidly
-         */
-        _this._abortController = null;
-        /**
-         * Request ID counter for tracking request sequence
-         * Used to detect and ignore stale responses from older requests
-         */
-        _this._requestId = 0;
         if (KTData.has(element, _this._name)) {
             // Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
             var existing = KTDataTable.getInstance(element);
@@ -132,21 +108,22 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._defaultConfig = _this._initDefaultConfig(config);
         _this._init(element);
         _this._buildConfig();
+        _this._stateStore = new KTDataTableConfigStateStore(_this._config);
+        _this._eventAdapter = createDataTableEventAdapter(_this._fireEvent.bind(_this), _this._dispatchEvent.bind(_this));
         // Store the instance directly on the element
         KTDataTable.asElementWithInstance(element).instance = _this;
         _this._initElements();
+        _this._tableRenderer = new KTDataTableDomTableRenderer();
+        _this._paginationRenderer = new KTDataTableDomPaginationRenderer();
+        _this._initDataProviders();
         // Initialize checkbox handler
-        _this._checkbox = createCheckboxHandler(_this._element, _this._config, function (eventName, eventData) {
-            _this._fireEvent(eventName, eventData);
-            _this._dispatchEvent(eventName, eventData);
-        });
+        _this._checkbox = createCheckboxHandler(_this._element, _this._config, _this._emit.bind(_this));
         // Initialize sort handler
         _this._sortHandler = createSortHandler(_this._config, _this._theadElement, function () { return ({
             sortField: _this.getState().sortField,
             sortOrder: _this.getState().sortOrder,
         }); }, function (field, order) {
-            _this._config._state.sortField = field;
-            _this._config._state.sortOrder = order;
+            _this._stateStore.setSort(field, order);
         }, _this._fireEvent.bind(_this), _this._dispatchEvent.bind(_this), _this._updateData.bind(_this));
         _this._sortHandler.initSort();
         if (_this._config.stateSave === false) {
@@ -156,8 +133,7 @@ var KTDataTable = /** @class */ (function (_super) {
             _this._loadState();
         }
         _this._updateData();
-        _this._fireEvent('init');
-        _this._dispatchEvent('init');
+        _this._emit('init');
         return _this;
     }
     KTDataTable.asElementWithInstance = function (element) {
@@ -166,6 +142,30 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.asSearchElementWithDebounce = function (element) {
         return element;
     };
+    KTDataTable.prototype._emit = function (eventName, eventData) {
+        this._eventAdapter.emit(eventName, eventData);
+    };
+    KTDataTable.prototype._initDataProviders = function () {
+        var _this = this;
+        this._localProvider = new KTDataTableLocalDataProvider({
+            config: this._config,
+            elements: function () { return ({
+                tableElement: _this._tableElement,
+                tbodyElement: _this._tbodyElement,
+                theadElement: _this._theadElement,
+            }); },
+            getLogicalColumnCount: this._getLogicalColumnCount.bind(this),
+            storeOriginalClasses: this._storeOriginalClasses.bind(this),
+            stateStore: this._stateStore,
+        });
+        this._remoteProvider = new KTDataTableRemoteDataProvider({
+            config: this._config,
+            createUrl: this._createUrl.bind(this),
+            eventAdapter: this._eventAdapter,
+            noticeOnTable: this._noticeOnTable.bind(this),
+            stateStore: this._stateStore,
+        });
+    };
     /**
      * Initialize default configuration for the datatable
      * @param config User-provided configuration options
@@ -435,32 +435,39 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._updateData = function () {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var result, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         if (this._isFetching)
                             return [2 /*return*/]; // Prevent duplicate fetches
                         this._isFetching = true;
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, , 8, 9]);
+                        _b.trys.push([1, , 8, 9]);
                         this._showSpinner(); // Show spinner before fetching data
-                        if (!(typeof this._config.apiEndpoint === 'undefined')) return [3 /*break*/, 4];
-                        return [4 /*yield*/, this._fetchDataFromLocal()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, this._finalize()];
+                        this._emit('fetch');
+                        if (!(typeof this._config.apiEndpoint === 'undefined')) return [3 /*break*/, 2];
+                        _a = this._localProvider.fetchSync();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, this._remoteProvider.fetch()];
                     case 3:
-                        _a.sent();
-                        return [3 /*break*/, 7];
-                    case 4: return [4 /*yield*/, this._fetchDataFromServer()];
+                        _a = _b.sent();
+                        _b.label = 4;
+                    case 4:
+                        result = _a;
+                        if (!!result.skipped) return [3 /*break*/, 6];
+                        this._data = result.data;
+                        this._stateStore.patchState({ totalItems: result.totalItems });
+                        return [4 /*yield*/, this._draw()];
                     case 5:
-                        _a.sent();
-                        return [4 /*yield*/, this._finalize()];
-                    case 6:
-                        _a.sent();
-                        _a.label = 7;
-                    case 7: return [3 /*break*/, 9];
+                        _b.sent();
+                        this._emit('fetched');
+                        _b.label = 6;
+                    case 6: return [4 /*yield*/, this._finalize()];
+                    case 7:
+                        _b.sent();
+                        return [3 /*break*/, 9];
                     case 8:
                         // Finally block now correctly executes after promises resolve, not immediately
                         this._isFetching = false;
@@ -527,152 +534,6 @@ var KTDataTable = /** @class */ (function (_super) {
             searchElement.addEventListener('keyup', debouncedSearch);
         }
     };
-    /**
-     * Fetch data from the DOM
-     * Fetch data from the table element and save it to the `originalData` state property.
-     * This method is used when the data is not fetched from the server via an API endpoint.
-     */
-    KTDataTable.prototype._fetchDataFromLocal = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _a, sortField, sortOrder, page, pageSize, search, originalData, _b, originalData_1, originalDataAttributes, _temp, searchTerm, startIndex, endIndex;
-            var _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        this._fireEvent('fetch');
-                        this._dispatchEvent('fetch');
-                        _a = this.getState(), sortField = _a.sortField, sortOrder = _a.sortOrder, page = _a.page, pageSize = _a.pageSize, search = _a.search;
-                        originalData = this.getState().originalData;
-                        // If the table element or the original data is not defined, bail
-                        if (!this._tableElement ||
-                            originalData === undefined ||
-                            this._tableConfigInvalidate() ||
-                            this._localTableHeaderInvalidate() ||
-                            this._localTableContentInvalidate()) {
-                            this._deleteState();
-                            _b = this._localExtractTableContent(), originalData_1 = _b.originalData, originalDataAttributes = _b.originalDataAttributes;
-                            this._config._state.originalData = originalData_1;
-                            this._config._state.originalDataAttributes = originalDataAttributes;
-                        }
-                        // Update the original data variable
-                        originalData = this.getState().originalData;
-                        _temp = (this._data = __spreadArray([], originalData, true));
-                        if (search) {
-                            searchTerm = typeof search === 'string' ? search : '';
-                            _temp = this._data = this._config.search.callback.call(this, this._data, searchTerm);
-                        }
-                        // If sorting is defined, sort the data
-                        if (sortField !== undefined &&
-                            sortOrder !== undefined &&
-                            sortOrder !== '') {
-                            if (typeof this._config.sort.callback === 'function') {
-                                this._data = this._config.sort.callback.call(this, this._data, sortField, sortOrder);
-                            }
-                        }
-                        // If there is data, slice it to the current page size
-                        if (((_c = this._data) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                            startIndex = (page - 1) * pageSize;
-                            endIndex = startIndex + pageSize;
-                            this._data = this._data.slice(startIndex, endIndex);
-                        }
-                        // Determine number of total rows
-                        this._config._state.totalItems = _temp.length;
-                        // Draw the data
-                        return [4 /*yield*/, this._draw()];
-                    case 1:
-                        // Draw the data
-                        _d.sent();
-                        this._fireEvent('fetched');
-                        this._dispatchEvent('fetched');
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Checks if the table content has been invalidated by comparing the current checksum of the table body
-     * with the stored checksum in the state. If the checksums are different, the state is updated with the
-     * new checksum and `true` is returned. Otherwise, `false` is returned.
-     *
-     * @returns {boolean} `true` if the table content has been invalidated, `false` otherwise.
-     */
-    KTDataTable.prototype._localTableContentInvalidate = function () {
-        var checksum = KTUtils.checksum(JSON.stringify(this._tbodyElement.innerHTML));
-        if (this.getState()._contentChecksum !== checksum) {
-            this._config._state._contentChecksum = checksum;
-            return true;
-        }
-        return false;
-    };
-    KTDataTable.prototype._tableConfigInvalidate = function () {
-        // Remove _data and _state from config
-        var _a = this._config, _state = _a._state, restConfig = __rest(_a, ["_state"]);
-        var checksum = KTUtils.checksum(JSON.stringify(restConfig));
-        if (_state._configChecksum !== checksum) {
-            this._config._state._configChecksum = checksum;
-            return true;
-        }
-        return false;
-    };
-    /**
-     * Extract the table content and returns it as an object containing an array of original data and an array of original data attributes.
-     *
-     * @returns {{originalData: T[], originalDataAttributes: KTDataTableAttributeInterface[]}} - An object containing an array of original data and an array of original data attributes.
-     */
-    KTDataTable.prototype._localExtractTableContent = function () {
-        var originalData = [];
-        var originalDataAttributes = [];
-        this._storeOriginalClasses();
-        var rows = this._tbodyElement.querySelectorAll('tr');
-        // Filter th elements to only include those with data-kt-datatable-column attribute
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var ths = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
-        });
-        rows.forEach(function (row) {
-            var dataRow = {};
-            var dataRowAttribute = {};
-            row.querySelectorAll('td').forEach(function (td, index) {
-                var _a, _b, _c;
-                var colName = (_a = ths[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-kt-datatable-column');
-                if (colName) {
-                    dataRow[colName] = (_b = td.innerHTML) === null || _b === void 0 ? void 0 : _b.trim();
-                }
-                else {
-                    // Store the original HTML for fallback
-                    dataRow[index] = (_c = td.innerHTML) === null || _c === void 0 ? void 0 : _c.trim();
-                }
-            });
-            if (Object.keys(dataRow).length > 0) {
-                originalData.push(dataRow);
-                originalDataAttributes.push(dataRowAttribute);
-            }
-        });
-        return { originalData: originalData, originalDataAttributes: originalDataAttributes };
-    };
-    /**
-     * Check if the table header is invalidated
-     * @returns {boolean} - Returns true if the table header is invalidated, false otherwise
-     */
-    KTDataTable.prototype._localTableHeaderInvalidate = function () {
-        var originalData = this.getState().originalData;
-        var totalColumns = originalData.length
-            ? Object.keys(originalData[0]).length
-            : 0;
-        // Count th elements with data-kt-datatable-column; when none (e.g. multi-row headers), use logical column count so we don't falsely invalidate
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var thsWithColumn = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
-        });
-        var currentTableHeaders = thsWithColumn.length > 0
-            ? thsWithColumn.length
-            : this._getLogicalColumnCount();
-        return currentTableHeaders !== totalColumns;
-    };
     /**
      * Returns the logical data column count (number of data columns), used for multi-row headers
      * where querySelectorAll('th') would overcount. Prefers state.originalData, then first tbody row td count.
@@ -691,162 +552,6 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         return 0;
     };
-    /**
-     * Fetch data from the server
-     */
-    KTDataTable.prototype._fetchDataFromServer = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var currentRequestId, queryParams, response, error_1, responseData, error_2;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        currentRequestId = ++this._requestId;
-                        this._fireEvent('fetch');
-                        this._dispatchEvent('fetch');
-                        queryParams = this._getQueryParamsForFetchRequest();
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, this._performFetchRequest(queryParams)];
-                    case 2:
-                        response = _a.sent();
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_1 = _a.sent();
-                        // Silently ignore AbortError - request was cancelled
-                        if (error_1.name === 'AbortError') {
-                            return [2 /*return*/];
-                        }
-                        throw error_1;
-                    case 4:
-                        // Check if this response is stale (a newer request has been initiated)
-                        if (currentRequestId !== this._requestId) {
-                            // Ignore stale response - a more recent request is in progress or has completed
-                            return [2 /*return*/];
-                        }
-                        responseData = null;
-                        _a.label = 5;
-                    case 5:
-                        _a.trys.push([5, 7, , 8]);
-                        return [4 /*yield*/, response.json()];
-                    case 6:
-                        responseData = _a.sent();
-                        return [3 /*break*/, 8];
-                    case 7:
-                        error_2 = _a.sent();
-                        // Fire event with complete error context for application handling
-                        this._fireEvent('parseError', {
-                            response: response,
-                            error: String(error_2),
-                            status: response.status,
-                            statusText: response.statusText,
-                        });
-                        this._dispatchEvent('parseError', {
-                            response: response,
-                            error: String(error_2),
-                            status: response.status,
-                            statusText: response.statusText,
-                        });
-                        return [2 /*return*/];
-                    case 8:
-                        // Double-check request ID after JSON parsing (additional safety)
-                        if (currentRequestId !== this._requestId) {
-                            return [2 /*return*/];
-                        }
-                        this._fireEvent('fetched', { response: responseData });
-                        this._dispatchEvent('fetched', { response: responseData });
-                        // Use the mapResponse function to transform the data if provided
-                        if (typeof this._config.mapResponse === 'function') {
-                            responseData = this._config.mapResponse.call(this, responseData);
-                        }
-                        this._data = responseData.data;
-                        this._config._state.totalItems = responseData.totalCount;
-                        return [4 /*yield*/, this._draw()];
-                    case 9:
-                        _a.sent();
-                        this._fireEvent('fetched');
-                        this._dispatchEvent('fetched');
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Get the query params for a fetch request
-     * @returns The query params for the fetch request
-     */
-    KTDataTable.prototype._getQueryParamsForFetchRequest = function () {
-        // Get the current state of the datatable
-        var _a = this.getState(), page = _a.page, pageSize = _a.pageSize, sortField = _a.sortField, sortOrder = _a.sortOrder, filters = _a.filters, search = _a.search;
-        // Create a new URLSearchParams object to store the query params
-        var queryParams = new URLSearchParams();
-        // Add the current page number and page size to the query params
-        queryParams.set('page', String(page));
-        queryParams.set('size', String(pageSize));
-        // If there is a sort order and field set, add them to the query params
-        if (sortOrder !== undefined) {
-            queryParams.set('sortOrder', String(sortOrder));
-        }
-        if (sortField !== undefined) {
-            queryParams.set('sortField', String(sortField));
-        }
-        // If there are any filters set, add them to the query params
-        if (Array.isArray(filters) && filters.length) {
-            queryParams.set('filters', JSON.stringify(filters.map(function (filter) { return ({
-                // Map the filter object to a simpler object with just the necessary properties
-                column: filter.column,
-                type: filter.type,
-                value: filter.value,
-            }); })));
-        }
-        if (search) {
-            queryParams.set('search', typeof search === 'object' ? JSON.stringify(search) : search);
-        }
-        // If a mapRequest function is provided, call it with the query params object
-        if (typeof this._config.mapRequest === 'function') {
-            queryParams = this._config.mapRequest.call(this, queryParams);
-        }
-        // Return the query params object
-        return queryParams;
-    };
-    KTDataTable.prototype._performFetchRequest = function (queryParams) {
-        return __awaiter(this, void 0, void 0, function () {
-            var requestMethod, requestBody, apiEndpointWithQueryParams;
-            var _this = this;
-            return __generator(this, function (_a) {
-                requestMethod = this._config.requestMethod;
-                requestBody = undefined;
-                // Cancel previous request to prevent race conditions
-                if (this._abortController) {
-                    this._abortController.abort();
-                }
-                // Create new AbortController for this request
-                this._abortController = new AbortController();
-                // If the request method is POST, send the query params as the request body
-                if (requestMethod === 'POST') {
-                    requestBody = queryParams;
-                }
-                else if (requestMethod === 'GET') {
-                    apiEndpointWithQueryParams = this._createUrl(this._config.apiEndpoint);
-                    apiEndpointWithQueryParams.search = queryParams.toString();
-                    this._config.apiEndpoint = apiEndpointWithQueryParams.toString();
-                }
-                return [2 /*return*/, fetch(this._config.apiEndpoint, __assign(__assign({ method: requestMethod, body: requestBody, headers: this._config.requestHeaders }, (this._config.requestCredentials && {
-                        credentials: this._config.requestCredentials,
-                    })), (this._abortController && { signal: this._abortController.signal }))).catch(function (error) {
-                        // Silently ignore AbortError - this is expected when requests are cancelled
-                        if (error.name === 'AbortError') {
-                            return Promise.reject(error);
-                        }
-                        // Trigger an error event for non-abort errors
-                        _this._fireEvent('error', { error: error });
-                        _this._dispatchEvent('error', { error: error });
-                        _this._noticeOnTable('Error performing fetch request: ' + String(error));
-                        throw error;
-                    })];
-            });
-        });
-    };
     /**
      * Creates a complete URL from a relative path or a full URL.
      *
@@ -881,10 +586,10 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._draw = function () {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                this._config._state.totalPages =
-                    Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0;
-                this._fireEvent('draw');
-                this._dispatchEvent('draw');
+                this._stateStore.patchState({
+                    totalPages: Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0,
+                });
+                this._emit('draw');
                 this._dispose();
                 // Update the table and pagination controls
                 if (this._theadElement && this._tbodyElement) {
@@ -893,8 +598,7 @@ var KTDataTable = /** @class */ (function (_super) {
                 if (this._infoElement && this._paginationElement) {
                     this._updatePagination();
                 }
-                this._fireEvent('drew');
-                this._dispatchEvent('drew');
+                this._emit('drew');
                 // Spinner is hidden in _finalize() to ensure it stays visible until the entire request completes
                 // Removed duplicate _hideSpinner() call here to prevent premature hiding
                 if (this._config.stateSave) {
@@ -909,115 +613,18 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {HTMLTableSectionElement} The new table body element
      */
     KTDataTable.prototype._updateTable = function () {
-        // Clear the existing table contents using a more efficient method
-        while (this._tableElement.tBodies.length) {
-            this._tableElement.removeChild(this._tableElement.tBodies[0]);
-        }
-        // Create the table body with the new data
-        var tbodyElement = this._tableElement.createTBody();
-        // Apply the original class to the new tbody element
-        if (this._originalTbodyClass) {
-            tbodyElement.className = this._originalTbodyClass;
-        }
-        this._updateTableContent(tbodyElement);
-        return tbodyElement;
-    };
-    /**
-     * Update the table content
-     * @param tbodyElement The table body element
-     * @returns {HTMLTableSectionElement} The updated table body element
-     */
-    KTDataTable.prototype._updateTableContent = function (tbodyElement) {
-        var _this = this;
-        var fragment = document.createDocumentFragment();
-        tbodyElement.textContent = ''; // Clear the tbody element
-        if (this._data.length === 0) {
-            this._noticeOnTable(this._config.infoEmpty || '');
-            return tbodyElement;
-        }
-        // Filter th elements to only include those with data-kt-datatable-column attribute
-        // This prevents creating blank td elements for merged header cells (colspan/rowspan)
-        var allThs = this._theadElement
-            ? this._theadElement.querySelectorAll('th')
-            : [];
-        var ths = Array.from(allThs).filter(function (th) {
-            return th.hasAttribute('data-kt-datatable-column');
+        return this._tableRenderer.render({
+            config: this._config,
+            context: this,
+            data: this._data,
+            getLogicalColumnCount: this._getLogicalColumnCount.bind(this),
+            getState: this.getState.bind(this),
+            originalTbodyClass: this._originalTbodyClass,
+            originalTrClasses: this._originalTrClasses,
+            originalTdClasses: this._originalTdClasses,
+            tableElement: this._tableElement,
+            theadElement: this._theadElement,
         });
-        // When no th has data-kt-datatable-column (e.g. multi-row headers), use logical column count from tbody so we don't overcount thead cells
-        var columnsToRender = ths.length > 0 ? ths : [];
-        var logicalColumnCount = ths.length > 0 ? ths.length : this._getLogicalColumnCount();
-        this._data.forEach(function (item, rowIndex) {
-            var row = document.createElement('tr');
-            // Apply original tr class if available
-            if (_this._originalTrClasses && _this._originalTrClasses[rowIndex]) {
-                row.className = _this._originalTrClasses[rowIndex];
-            }
-            if (!_this._config.columns) {
-                var dataRowAttributes = _this.getState().originalDataAttributes
-                    ? _this.getState().originalDataAttributes[rowIndex]
-                    : null;
-                for (var colIndex = 0; colIndex < logicalColumnCount; colIndex++) {
-                    var th = columnsToRender[colIndex];
-                    var colName = th === null || th === void 0 ? void 0 : th.getAttribute('data-kt-datatable-column');
-                    var td = document.createElement('td');
-                    var value = void 0;
-                    if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
-                        value = item[colName];
-                    }
-                    else if (Object.prototype.hasOwnProperty.call(item, colIndex)) {
-                        value = item[colIndex];
-                    }
-                    else {
-                        value = '';
-                    }
-                    td.innerHTML = value;
-                    // Apply original td class if available
-                    if (_this._originalTdClasses &&
-                        _this._originalTdClasses[rowIndex] &&
-                        _this._originalTdClasses[rowIndex][colIndex]) {
-                        td.className = _this._originalTdClasses[rowIndex][colIndex];
-                    }
-                    if (dataRowAttributes && dataRowAttributes[colIndex]) {
-                        for (var attr in dataRowAttributes[colIndex]) {
-                            td.setAttribute(attr, dataRowAttributes[colIndex][attr]);
-                        }
-                    }
-                    row.appendChild(td);
-                }
-            }
-            else {
-                Object.keys(_this._config.columns).forEach(function (key, colIndex) {
-                    var td = document.createElement('td');
-                    var columnDef = _this._config.columns[key];
-                    // Apply original td class if available
-                    if (_this._originalTdClasses &&
-                        _this._originalTdClasses[rowIndex] &&
-                        _this._originalTdClasses[rowIndex][colIndex]) {
-                        td.className = _this._originalTdClasses[rowIndex][colIndex];
-                    }
-                    if (typeof columnDef.render === 'function') {
-                        var result = columnDef.render.call(_this, item[key], item, _this);
-                        if (result instanceof HTMLElement ||
-                            result instanceof DocumentFragment) {
-                            td.appendChild(result);
-                        }
-                        else if (typeof result === 'string') {
-                            td.innerHTML = result;
-                        }
-                    }
-                    else {
-                        td.textContent = item[key];
-                    }
-                    if (typeof columnDef.createdCell === 'function') {
-                        columnDef.createdCell.call(_this, td, item[key], item, row);
-                    }
-                    row.appendChild(td);
-                });
-            }
-            fragment.appendChild(row);
-        });
-        tbodyElement.appendChild(fragment);
-        return tbodyElement;
     };
     /**
      * Show a notice on the table
@@ -1026,66 +633,22 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._noticeOnTable = function (message) {
         if (message === void 0) { message = ''; }
-        var row = this._tableElement.tBodies[0].insertRow();
-        var cell = row.insertCell();
-        var logicalCount = this._getLogicalColumnCount();
-        // Use logical column count so multi-row headers don't overcount; fallback to 1 when 0 so message still displays
-        cell.colSpan = logicalCount > 0 ? logicalCount : 1;
-        cell.innerHTML = message;
+        this._tableRenderer.notice(this._tableElement, this._getLogicalColumnCount.bind(this), message);
     };
     KTDataTable.prototype._updatePagination = function () {
-        this._removeChildElements(this._sizeElement);
-        this._createPageSizeControls(this._sizeElement);
-        this._removeChildElements(this._paginationElement);
-        this._createPaginationControls(this._infoElement, this._paginationElement);
-    };
-    /**
-     * Removes all child elements from the given container element.
-     * @param container The container element to remove the child elements from.
-     */
-    KTDataTable.prototype._removeChildElements = function (container) {
-        if (!container) {
-            return;
-        }
-        // Loop through all child elements of the container and remove them one by one
-        while (container.firstChild) {
-            // Remove the first child element (which is the first element in the list of child elements)
-            container.removeChild(container.firstChild);
-        }
-    };
-    /**
-     * Creates a container element for the items per page selector.
-     * @param _sizeElement The element to create the page size controls in.
-     * @returns The container element.
-     */
-    KTDataTable.prototype._createPageSizeControls = function (_sizeElement) {
-        var _this = this;
-        // If no element is provided, return early
-        if (!_sizeElement) {
-            return _sizeElement;
+        var cleanup = this._paginationRenderer.render({
+            config: this._config,
+            dataLength: this._data.length,
+            infoElement: this._infoElement,
+            paginateData: this._paginateData.bind(this),
+            paginationElement: this._paginationElement,
+            reloadPageSize: this._reloadPageSize.bind(this),
+            sizeElement: this._sizeElement,
+            state: this.getState(),
+        });
+        if (typeof cleanup === 'function') {
+            this._cleanupCallbacks.push(cleanup);
         }
-        // Wait for the element to be attached to the DOM
-        setTimeout(function () {
-            // Create <option> elements for each page size option
-            var options = _this._config.pageSizes.map(function (size) {
-                var option = document.createElement('option');
-                option.value = String(size);
-                option.text = String(size);
-                option.selected = _this.getState().pageSize === size;
-                return option;
-            });
-            // Add the <option> elements to the provided element
-            _sizeElement.append.apply(_sizeElement, options);
-        }, 100);
-        // Create an event listener for the "change" event on the element
-        var _pageSizeControlsEvent = function (event) {
-            // When the element changes, reload the page with the new page size and page number 1
-            _this._reloadPageSize(Number(event.target.value), 1);
-        };
-        // Bind the event listener to the component instance
-        _sizeElement.onchange = _pageSizeControlsEvent.bind(this);
-        // Return the element
-        return _sizeElement;
     };
     /**
      * Reloads the data with the specified page size and optional page number.
@@ -1095,120 +658,10 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._reloadPageSize = function (pageSize, page) {
         if (page === void 0) { page = 1; }
         // Update the page size and page number in the state
-        this._config._state.pageSize = pageSize;
-        this._config._state.page = page;
+        this._stateStore.setPageSize(pageSize, page);
         // Update the data with the new page size and page number
         this._updateData();
     };
-    /**
-     * Creates the pagination controls for the component.
-     * @param _infoElement The element to set the info text in.
-     * @param _paginationElement The element to create the pagination controls in.
-     * @return {HTMLElement} The element containing the pagination controls.
-     */
-    KTDataTable.prototype._createPaginationControls = function (_infoElement, _paginationElement) {
-        if (!_infoElement || !_paginationElement || this._data.length === 0) {
-            return null;
-        }
-        this._setPaginationInfoText(_infoElement);
-        var paginationContainer = this._createPaginationContainer(_paginationElement);
-        if (paginationContainer) {
-            this._createPaginationButtons(paginationContainer);
-        }
-        return paginationContainer;
-    };
-    /**
-     * Sets the info text for the pagination controls.
-     * @param _infoElement The element to set the info text in.
-     */
-    KTDataTable.prototype._setPaginationInfoText = function (_infoElement) {
-        _infoElement.textContent = this._config.info
-            .replace('{start}', (this.getState().page - 1) * this.getState().pageSize + 1 + '')
-            .replace('{end}', Math.min(this.getState().page * this.getState().pageSize, this.getState().totalItems) + '')
-            .replace('{total}', this.getState().totalItems + '');
-    };
-    /**
-     * Creates the container element for the pagination controls.
-     * @param _paginationElement The element to create the pagination controls in.
-     * @return {HTMLElement} The container element.
-     */
-    KTDataTable.prototype._createPaginationContainer = function (_paginationElement) {
-        // No longer create a wrapping div. Just return the pagination element itself.
-        return _paginationElement;
-    };
-    /**
-     * Creates the pagination buttons for the component.
-     * @param paginationContainer The container element for the pagination controls.
-     */
-    KTDataTable.prototype._createPaginationButtons = function (paginationContainer) {
-        var _this = this;
-        var _a = this.getState(), currentPage = _a.page, totalPages = _a.totalPages;
-        var _b = this._config.pagination, previous = _b.previous, next = _b.next, number = _b.number, more = _b.more;
-        // Helper function to create a button
-        var createButton = function (text, className, disabled, handleClick) {
-            var button = document.createElement('button');
-            button.className = className;
-            button.innerHTML = text;
-            button.disabled = disabled;
-            button.onclick = handleClick;
-            return button;
-        };
-        // Add Previous Button
-        paginationContainer.appendChild(createButton(previous.text, "".concat(previous.class).concat(currentPage === 1 ? ' disabled' : ''), currentPage === 1, function () { return _this._paginateData(currentPage - 1); }));
-        // Calculate range of pages
-        var pageMoreEnabled = this._config.pageMore;
-        if (pageMoreEnabled) {
-            var maxButtons = this._config.pageMoreLimit;
-            var range_1 = this._calculatePageRange(currentPage, totalPages, maxButtons);
-            // Add start ellipsis
-            if (range_1.start > 1) {
-                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
-                    return _this._paginateData(Math.max(1, range_1.start - 1));
-                }));
-            }
-            var _loop_1 = function (i) {
-                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return _this._paginateData(i); }));
-            };
-            // Add page buttons
-            for (var i = range_1.start; i <= range_1.end; i++) {
-                _loop_1(i);
-            }
-            // Add end ellipsis
-            if (pageMoreEnabled && range_1.end < totalPages) {
-                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
-                    return _this._paginateData(Math.min(totalPages, range_1.end + 1));
-                }));
-            }
-        }
-        else {
-            var _loop_2 = function (i) {
-                paginationContainer.appendChild(createButton(number.text.replace('{page}', i.toString()), "".concat(number.class).concat(currentPage === i ? ' active disabled' : ''), currentPage === i, function () { return _this._paginateData(i); }));
-            };
-            // Add page buttons
-            for (var i = 1; i <= totalPages; i++) {
-                _loop_2(i);
-            }
-        }
-        // Add Next Button
-        paginationContainer.appendChild(createButton(next.text, "".concat(next.class).concat(currentPage === totalPages ? ' disabled' : ''), currentPage === totalPages, function () { return _this._paginateData(currentPage + 1); }));
-    };
-    // New helper method to calculate page range
-    KTDataTable.prototype._calculatePageRange = function (currentPage, totalPages, maxButtons) {
-        var startPage, endPage;
-        var halfMaxButtons = Math.floor(maxButtons / 2);
-        if (totalPages <= maxButtons) {
-            startPage = 1;
-            endPage = totalPages;
-        }
-        else {
-            startPage = Math.max(currentPage - halfMaxButtons, 1);
-            endPage = Math.min(startPage + maxButtons - 1, totalPages);
-            if (endPage - startPage < maxButtons - 1) {
-                startPage = Math.max(endPage - maxButtons + 1, 1);
-            }
-        }
-        return { start: startPage, end: endPage };
-    };
     /**
      * Method for handling pagination
      * @param page - The page number to navigate to
@@ -1217,10 +670,9 @@ var KTDataTable = /** @class */ (function (_super) {
         if (page < 1 || !Number.isInteger(page)) {
             return;
         }
-        this._fireEvent('pagination', { page: page });
-        this._dispatchEvent('pagination', { page: page });
+        this._emit('pagination', { page: page });
         if (page >= 1 && page <= this.getState().totalPages) {
-            this._config._state.page = page;
+            this._stateStore.setPage(page);
             this._updateData();
         }
     };
@@ -1259,8 +711,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {void}
      */
     KTDataTable.prototype._saveState = function () {
-        this._fireEvent('stateSave');
-        this._dispatchEvent('stateSave');
+        this._emit('stateSave');
         var ns = this._tableNamespace();
         if (ns) {
             localStorage.setItem(ns, JSON.stringify(this.getState()));
@@ -1277,7 +728,7 @@ var KTDataTable = /** @class */ (function (_super) {
         try {
             var state = JSON.parse(stateString);
             if (state)
-                this._config._state = state;
+                this._stateStore.replaceState(state);
             return state;
         }
         catch (_a) { }
@@ -1324,16 +775,17 @@ var KTDataTable = /** @class */ (function (_super) {
      * This method is called before re-rendering or when disposing the component.
      */
     KTDataTable.prototype._dispose = function () {
+        this._cleanupCallbacks.forEach(function (cleanup) { return cleanup(); });
+        this._cleanupCallbacks = [];
         // --- 1. Remove search input event listener (debounced) ---
         var tableId = this._tableId();
         var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
         if (searchElement) {
             var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
-            if (!searchWithDebounce._debouncedSearch) {
-                return;
+            if (searchWithDebounce._debouncedSearch) {
+                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
+                delete searchWithDebounce._debouncedSearch;
             }
-            searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
-            delete searchWithDebounce._debouncedSearch;
         }
         // --- 2. Remove page size dropdown event listener ---
         if (this._sizeElement && this._sizeElement.onchange) {
@@ -1401,23 +853,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {KTDataTableStateInterface} The current state of the table.
      */
     KTDataTable.prototype.getState = function () {
-        return __assign({ 
-            /**
-             * The current page number.
-             */
-            page: 1, 
-            /**
-             * The field that the data is sorted by.
-             */
-            sortField: null, 
-            /**
-             * The sort order (ascending or descending).
-             */
-            sortOrder: '', 
-            /**
-             * The number of rows to display per page.
-             */
-            pageSize: this._config.pageSize, filters: [] }, this._config._state);
+        return this._stateStore.getState();
     };
     /**
      * Sorts the data in the table by the specified field.
@@ -1428,10 +864,8 @@ var KTDataTable = /** @class */ (function (_super) {
         var state = this.getState();
         var sortOrder = this._sortHandler.toggleSortOrder(state.sortField, state.sortOrder, field);
         this._sortHandler.setSortIcon(field, sortOrder);
-        this._config._state.sortField = field;
-        this._config._state.sortOrder = sortOrder;
-        this._fireEvent('sort', { field: field, order: sortOrder });
-        this._dispatchEvent('sort', { field: field, order: sortOrder });
+        this._stateStore.setSort(field, sortOrder);
+        this._emit('sort', { field: field, order: sortOrder });
         this._updateData();
     };
     /**
@@ -1464,15 +898,13 @@ var KTDataTable = /** @class */ (function (_super) {
      * Triggers the 'reload' event and the 'kt.datatable.reload' custom event.
      */
     KTDataTable.prototype.reload = function () {
-        this._fireEvent('reload');
-        this._dispatchEvent('reload');
+        this._emit('reload');
         // Fetch the data from the server using the current sort and filter settings
         this._updateData();
     };
     KTDataTable.prototype.redraw = function (page) {
         if (page === void 0) { page = 1; }
-        this._fireEvent('redraw');
-        this._dispatchEvent('redraw');
+        this._emit('redraw');
         this._paginateData(page);
     };
     /**
@@ -1501,18 +933,16 @@ var KTDataTable = /** @class */ (function (_super) {
      * @throws Error if the filter object is null or undefined.
      */
     KTDataTable.prototype.setFilter = function (filter) {
-        this._config._state.filters = __spreadArray(__spreadArray([], (this.getState().filters || []).filter(function (f) { return f.column !== filter.column; }), true), [
-            filter,
-        ], false);
-        this._config._state.page = 1;
+        this._stateStore.setFilter(filter);
         return this;
     };
     KTDataTable.prototype.dispose = function () {
+        var _a;
+        (_a = this._remoteProvider) === null || _a === void 0 ? void 0 : _a.dispose();
         this._dispose();
     };
     KTDataTable.prototype.search = function (query) {
-        this._config._state.search = query;
-        this._config._state.page = 1;
+        this._stateStore.setSearch(query);
         this.reload();
     };
     /**
@@ -1605,8 +1035,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype.check = function () {
         this._checkbox.check();
-        this._fireEvent('checked');
-        this._dispatchEvent('checked');
+        this._emit('checked');
     };
     /**
      * Uncheck all visible row checkboxes
@@ -1614,8 +1043,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype.uncheck = function () {
         this._checkbox.uncheck();
-        this._fireEvent('unchecked');
-        this._dispatchEvent('unchecked');
+        this._emit('unchecked');
     };
     /**
      * Get all checked row IDs (across all pages if preserveSelection is true)