@keenthemes/ktui 1.0.8 → 1.0.9

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

@@ -1,3 +1,7 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -34,8 +38,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -81,10 +85,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import KTComponent from '../component';
-import KTEventHandler from '../../helpers/event-handler';
 import KTUtils from '../../helpers/utils';
 import KTComponents from '../../index';
 import KTData from '../../helpers/data';
+import { createCheckboxHandler, } from './datatable-checkbox';
+import { createSortHandler } from './datatable-sort';
 /**
  * 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.
@@ -99,10 +104,11 @@ var KTDataTable = /** @class */ (function (_super) {
     function KTDataTable(element, config) {
         var _this = _super.call(this) || this;
         _this._name = 'datatable';
-        _this._checkboxListener = function (event) {
-            _this._checkboxToggle(event); // Toggle row checkbox state
-        };
-        // private _searchListener: (value: string) => void;
+        _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._data = [];
         if (KTData.has(element, _this._name))
             return _this;
@@ -112,13 +118,26 @@ var KTDataTable = /** @class */ (function (_super) {
         // Store the instance directly on the element
         element.instance = _this;
         _this._initElements();
+        // Initialize checkbox handler
+        _this._checkbox = createCheckboxHandler(_this._element, _this._config, function (eventName, eventData) {
+            _this._fireEvent(eventName, eventData);
+            _this._dispatchEvent(eventName, eventData);
+        });
+        // 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._fireEvent.bind(_this), _this._dispatchEvent.bind(_this), _this._updateData.bind(_this));
+        _this._sortHandler.initSort();
         if (_this._config.stateSave === false) {
             _this._deleteState();
         }
         if (_this._config.stateSave) {
             _this._loadState();
         }
-        _this._initTableHeader();
         _this._updateData();
         _this._fireEvent('init');
         _this._dispatchEvent('init');
@@ -130,6 +149,7 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns Default configuration merged with user-provided options
      */
     KTDataTable.prototype._initDefaultConfig = function (config) {
+        var _this = this;
         return __assign({ 
             /**
              * HTTP method for server-side API call
@@ -173,7 +193,7 @@ var KTDataTable = /** @class */ (function (_super) {
                     /**
                      * CSS classes to be added to the pagination button
                      */
-                    class: 'btn',
+                    class: 'kt-datatable-pagination-button',
                     /**
                      * Text to be displayed in the pagination button
                      */
@@ -183,32 +203,32 @@ var KTDataTable = /** @class */ (function (_super) {
                     /**
                      * CSS classes to be added to the previous pagination button
                      */
-                    class: 'btn',
+                    class: 'kt-datatable-pagination-button kt-datatable-pagination-prev',
                     /**
                      * Text to be displayed in the previous pagination button
                      */
-                    text: '<i class="ki-outline ki-black-left"></i>',
+                    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: 'btn',
+                    class: 'kt-datatable-pagination-button kt-datatable-pagination-next',
                     /**
                      * Text to be displayed in the next pagination button
                      */
-                    text: '<i class="ki-outline ki-black-right"></i>',
+                    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: 'btn',
+                    class: 'kt-datatable-pagination-button kt-datatable-pagination-more',
                     /**
                      * Text to be displayed in the pagination more button
                      */
                     text: '...',
-                }
+                },
             }, 
             /**
              * Sorting options
@@ -218,7 +238,7 @@ var KTDataTable = /** @class */ (function (_super) {
                  * CSS classes to be added to the sortable headers
                  */
                 classes: {
-                    base: 'sort',
+                    base: 'kt-table-col',
                     asc: 'asc',
                     desc: 'desc',
                 },
@@ -231,22 +251,9 @@ var KTDataTable = /** @class */ (function (_super) {
                  * @returns Sorted data array
                  */
                 callback: function (data, sortField, sortOrder) {
-                    /**
-                     * Compares two values by converting them to strings and removing any HTML tags or white spaces
-                     * @param a First value to be compared
-                     * @param b Second value to be compared
-                     * @returns 1 if a > b, -1 if a < b, 0 if a === b
-                     */
-                    var compareValues = function (a, b) {
-                        var aText = String(a).replace(/<[^>]*>|&nbsp;/g, '');
-                        var bText = String(b).replace(/<[^>]*>|&nbsp;/g, '');
-                        return aText > bText ? (sortOrder === 'asc' ? 1 : -1) : (aText < bText ? (sortOrder === 'asc' ? -1 : 1) : 0);
-                    };
-                    return data.sort(function (a, b) {
-                        var aValue = a[sortField];
-                        var bValue = b[sortField];
-                        return compareValues(aValue, bValue);
-                    });
+                    return _this._sortHandler
+                        ? _this._sortHandler.sortData(data, sortField, sortOrder)
+                        : data;
                 },
             }, search: {
                 /**
@@ -270,14 +277,18 @@ var KTDataTable = /** @class */ (function (_super) {
                             return false;
                         }
                         return Object.values(item).some(function (value) {
-                            if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+                            if (typeof value !== 'string' &&
+                                typeof value !== 'number' &&
+                                typeof value !== 'boolean') {
                                 return false;
                             }
-                            var valueText = String(value).replace(/<[^>]*>|&nbsp;/g, '').toLowerCase();
+                            var valueText = String(value)
+                                .replace(/<[^>]*>|&nbsp;/g, '')
+                                .toLowerCase();
                             return valueText.includes(search.toLowerCase());
                         });
                     });
-                }
+                },
             }, 
             /**
              * Loading spinner options
@@ -286,11 +297,11 @@ var KTDataTable = /** @class */ (function (_super) {
                 /**
                  * 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=\"flex items-center gap-2 px-4 py-2 font-medium leading-none text-2sm border border-gray-200 shadow-default rounded-md text-gray-500 bg-light\">\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",
+                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...'
+                content: 'Loading...',
             }, 
             /**
              * Selectors of the elements to be targeted
@@ -299,39 +310,39 @@ var KTDataTable = /** @class */ (function (_super) {
                 /**
                  * Data table element
                  */
-                table: 'table[data-datatable-table="true"]',
+                table: 'table[data-kt-datatable-table="true"]',
                 /**
                  * Pagination info element
                  */
-                info: '[data-datatable-info="true"]',
+                info: '[data-kt-datatable-info="true"]',
                 /**
                  * Page size dropdown element
                  */
-                size: '[data-datatable-size="true"]',
+                size: '[data-kt-datatable-size="true"]',
                 /**
                  * Pagination element
                  */
-                pagination: '[data-datatable-pagination="true"]',
+                pagination: '[data-kt-datatable-pagination="true"]',
                 /**
                  * Spinner element
                  */
-                spinner: '[data-datatable-spinner="true"]',
+                spinner: '[data-kt-datatable-spinner="true"]',
                 /**
                  * Checkbox element
                  */
-                check: '[data-datatable-check="true"]',
-                checkbox: '[data-datatable-row-check="true"]'
+                check: '[data-kt-datatable-check="true"]',
+                checkbox: '[data-kt-datatable-row-check="true"]',
             }, 
             /**
              * Enable or disable state saving
              */
             stateSave: true, checkbox: {
-                checkedClass: 'checked'
+                checkedClass: 'checked',
             }, 
             /**
              * Private properties
              */
-            _state: {} }, config);
+            _state: {}, loadingClass: 'loading' }, config);
     };
     /**
      * Initialize table, tbody, thead, info, size, and pagination elements
@@ -345,11 +356,14 @@ var KTDataTable = /** @class */ (function (_super) {
         /**
          * Table body element
          */
-        this._tbodyElement = this._tableElement.tBodies[0] || this._tableElement.createTBody();
+        this._tbodyElement =
+            this._tableElement.tBodies[0] || this._tableElement.createTBody();
         /**
          * Table head element
          */
         this._theadElement = this._tableElement.tHead;
+        // Store original classes
+        this._storeOriginalClasses();
         /**
          * Pagination info element
          */
@@ -363,6 +377,35 @@ var KTDataTable = /** @class */ (function (_super) {
          */
         this._paginationElement = this._element.querySelector(this._config.attributes.pagination);
     };
+    /**
+     * Store original classes from table elements
+     * @returns {void}
+     */
+    KTDataTable.prototype._storeOriginalClasses = function () {
+        var _this = this;
+        // Store tbody class
+        if (this._tbodyElement) {
+            this._originalTbodyClass = this._tbodyElement.className || '';
+        }
+        // Store thead class and th classes
+        if (this._theadElement) {
+            this._originalTheadClass = this._theadElement.className || '';
+            // Store th classes
+            var thElements = this._theadElement.querySelectorAll('th');
+            this._originalThClasses = 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 || ''; });
+            // Store td classes as a 2D array
+            this._originalTdClasses = [];
+            Array.from(originalRows).forEach(function (row, rowIndex) {
+                var tdElements = row.querySelectorAll('td');
+                _this._originalTdClasses[rowIndex] = Array.from(tdElements).map(function (td) { return td.className || ''; });
+            });
+        }
+    };
     /**
      * Fetch data from the server or from the DOM if `apiEndpoint` is not defined.
      * @returns {Promise<void>} Promise which is resolved after data has been fetched and checkbox plugin initialized.
@@ -372,7 +415,7 @@ var KTDataTable = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 this._showSpinner(); // Show spinner before fetching data
                 // Fetch data from the DOM and initialize the checkbox plugin
-                return [2 /*return*/, (typeof this._config.apiEndpoint === 'undefined')
+                return [2 /*return*/, typeof this._config.apiEndpoint === 'undefined'
                         ? this._fetchDataFromLocal().then(this._finalize.bind(this))
                         : this._fetchDataFromServer().then(this._finalize.bind(this))];
             });
@@ -384,12 +427,10 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._finalize = function () {
         this._element.classList.add('datatable-initialized');
-        var headerCheckElement = this._element.querySelector(this._config.attributes.check);
-        if (headerCheckElement) {
-            this._initChecbox(headerCheckElement);
-        }
+        // Initialize checkbox logic
+        this._checkbox.init();
         this._attachSearchEvent();
-        if (typeof KTComponents !== "undefined") {
+        if (typeof KTComponents !== 'undefined') {
             KTComponents.init();
         }
         /**
@@ -404,7 +445,14 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._attachSearchEvent = function () {
         var _this = this;
         var tableId = this._tableId();
-        var searchElement = document.querySelector("[data-datatable-search=\"#".concat(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 =
+                typeof search === 'string' ? search : String(search);
+        }
         if (searchElement) {
             // Check if a debounced search function already exists
             if (searchElement._debouncedSearch) {
@@ -421,17 +469,6 @@ var KTDataTable = /** @class */ (function (_super) {
             searchElement.addEventListener('keyup', debouncedSearch);
         }
     };
-    /**
-     * Initialize the checkbox plugin
-     * @param {HTMLInputElement} headerCheckElement - The header checkbox element
-     * @returns {void}
-     */
-    KTDataTable.prototype._initChecbox = function (headerCheckElement) {
-        this._headerCheckElement = headerCheckElement;
-        this._headerChecked = headerCheckElement.checked;
-        this._targetElements = this._element.querySelectorAll(this._config.attributes.checkbox);
-        this._checkboxHandler();
-    };
     /**
      * Fetch data from the DOM
      * Fetch data from the table element and save it to the `originalData` state property.
@@ -444,10 +481,16 @@ var KTDataTable = /** @class */ (function (_super) {
             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()) {
+                        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;
@@ -455,12 +498,14 @@ var KTDataTable = /** @class */ (function (_super) {
                         }
                         // Update the original data variable
                         originalData = this.getState().originalData;
-                        _temp = this._data = __spreadArray([], originalData, true);
+                        _temp = (this._data = __spreadArray([], originalData, true));
                         if (search) {
                             _temp = this._data = this._config.search.callback.call(this, this._data, search);
                         }
                         // If sorting is defined, sort the data
-                        if (sortField !== undefined && sortOrder !== undefined && sortOrder !== '') {
+                        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);
                             }
@@ -478,6 +523,8 @@ var KTDataTable = /** @class */ (function (_super) {
                     case 1:
                         // Draw the data
                         _d.sent();
+                        this._fireEvent('fetched');
+                        this._dispatchEvent('fetched');
                         return [2 /*return*/];
                 }
             });
@@ -509,30 +556,32 @@ var KTDataTable = /** @class */ (function (_super) {
         return false;
     };
     /**
-     * Extracts the table content and returns it as an object containing an array of original data and an array of original data attributes.
+     * 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');
+        var ths = this._theadElement
+            ? this._theadElement.querySelectorAll('th')
+            : [];
         rows.forEach(function (row) {
             var dataRow = {};
             var dataRowAttribute = {};
-            // Loop through each cell in the row
             row.querySelectorAll('td').forEach(function (td, index) {
-                var _a;
-                var attributes = {};
-                // Copy all attributes to the cell data
-                Array.from(td.attributes).forEach(function (attr) {
-                    attributes[attr.name] = attr.value;
-                });
-                // Set the data for the current row and cell
-                dataRow[index] = (_a = td.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-                dataRowAttribute[index] = attributes;
+                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 the row has any data, add it to the original data array
             if (Object.keys(dataRow).length > 0) {
                 originalData.push(dataRow);
                 originalDataAttributes.push(dataRowAttribute);
@@ -545,10 +594,13 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {boolean} - Returns true if the table header is invalidated, false otherwise
      */
     KTDataTable.prototype._localTableHeaderInvalidate = function () {
-        var _a;
         var originalData = this.getState().originalData;
-        var currentTableHeaders = ((_a = this._getTableHeaders()) === null || _a === void 0 ? void 0 : _a.length) || 0;
-        var totalColumns = originalData.length ? Object.keys(originalData[0]).length : 0;
+        var currentTableHeaders = this._theadElement
+            ? this._theadElement.querySelectorAll('th').length
+            : 0;
+        var totalColumns = originalData.length
+            ? Object.keys(originalData[0]).length
+            : 0;
         return currentTableHeaders !== totalColumns;
     };
     /**
@@ -590,6 +642,8 @@ var KTDataTable = /** @class */ (function (_super) {
                         return [4 /*yield*/, this._draw()];
                     case 6:
                         _a.sent();
+                        this._fireEvent('fetched');
+                        this._dispatchEvent('fetched');
                         return [2 /*return*/];
                 }
             });
@@ -645,21 +699,51 @@ var KTDataTable = /** @class */ (function (_super) {
                     requestBody = queryParams;
                 }
                 else if (requestMethod === 'GET') {
-                    apiEndpointWithQueryParams = new URL(this._config.apiEndpoint);
+                    apiEndpointWithQueryParams = this._createUrl(this._config.apiEndpoint);
                     apiEndpointWithQueryParams.search = queryParams.toString();
                     this._config.apiEndpoint = apiEndpointWithQueryParams.toString();
                 }
                 return [2 /*return*/, fetch(this._config.apiEndpoint, {
                         method: requestMethod,
                         body: requestBody,
-                        headers: this._config.requestHeaders
+                        headers: this._config.requestHeaders,
                     }).catch(function (error) {
+                        // Trigger an error event
+                        _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.
+     *
+     * This method accepts a string that can be either a relative path or a full URL.
+     * If the string is a complete URL (i.e., it contains a valid protocol), a URL
+     * object based on that string is returned. Otherwise, it ensures the path starts
+     * with a "/" and combines it with the provided base URL (or the current window's origin)
+     * to form a complete URL.
+     *
+     * @param {string} pathOrUrl - The path or URL to process.
+     * @param {string | null} [baseUrl=window.location.origin] - The base URL for resolving the relative path.
+     *                                                           Defaults to the current window's origin.
+     * @returns {URL} The resulting URL object.
+     */
+    KTDataTable.prototype._createUrl = function (pathOrUrl, baseUrl) {
+        if (baseUrl === void 0) { baseUrl = window.location.origin; }
+        // Regular expression to check if the input is a full URL
+        var isFullUrl = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(pathOrUrl);
+        if (isFullUrl) {
+            return new URL(pathOrUrl); // Return full URL as URL object
+        }
+        // Ensure path starts with a slash to avoid incorrect concatenation
+        var normalizedPath = pathOrUrl.startsWith('/')
+            ? pathOrUrl
+            : "/".concat(pathOrUrl);
+        return new URL(normalizedPath, baseUrl);
+    };
     /**
      * Update the table and pagination controls with new data
      * @returns {Promise<void>} A promise that resolves when the table and pagination controls are updated
@@ -667,7 +751,8 @@ 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._config._state.totalPages =
+                    Math.ceil(this.getState().totalItems / this.getState().pageSize) || 0;
                 this._fireEvent('draw');
                 this._dispatchEvent('draw');
                 this._dispose();
@@ -699,89 +784,13 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         // 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;
     };
-    /**
-     * Initialize the table header
-     * Add sort event listener to all sortable columns
-     */
-    KTDataTable.prototype._initTableHeader = function () {
-        var _this = this;
-        if (!this._theadElement) {
-            return;
-        }
-        // Set the initial sort icon
-        this._setSortIcon(this.getState().sortField, this.getState().sortOrder);
-        // Get all the table headers
-        var headers = this._getTableHeaders();
-        // Loop through each table header
-        headers.forEach(function (header) {
-            // If the sort class is not found, it's not a sortable column
-            if (!header.querySelector(".".concat(_this._config.sort.classes.base))) {
-                return;
-            }
-            var sortAttribute = header.getAttribute('data-datatable-column-sort') || header.getAttribute('data-datatable-column');
-            var sortField = sortAttribute ? sortAttribute : header.cellIndex;
-            // Add click event listener to the header
-            header.addEventListener('click', function () {
-                var sortOrder = _this._toggleSortOrder(sortField);
-                _this._setSortIcon(sortField, sortOrder);
-                _this._sort(sortField);
-            });
-        });
-    };
-    /**
-     * Returns an array of table headers as HTMLTableCellElement.
-     * @returns {HTMLTableCellElement[]} An array of table headers.
-     */
-    KTDataTable.prototype._getTableHeaders = function () {
-        if (!this._theadElement) {
-            return [];
-        }
-        return Array.from(this._theadElement.querySelectorAll('th'));
-    };
-    /**
-     * Sets the sort icon in the table header
-     * @param sortField The field to set the sort icon for
-     * @param sortOrder The sort order (ascending or descending)
-     */
-    KTDataTable.prototype._setSortIcon = function (sortField, sortOrder) {
-        var sortClass = sortOrder ? (sortOrder === 'asc' ? this._config.sort.classes.asc : this._config.sort.classes.desc) : '';
-        // Get the appropriate table header element
-        var th = typeof sortField === 'number'
-            ? this._theadElement.querySelectorAll('th')[sortField]
-            : this._theadElement.querySelector("th[data-datatable-column=\"".concat(String(sortField), "\"], th[data-datatable-column-sort=\"").concat(String(sortField), "\"]"));
-        if (th) {
-            var sortElement = th.querySelector(".".concat(this._config.sort.classes.base));
-            if (sortElement) {
-                sortElement.className = "".concat(this._config.sort.classes.base, " ").concat(sortClass).trim();
-            }
-        }
-    };
-    /**
-     * Toggles the sort order of a column
-     * @param sortField The field to toggle the sort order for
-     * @returns The new sort order (ascending, descending or unsorted)
-     */
-    KTDataTable.prototype._toggleSortOrder = function (sortField) {
-        var _this = this;
-        // If the sort field is the same as the current sort field,
-        // toggle the sort order. Otherwise, set the sort order to ascending.
-        return (function () {
-            if (_this.getState().sortField === sortField) {
-                switch (_this.getState().sortOrder) {
-                    case 'asc':
-                        return 'desc'; // Descending
-                    case 'desc':
-                        return ''; // Unsorted
-                    default:
-                        return 'asc'; // Ascending
-                }
-            }
-            return 'asc'; // Ascending
-        })();
-    };
     /**
      * Update the table content
      * @param tbodyElement The table body element
@@ -795,16 +804,41 @@ var KTDataTable = /** @class */ (function (_super) {
             this._noticeOnTable(this._config.infoEmpty || '');
             return tbodyElement;
         }
+        var ths = this._theadElement
+            ? this._theadElement.querySelectorAll('th')
+            : [];
         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_1 = _this.getState().originalDataAttributes
                     ? _this.getState().originalDataAttributes[rowIndex]
                     : null;
-                Object.keys(item).forEach(function (key, colIndex) {
+                // Use the order of <th> elements to render <td>s in the correct order
+                ths.forEach(function (th, colIndex) {
+                    var colName = th.getAttribute('data-kt-datatable-column');
                     var td = document.createElement('td');
-                    td.innerHTML = item[key];
-                    if (dataRowAttributes_1) {
+                    var value;
+                    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_1 && dataRowAttributes_1[colIndex]) {
                         for (var attr in dataRowAttributes_1[colIndex]) {
                             td.setAttribute(attr, dataRowAttributes_1[colIndex][attr]);
                         }
@@ -813,9 +847,15 @@ var KTDataTable = /** @class */ (function (_super) {
                 });
             }
             else {
-                Object.keys(_this._config.columns).forEach(function (key) {
+                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') {
                         td.innerHTML = columnDef.render.call(_this, item[key], item, _this);
                     }
@@ -839,11 +879,12 @@ var KTDataTable = /** @class */ (function (_super) {
      * @returns {void}
      */
     KTDataTable.prototype._noticeOnTable = function (message) {
-        var _a;
         if (message === void 0) { message = ''; }
-        var row = this._tbodyElement.insertRow();
+        var row = this._tableElement.tBodies[0].insertRow();
         var cell = row.insertCell();
-        cell.colSpan = ((_a = this._getTableHeaders()) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        cell.colSpan = this._theadElement
+            ? this._theadElement.querySelectorAll('th').length
+            : 0;
         cell.innerHTML = message;
     };
     KTDataTable.prototype._updatePagination = function () {
@@ -943,10 +984,8 @@ var KTDataTable = /** @class */ (function (_super) {
      * @return {HTMLElement} The container element.
      */
     KTDataTable.prototype._createPaginationContainer = function (_paginationElement) {
-        var paginationContainer = document.createElement('div');
-        paginationContainer.className = 'pagination';
-        _paginationElement.appendChild(paginationContainer);
-        return paginationContainer;
+        // No longer create a wrapping div. Just return the pagination element itself.
+        return _paginationElement;
     };
     /**
      * Creates the pagination buttons for the component.
@@ -974,7 +1013,9 @@ var KTDataTable = /** @class */ (function (_super) {
             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)); }));
+                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); }));
@@ -985,7 +1026,9 @@ var KTDataTable = /** @class */ (function (_super) {
             }
             // 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)); }));
+                paginationContainer.appendChild(createButton(more.text, more.class, false, function () {
+                    return _this._paginateData(Math.min(totalPages, range_1.end + 1));
+                }));
             }
         }
         else {
@@ -1038,7 +1081,7 @@ var KTDataTable = /** @class */ (function (_super) {
         if (spinner) {
             spinner.style.display = 'block';
         }
-        this._element.classList.add('loading');
+        this._element.classList.add(this._config.loadingClass);
     };
     // Method to hide the loading spinner
     KTDataTable.prototype._hideSpinner = function () {
@@ -1046,7 +1089,7 @@ var KTDataTable = /** @class */ (function (_super) {
         if (spinner) {
             spinner.style.display = 'none';
         }
-        this._element.classList.remove('loading');
+        this._element.classList.remove(this._config.loadingClass);
     };
     // Method to create a spinner element if it doesn't exist
     KTDataTable.prototype._createSpinner = function () {
@@ -1054,9 +1097,11 @@ var KTDataTable = /** @class */ (function (_super) {
             return null;
         }
         var template = document.createElement('template');
-        template.innerHTML = this._config.loading.template.trim().replace('{content}', this._config.loading.content);
+        template.innerHTML = this._config.loading.template
+            .trim()
+            .replace('{content}', this._config.loading.content);
         var spinner = template.content.firstChild;
-        spinner.setAttribute('data-datatable-spinner', 'true');
+        spinner.setAttribute('data-kt-datatable-spinner', 'true');
         this._tableElement.appendChild(spinner);
         return spinner;
     };
@@ -1125,25 +1170,8 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         return id;
     };
-    /**
-     * Sorts the data in the table by the specified field.
-     * @param sortField The field to sort by.
-     */
-    KTDataTable.prototype._sort = function (sortField) {
-        // Determine the new sort order based on the current state
-        var newSortOrder = this._toggleSortOrder(sortField);
-        // Update the current sort field and order
-        this._config._state.sortField = sortField;
-        this._config._state.sortOrder = newSortOrder;
-        this._fireEvent('sort', { field: sortField, order: newSortOrder });
-        this._dispatchEvent('sort', { field: sortField, order: newSortOrder });
-        // Fetch data from the server with the new sort order
-        this._updateData();
-    };
     KTDataTable.prototype._dispose = function () {
-        if (this._headerCheckElement) {
-            this._headerCheckElement.removeEventListener('click', this._checkboxListener);
-        }
+        // Remove all event listeners and clean up resources
     };
     KTDataTable.prototype._debounce = function (func, wait) {
         var timeout;
@@ -1160,146 +1188,6 @@ var KTDataTable = /** @class */ (function (_super) {
             timeout = window.setTimeout(later, wait);
         };
     };
-    /**
-     * Event handlers
-     */
-    KTDataTable.prototype._checkboxHandler = function () {
-        var _this = this;
-        // Handle header checkbox change event
-        this._headerCheckElement.addEventListener('click', this._checkboxListener);
-        // Handle target checbox change event
-        KTEventHandler.on(document.body, this._config.attributes.checkbox, 'input', function (event) {
-            _this._checkboxUpdate(event); // Update checkbox state based on checked rows
-        });
-    };
-    /**
-     * Checks if element is checked
-     * @returns {boolean}
-     */
-    KTDataTable.prototype._isChecked = function () {
-        return this._headerChecked;
-    };
-    /**
-     * Change checkbox state
-     * @param checked The new state of the checkbox
-     * @returns {void}
-     */
-    KTDataTable.prototype._change = function (checked) {
-        var payload = { cancel: false };
-        this._fireEvent('change', payload);
-        this._dispatchEvent('change', payload);
-        if (payload.cancel === true) {
-            return;
-        }
-        this._headerChecked = checked;
-        this._headerCheckElement.checked = checked;
-        if (this._targetElements) {
-            this._targetElements.forEach(function (element) {
-                if (element) {
-                    element.checked = checked;
-                }
-            });
-        }
-        this._fireEvent('changed');
-        this._dispatchEvent('changed');
-    };
-    /**
-     * Toggle checkbox state
-     * @param event The event if available
-     * @returns {void}
-     */
-    KTDataTable.prototype._checkboxToggle = function (event) {
-        var checked = !this._isChecked();
-        var eventType = checked ? 'checked' : 'unchecked';
-        this._fireEvent(eventType);
-        this._dispatchEvent(eventType);
-        this._change(checked);
-    };
-    /**
-     * Update checkbox state based on checked rows
-     * @param event The event if available
-     * @returns {void}
-     */
-    KTDataTable.prototype._checkboxUpdate = function (event) {
-        var checked = 0;
-        var total = this._targetElements.length;
-        for (var i = 0; i < total; i++) {
-            var element = this._targetElements[i];
-            if (!element) {
-                continue;
-            }
-            var row = element.closest('tr');
-            if (!row) {
-                continue;
-            }
-            if (element.checked) {
-                row.classList.add(this._config.checkbox.checkedClass);
-                checked++;
-            }
-            else {
-                row.classList.remove(this._config.checkbox.checkedClass);
-            }
-        }
-        if (checked === 0) {
-            this._headerCheckElement.indeterminate = false;
-            this._change(false);
-        }
-        if (checked > 0 && checked < total) {
-            this._headerCheckElement.indeterminate = true;
-        }
-        if (checked === total) {
-            this._headerCheckElement.indeterminate = false;
-            this._change(true);
-        }
-    };
-    /**
-     * Get checked row IDs
-     * @returns {string[]} An array of checked row IDs
-     */
-    KTDataTable.prototype._getChecked = function () {
-        var checked = [];
-        this._targetElements.forEach(function (element) {
-            if (element && element.checked) {
-                var value = element.value;
-                if (value) {
-                    checked.push(value);
-                }
-            }
-        });
-        return checked;
-    };
-    KTDataTable.prototype.isChecked = function () {
-        return this._isChecked();
-    };
-    KTDataTable.prototype.toggle = function () {
-        this._checkboxToggle();
-    };
-    /**
-     * Check all rows
-     * @returns {void}
-     */
-    KTDataTable.prototype.check = function () {
-        this._change(true);
-        this._checkboxUpdate();
-    };
-    /**
-     * Uncheck all rows
-     * @returns {void}
-     */
-    KTDataTable.prototype.uncheck = function () {
-        this._change(false);
-    };
-    /**
-     * Get checked row IDs
-     * @returns {string[]} An array of checked row IDs
-     */
-    KTDataTable.prototype.getChecked = function () {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return this._getChecked();
-    };
-    KTDataTable.prototype.update = function () {
-        this._checkboxUpdate();
-    };
     /**
      * Gets the current state of the table.
      * @returns {KTDataTableStateInterface} The current state of the table.
@@ -1328,8 +1216,15 @@ var KTDataTable = /** @class */ (function (_super) {
      * @param field The field to sort by.
      */
     KTDataTable.prototype.sort = function (field) {
-        // Sort the data
-        this._sort(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);
+        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._updateData();
     };
     /**
      * Navigates to the specified page in the data table.
@@ -1399,7 +1294,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype.setFilter = function (filter) {
         this._config._state.filters = __spreadArray(__spreadArray([], (this.getState().filters || []).filter(function (f) { return f.column !== filter.column; }), true), [
-            filter
+            filter,
         ], false);
         return this;
     };
@@ -1411,17 +1306,18 @@ var KTDataTable = /** @class */ (function (_super) {
         this.reload();
     };
     /**
-     * Create KTDataTable instances for all elements with a data-datatable="true" attribute.
+     * Create KTDataTable instances for all elements with a data-kt-datatable="true" attribute.
      *
      * This function should be called after the control(s) have been
      * loaded and parsed by the browser. It will create instances of
-     * KTDataTable for all elements with a data-datatable="true" attribute.
+     * KTDataTable for all elements with a data-kt-datatable="true" attribute.
      */
     KTDataTable.createInstances = function () {
         var _this = this;
-        var elements = document.querySelectorAll('[data-datatable="true"]');
+        var elements = document.querySelectorAll('[data-kt-datatable="true"]');
         elements.forEach(function (element) {
-            if (element.hasAttribute('data-datatable') && !element.classList.contains('datatable-initialized')) {
+            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
@@ -1448,9 +1344,55 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.init = function () {
         // Create instances of KTDataTable for all elements with a
-        // data-datatable="true" attribute
+        // data-kt-datatable="true" attribute
         KTDataTable.createInstances();
     };
+    /**
+     * Check if all visible rows are checked (header checkbox state)
+     * @returns {boolean}
+     */
+    KTDataTable.prototype.isChecked = function () {
+        return this._checkbox.isChecked();
+    };
+    /**
+     * Toggle all visible row checkboxes (header checkbox)
+     * @returns {void}
+     */
+    KTDataTable.prototype.toggle = function () {
+        this._checkbox.toggle();
+    };
+    /**
+     * Check all visible row checkboxes
+     * @returns {void}
+     */
+    KTDataTable.prototype.check = function () {
+        this._checkbox.check();
+        this._fireEvent('checked');
+        this._dispatchEvent('checked');
+    };
+    /**
+     * Uncheck all visible row checkboxes
+     * @returns {void}
+     */
+    KTDataTable.prototype.uncheck = function () {
+        this._checkbox.uncheck();
+        this._fireEvent('unchecked');
+        this._dispatchEvent('unchecked');
+    };
+    /**
+     * Get all checked row IDs (across all pages if preserveSelection is true)
+     * @returns {string[]}
+     */
+    KTDataTable.prototype.getChecked = function () {
+        return this._checkbox.getChecked();
+    };
+    /**
+     * Reapply checked state to visible checkboxes (after redraw/pagination)
+     * @returns {void}
+     */
+    KTDataTable.prototype.update = function () {
+        this._checkbox.updateState();
+    };
     /**
      * Static variables
      */
@@ -1458,4 +1400,7 @@ var KTDataTable = /** @class */ (function (_super) {
     return KTDataTable;
 }(KTComponent));
 export { KTDataTable };
+if (typeof window !== 'undefined') {
+    window.KTDataTable = KTDataTable;
+}
 //# sourceMappingURL=datatable.js.map