@liedekef/ftable 1.3.6 → 1.3.7

package/ftable.umd.js

@@ -34,7 +34,8 @@
     printTable: '🖨️ Print',
     cloneRecord: 'Clone Record',
     resetTable: 'Reset table',
-    resetTableConfirm: 'This will reset all columns, pagesize, sorting to their defaults. Do you want to continue?',
+    resetTableConfirm: 'This will reset column visibility, column widths and page size to their defaults. Do you want to continue?',
+    resetTableTooltip: 'Resets column visibility, column widths and page size to defaults. Sorting is not affected.',
     resetSearch: 'Reset'
 };
 
@@ -2018,7 +2019,8 @@ class FTable extends FTableEventEmitter {
             saveUserPreferences: true,
             saveUserPreferencesMethod: 'localStorage',
             defaultSorting: '',
-            tableReset: false,
+            tableResetButton: false,
+            sortingResetButton: false,
             
             // Paging
             paging: false,
@@ -2228,6 +2230,23 @@ class FTable extends FTableEventEmitter {
             this.createPageSizeSelector();
         }
 
+        // Table reset button — resets column visibility/widths and pageSize (not sorting)
+        if (this.options.tableResetButton) {
+            const resetTableBtn = FTableDOMHelper.create('button', {
+                className: 'ftable-toolbar-item ftable-table-reset-btn',
+                textContent: this.options.messages.resetTable || 'Reset table',
+                title: this.options.messages.resetTableTooltip || 'Resets column visibility, column widths and page size to defaults.',
+                type: 'button',
+                parent: this.elements.rightArea
+            });
+            resetTableBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                const msg = this.options.messages.resetTableConfirm;
+                this.modals.resetTable.setContent(`<p>${msg}</p>`);
+                this.modals.resetTable.show();
+            });
+        }
+
     }
 
     createPageSizeSelector() {
@@ -3197,6 +3216,10 @@ class FTable extends FTableEventEmitter {
         this.createInfoModal();
         this.createLoadingModal();
 
+        if (this.options.tableResetButton) {
+            this.createResetTableModal();
+        }
+
         // Initialize them (create DOM) once
         Object.values(this.modals).forEach(modal => modal.create());
     }
@@ -3282,6 +3305,34 @@ class FTable extends FTableEventEmitter {
         });
     }
 
+    createResetTableModal() {
+        this.modals.resetTable = new FtableModal({
+            parent: this.elements.mainContainer,
+            title: this.options.messages.resetTable || 'Reset table',
+            className: 'ftable-reset-table-modal',
+            closeOnOverlayClick: this.options.closeOnOverlayClick,
+            buttons: [
+                {
+                    text: this.options.messages.cancel,
+                    className: 'ftable-dialog-cancelbutton',
+                    onClick: () => this.modals.resetTable.close()
+                },
+                {
+                    text: this.options.messages.yes,
+                    className: 'ftable-dialog-savebutton',
+                    onClick: () => {
+                        this.userPrefs.remove('column-settings');
+                        // Preserve current sorting, only reset column settings and pageSize
+                        this.userPrefs.set('table-state', JSON.stringify({
+                            sorting: this.state.sorting
+                        }));
+                        location.reload();
+                    }
+                }
+            ]
+        });
+    }
+
     createErrorModal() {
         this.modals.error = new FtableModal({
             parent: this.elements.mainContainer,
@@ -3565,6 +3616,21 @@ class FTable extends FTableEventEmitter {
             });
         }
 
+        // Sorting reset button — visible only when sorting differs from default
+        if (this.options.sorting && this.options.sortingResetButton) {
+            this.elements.sortingResetBtn = this.addToolbarButton({
+                text: this.options.messages.resetSorting || 'Reset sorting',
+                className: 'ftable-toolbar-item-sorting-reset',
+                onClick: () => {
+                    this.state.sorting = [];
+                    this.updateSortingHeaders();
+                    this.load();
+                    this.saveState();
+                }
+            });
+            FTableDOMHelper.hide(this.elements.sortingResetBtn); // hidden by default
+        }
+
         if (this.options.actions.createAction) {
             this.addToolbarButton({
                 text: this.options.messages.addNewRecord,
@@ -4604,19 +4670,45 @@ class FTable extends FTableEventEmitter {
     }
 
     updateSortingHeaders() {
-        // Clear all sorting classes
+        // Clear all sorting classes and remove any existing sort badges
         const headers = this.elements.table.querySelectorAll('.ftable-column-header-sortable');
         headers.forEach(header => {
             FTableDOMHelper.removeClass(header, 'ftable-column-header-sorted-asc ftable-column-header-sorted-desc');
+            const existing = header.querySelector('.ftable-sort-badge');
+            if (existing) existing.remove();
         });
-        
-        // Apply current sorting classes
-        this.state.sorting.forEach(sort => {
+
+        // Apply current sorting classes and sort number badges
+        this.state.sorting.forEach((sort, index) => {
             const header = this.elements.table.querySelector(`[data-field-name="${sort.fieldName}"]`);
-            if (header) {
-                FTableDOMHelper.addClass(header, `ftable-column-header-sorted-${sort.direction.toLowerCase()}`);
+            if (!header) return;
+
+            FTableDOMHelper.addClass(header, `ftable-column-header-sorted-${sort.direction.toLowerCase()}`);
+
+            // Sort number badge — only show when multisorting with more than 1 active sort
+            if (this.options.multiSorting && this.state.sorting.length > 1) {
+                const container = header.querySelector('.ftable-column-header-container');
+                if (container) {
+                    FTableDOMHelper.create('span', {
+                        className: 'ftable-sort-badge',
+                        textContent: String(index + 1),
+                        parent: container
+                    });
+                }
             }
         });
+
+        // Update visibility of the sorting reset toolbar button
+        this._updateSortingResetButton();
+    }
+
+    _updateSortingResetButton() {
+        if (!this.elements.sortingResetBtn) return;
+        if (this.state.sorting.length === 0) {
+            FTableDOMHelper.hide(this.elements.sortingResetBtn);
+        } else {
+            FTableDOMHelper.show(this.elements.sortingResetBtn);
+        }
     }
 
     // Paging Methods
@@ -5198,8 +5290,8 @@ class FTable extends FTableEventEmitter {
         // this.emit('columnVisibilityChanged', { field: field });
     }
 
-    // Responsive helpers
 /*
+    // Responsive helpers
     makeResponsive() {
         // Add responsive classes and behavior
         FTableDOMHelper.addClass(this.elements.mainContainer, 'ftable-responsive');
@@ -5244,200 +5336,6 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    // Advanced search functionality
-    enableSearch(options = {}) {
-        const searchOptions = {
-            placeholder: 'Search...',
-            debounceMs: 300,
-            searchFields: this.columnList,
-            ...options
-        };
-
-        const searchContainer = FTableDOMHelper.create('div', {
-            className: 'ftable-search-container',
-            parent: this.elements.toolbarDiv
-        });
-
-        const searchInput = FTableDOMHelper.create('input', {
-            attributes: {
-                type: 'text',
-                placeholder: searchOptions.placeholder,
-                class: 'ftable-search-input'
-            },
-            parent: searchContainer
-        });
-
-        // Debounced search
-        let searchTimeout;
-        searchInput.addEventListener('input', (e) => {
-            clearTimeout(searchTimeout);
-            searchTimeout = setTimeout(() => {
-                this.performSearch(e.target.value, searchOptions.searchFields);
-            }, searchOptions.debounceMs);
-        });
-
-        return searchInput;
-    }
-
-    async performSearch(query, searchFields) {
-        if (!query.trim()) {
-            return this.load(); // Clear search
-        }
-
-        const searchParams = {
-            search: query,
-            searchFields: searchFields.join(',')
-        };
-
-        return this.load(searchParams);
-    }
-
-    // Keyboard shortcuts
-    enableKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-            // Only handle shortcuts when table has focus or is active
-            if (!this.elements.mainContainer.contains(document.activeElement)) return;
-
-            switch (e.key) {
-                case 'n':
-                    if (e.ctrlKey && this.options.actions.createAction) {
-                        e.preventDefault();
-                        this.showAddRecordForm();
-                    }
-                    break;
-                case 'r':
-                    if (e.ctrlKey) {
-                        e.preventDefault();
-                        this.reload();
-                    }
-                    break;
-                case 'Delete':
-                    if (this.options.actions.deleteAction) {
-                        const selectedRows = this.getSelectedRows();
-                        if (selectedRows.length > 0) {
-                            e.preventDefault();
-                            this.bulkDelete();
-                        }
-                    }
-                    break;
-                case 'a':
-                    if (e.ctrlKey && this.options.selecting && this.options.multiselect) {
-                        e.preventDefault();
-                        this.toggleSelectAll(true);
-                    }
-                    break;
-                case 'Escape':
-                    // Close any open modals
-                    Object.values(this.modals).forEach(modal => {
-                        if (modal.isOpen) modal.close();
-                    });
-                    break;
-            }
-        });
-    }
-
-    // Real-time updates via WebSocket
-    enableRealTimeUpdates(websocketUrl) {
-        if (!websocketUrl) return;
-
-        this.websocket = new WebSocket(websocketUrl);
-        
-        this.websocket.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                this.handleRealTimeUpdate(data);
-            } catch (error) {
-                this.logger.error('Failed to parse WebSocket message', error);
-            }
-        };
-
-        this.websocket.onerror = (error) => {
-            this.logger.error('WebSocket error', error);
-        };
-
-        this.websocket.onclose = () => {
-            this.logger.info('WebSocket connection closed');
-            // Attempt to reconnect after delay
-            setTimeout(() => {
-                if (this.websocket.readyState === WebSocket.CLOSED) {
-                    this.enableRealTimeUpdates(websocketUrl);
-                }
-            }, 5000);
-        };
-    }
-
-    handleRealTimeUpdate(data) {
-        switch (data.type) {
-            case 'record_added':
-                this.addRecordToTable(data.record);
-                break;
-            case 'record_updated':
-                this.updateRecordInTable(data.record);
-                break;
-            case 'record_deleted':
-                this.removeRecordFromTable(data.recordKey);
-                break;
-            case 'refresh':
-                this.reload();
-                break;
-        }
-    }
-
-    addRecordToTable(record) {
-        const row = this.createTableRow(record);
-        
-        // Add to beginning or end based on sorting
-        if (this.state.sorting.length > 0) {
-            // Would need to calculate correct position based on sort
-            this.elements.tableBody.appendChild(row);
-        } else {
-            this.elements.tableBody.appendChild(row);
-        }
-        
-        this.state.records.push(record);
-        this.removeNoDataRow();
-        this.refreshRowStyles();
-        
-        // Show animation
-        if (this.options.animationsEnabled) {
-            this.showRowAnimation(row, 'added');
-        }
-    }
-
-    updateRecordInTable(record) {
-        const keyValue = this.getKeyValue(record);
-        const existingRow = this.getRowByKey(keyValue);
-        
-        if (existingRow) {
-            this.updateRowData(existingRow, record);
-            
-            if (this.options.animationsEnabled) {
-                this.showRowAnimation(existingRow, 'updated');
-            }
-        }
-    }
-
-    removeRecordFromTable(keyValue) {
-        const row = this.getRowByKey(keyValue);
-        if (row) {
-            this.removeRowFromTable(row);
-            
-            // Remove from state
-            this.state.records = this.state.records.filter(r => 
-                this.getKeyValue(r) !== keyValue
-            );
-        }
-    }
-
-    showRowAnimation(row, type) {
-        const animationClass = `ftable-row-${type}`;
-        FTableDOMHelper.addClass(row, animationClass);
-        
-        setTimeout(() => {
-            FTableDOMHelper.removeClass(row, animationClass);
-        }, 2000);
-    }
-
     // Plugin system for extensions
     use(plugin, options = {}) {
         if (typeof plugin === 'function') {
@@ -5618,65 +5516,20 @@ class FTable extends FTableEventEmitter {
 
         const messages = this.options.messages || {};
 
-        // Get prefix/suffix if defined
-        const prefix = messages.sortingInfoPrefix ? `<span class="ftable-sorting-prefix">${messages.sortingInfoPrefix}</span> ` : '';
-        const suffix = messages.sortingInfoSuffix ? ` <span class="ftable-sorting-suffix">${messages.sortingInfoSuffix}</span>` : '';
-
         if (this.state.sorting.length === 0) {
             container.innerHTML = messages.sortingInfoNone || '';
             return;
         }
 
+        // Get prefix/suffix if defined
+        const prefix = messages.sortingInfoPrefix ? `<span class="ftable-sorting-prefix">${messages.sortingInfoPrefix}</span> ` : '';
+        const suffix = messages.sortingInfoSuffix ? ` <span class="ftable-sorting-suffix">${messages.sortingInfoSuffix}</span>` : '';
+
         // Build sorted fields list with translated directions
         const sortingInfo = this.getSortingInfo();
 
         // Combine with prefix and suffix
         container.innerHTML = `${prefix}${sortingInfo}${suffix}`;
-
-        // Add reset sorting button
-        if (this.state.sorting.length > 0) {
-            const resetSortBtn = document.createElement('button');
-            resetSortBtn.textContent = messages.resetSorting || 'Reset Sorting';
-            resetSortBtn.style.marginLeft = '10px';
-            resetSortBtn.classList.add('ftable-sorting-reset-btn');
-            resetSortBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                this.state.sorting = [];
-                this.updateSortingHeaders();
-                this.load();
-                this.saveState();
-            });
-            container.appendChild(resetSortBtn);
-        }
-
-        // Add reset table button if enabled
-        if (this.options.tableReset) {
-            const resetTableBtn = document.createElement('button');
-            resetTableBtn.textContent = messages.resetTable || 'Reset Table';
-            resetTableBtn.style.marginLeft = '10px';
-            resetTableBtn.classList.add('ftable-table-reset-btn');
-            resetTableBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                const confirmMsg = messages.resetTableConfirm;
-                if (confirm(confirmMsg)) {
-                    this.userPrefs.remove('column-settings');
-                    this.userPrefs.remove('table-state');
-
-                    // Clear any in-memory state that might affect rendering
-                    this.state.sorting = [];
-                    this.state.pageSize = this.options.pageSize;
-
-                    // Reset field visibility to default
-                    this.columnList.forEach(fieldName => {
-                        const field = this.options.fields[fieldName];
-                        // Reset to default: hidden only if explicitly set
-                        field.visibility = field.visibility === 'fixed' ? 'fixed' : 'visible';
-                    });
-                    location.reload();
-                }
-            });
-            container.appendChild(resetTableBtn);
-        }
     }
 
     /**

package/localization/ftable.nl.js

@@ -28,8 +28,11 @@ FTable.setMessages({
         sortingInfoPrefix: 'Sortering toegepast: ',
         ascending: 'Oplopend',
         descending: 'Aflopend',
+        resetTableConfirm: 'Hiermee worden de kolomzichtbaarheid, kolombreedtes en paginagrootte teruggezet naar de standaardinstellingen. Wilt u doorgaan?',
         sortingInfoNone: 'Geen sortering toegepast',
         csvExport: 'CSV',
         printTable: '🖨️  Print',
-        cloneRecord: 'Clone Record'
+        cloneRecord: 'Clone Record',
+        resetSorting: 'Reset sorteren',
+        resetTable: 'Reset tabel'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liedekef/ftable",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Modern, lightweight, jQuery-free CRUD table for dynamic AJAX-powered tables.",
   "main": "ftable.js",
   "module": "ftable.esm.js",

package/themes/basic/ftable_basic.css

@@ -112,22 +112,21 @@ div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .f
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before,
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after {
-  content: '';
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1.1em;
+  font-size: 1em;
   color: #999;
   opacity: 0.7;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before {
   content: '▲';
-  right: 0.55em;
+  right: 0;
+  top: 0;
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after {
   content: '▼';
-  right: 0px;
+  right: 0;
+  top: 0.8em;
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before {
   color: #222;
@@ -567,6 +566,16 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 .ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+.ftable-sort-badge {
+  float: right;
+  align-items: center;
+  font-size: 0.68em;
+  font-weight: bold;
+  border-radius: 50%;
+  width: 2.5em;
+  margin-top: 5px;
+  line-height: 1;
+}
 div.ftable-main-container div.ftable-title div.ftable-title-text {
   font-size: 16px;
   font-weight: bold;

package/themes/basic/ftable_basic.min.css

@@ -1 +1 @@
-div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;border:none}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record{display:inline-flex;align-items:center;background-color:transparent;justify-content:center;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before{content:"➕";font-size:14px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-sortable-text{padding-right:20px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container{position:relative}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after,div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'';position:absolute;top:50%;transform:translateY(-50%);font-size:1.1em;color:#999;opacity:.7;text-shadow:0 1px 0 rgba(255,255,255,.5)}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'▲';right:.55em}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after{content:'▼';right:0}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::after{opacity:.7}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::after{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::before{opacity:.7}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button::before{content:"📝";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button::before{content:"📋";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button::before{content:"🗑️ ";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-fixedlabel,.ftable-yesno-check-text{margin-left:4px}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}.ftable-multiselect-container{position:relative;display:inline-block;width:100%;min-width:100px}.ftable-multiselect-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:0 0;z-index:9999}.ftable-multiselect-display{display:flex;align-items:center;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;padding:4px 30px 4px 8px;position:relative}.ftable-multiselect-display:hover{border-color:#999}.ftable-multiselect-selected{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center}.ftable-multiselect-placeholder{color:#555;font-weight:400}.ftable-multiselect-tag{display:inline-flex;align-items:center;background:#e3f2fd;border:1px solid #90caf9;border-radius:3px;padding:2px 6px;font-size:13px;gap:6px;max-width:100%}.ftable-multiselect-tag-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ftable-multiselect-tag-remove{cursor:pointer;font-weight:700;color:#1976d2;font-size:18px;line-height:1;padding:0 2px;user-select:none}.ftable-multiselect-tag-remove:hover{color:#d32f2f}.ftable-multiselect-count{color:#666;font-size:12px;margin-left:4px;white-space:nowrap}.ftable-multiselect-toggle{position:absolute;right:0;background:0 0;border:none;cursor:pointer;padding:4px;color:#666;font-size:10px;line-height:1}.ftable-multiselect-toggle:hover{color:#333}.ftable-multiselect-dropdown{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);max-height:200px;overflow-y:auto;z-index:10000}.ftable-multiselect-dropdown:focus{outline:0}.ftable-multiselect-option{display:flex;align-items:center;padding:4px 8px;cursor:pointer;user-select:none;gap:4px}.ftable-multiselect-option:hover{background:#f5f5f5}.ftable-multiselect-checkbox{cursor:pointer;margin:0;flex-shrink:0}.ftable-multiselect-label{cursor:pointer;flex:1;margin:0}@media (max-width:768px){.ftable-multiselect-dropdown{max-height:200px}.ftable-multiselect-tag{font-size:12px}}.ftable-multiselect-dropdown::-webkit-scrollbar{width:8px}.ftable-multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#555}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}
+div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;border:none}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record{display:inline-flex;align-items:center;background-color:transparent;justify-content:center;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before{content:"➕";font-size:14px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-sortable-text{padding-right:20px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container{position:relative}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after,div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{position:absolute;font-size:1em;color:#999;opacity:.7;text-shadow:0 1px 0 rgba(255,255,255,.5)}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'▲';right:0;top:0}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after{content:'▼';right:0;top:.8em}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::after{opacity:.7}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::after{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::before{opacity:.7}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button::before{content:"📝";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button::before{content:"📋";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button::before{content:"🗑️ ";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-fixedlabel,.ftable-yesno-check-text{margin-left:4px}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}.ftable-multiselect-container{position:relative;display:inline-block;width:100%;min-width:100px}.ftable-multiselect-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:0 0;z-index:9999}.ftable-multiselect-display{display:flex;align-items:center;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;padding:4px 30px 4px 8px;position:relative}.ftable-multiselect-display:hover{border-color:#999}.ftable-multiselect-selected{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center}.ftable-multiselect-placeholder{color:#555;font-weight:400}.ftable-multiselect-tag{display:inline-flex;align-items:center;background:#e3f2fd;border:1px solid #90caf9;border-radius:3px;padding:2px 6px;font-size:13px;gap:6px;max-width:100%}.ftable-multiselect-tag-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ftable-multiselect-tag-remove{cursor:pointer;font-weight:700;color:#1976d2;font-size:18px;line-height:1;padding:0 2px;user-select:none}.ftable-multiselect-tag-remove:hover{color:#d32f2f}.ftable-multiselect-count{color:#666;font-size:12px;margin-left:4px;white-space:nowrap}.ftable-multiselect-toggle{position:absolute;right:0;background:0 0;border:none;cursor:pointer;padding:4px;color:#666;font-size:10px;line-height:1}.ftable-multiselect-toggle:hover{color:#333}.ftable-multiselect-dropdown{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);max-height:200px;overflow-y:auto;z-index:10000}.ftable-multiselect-dropdown:focus{outline:0}.ftable-multiselect-option{display:flex;align-items:center;padding:4px 8px;cursor:pointer;user-select:none;gap:4px}.ftable-multiselect-option:hover{background:#f5f5f5}.ftable-multiselect-checkbox{cursor:pointer;margin:0;flex-shrink:0}.ftable-multiselect-label{cursor:pointer;flex:1;margin:0}@media (max-width:768px){.ftable-multiselect-dropdown{max-height:200px}.ftable-multiselect-tag{font-size:12px}}.ftable-multiselect-dropdown::-webkit-scrollbar{width:8px}.ftable-multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#555}.ftable-sort-badge{float:right;align-items:center;font-size:.68em;font-weight:700;border-radius:50%;width:2.5em;margin-top:5px;line-height:1}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}

package/themes/ftable_theme_base.less

@@ -258,11 +258,8 @@
 
                             &::before,
                             &::after {
-                                content: '';
                                 position: absolute;
-                                top: 50%;
-                                transform: translateY(-50%);
-                                font-size: 1.1em;
+                                font-size: 1em;
                                 color: #999;
                                 opacity: 0.7;
                                 text-shadow: 0 1px 0 rgba(255,255,255,0.5); // Optional: subtle highlight
@@ -270,12 +267,14 @@
 
                             &::before {
                                 content: '▲';
-                                right: .55em;
+                                right: 0;
+                                top: 0;
                             }
 
                             &::after {
                                 content: '▼';
-                                right: 0px;
+                                right: 0;
+                                top: 0.8em;
                             }
 
                         }
@@ -891,4 +890,16 @@
     .ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover {
         background: #555;
     }
+
+    .ftable-sort-badge {
+        float: right;
+        align-items: center;
+        font-size: 0.68em;
+        font-weight: bold;
+        border-radius: 50%;
+        width: 2.5em;
+        margin-top: 5px;
+        line-height: 1;
+    }
+
 }

package/themes/lightcolor/blue/ftable.css

@@ -109,22 +109,21 @@ div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .f
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before,
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after {
-  content: '';
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 1.1em;
+  font-size: 1em;
   color: #999;
   opacity: 0.7;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before {
   content: '▲';
-  right: 0.55em;
+  right: 0;
+  top: 0;
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after {
   content: '▼';
-  right: 0px;
+  right: 0;
+  top: 0.8em;
 }
 div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before {
   color: #222;
@@ -564,6 +563,16 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 .ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+.ftable-sort-badge {
+  float: right;
+  align-items: center;
+  font-size: 0.68em;
+  font-weight: bold;
+  border-radius: 50%;
+  width: 2.5em;
+  margin-top: 5px;
+  line-height: 1;
+}
 div.ftable-main-container {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 1em;