@liedekef/ftable 1.1.11 → 1.1.13

package/ftable.esm.js

@@ -157,7 +157,11 @@ class FTableDOMHelper {
         if (options.className) {
             element.className = options.className;
         }
-        
+
+        if (options.style) {
+            element.style.cssText = options.style;
+        }
+
         if (options.attributes) {
             Object.entries(options.attributes).forEach(([key, value]) => {
                 element.setAttribute(key, value);
@@ -1493,6 +1497,50 @@ class FTable extends FTableEventEmitter {
 
         // Add essential CSS if not already present
         //this.addEssentialCSS();
+
+        // now make sure all tables have a % width
+        this.initColumnWidths();
+    }
+
+    initColumnWidths() {
+        const visibleFields = this.columnList.filter(fieldName => {
+            const field = this.options.fields[fieldName];
+            return field.visibility !== 'hidden';
+        });
+
+        const count = visibleFields.length;
+        visibleFields.forEach(fieldName => {
+            const field = this.options.fields[fieldName];
+            // Use configured width or equal distribution
+            //field.width = field.width || `${(100 / count).toFixed(2)}%`;
+            field.width = field.width || `${(100 / count)}%`;
+        });
+    }
+
+    normalizeColumnWidths() {
+        const container = this.elements.mainContainer;
+        const visibleHeaders = this.columnList
+            .map(fieldName => ({
+                th: this.elements.table.querySelector(`[data-field-name="${fieldName}"]`),
+                field: this.options.fields[fieldName]
+            }))
+            .filter(item => item.th && item.field.visibility !== 'hidden');
+
+        if (visibleHeaders.length === 0) return;
+
+        const totalContainerWidth = container.offsetWidth;
+        let totalPercent = 0;
+
+        visibleHeaders.forEach(item => {
+            const widthPct = (item.th.offsetWidth / totalContainerWidth) * 100;
+            //item.field.width = `${widthPct.toFixed(2)}%`;
+            item.field.width = `${widthPct}%`;
+            item.th.style.width = item.field.width;
+            totalPercent += widthPct;
+        });
+
+        // Optional: adjust for rounding drift
+        // (not critical, but can help)
     }
 
     parseDefaultSorting(sortStr) {
@@ -1655,25 +1703,13 @@ class FTable extends FTableEventEmitter {
                     field.edit = true;
                     field.type = 'hidden';
                 }
-                if (!field.hasOwnProperty('visibility')) {
-                    field.visibility = 'hidden';
-                }
+                field.visibility = field.visibility ?? 'visible';
             } else {
-                if (field.create === undefined) {
-                    field.create = true;
-                }
-                if (field.edit === undefined) {
-                    field.edit = true;
-                }
-                if (field.list === undefined) {
-                    field.list = true;
-                }
-                if (field.sorting === undefined) {
-                    field.sorting = true;
-                }
-                if (!field.hasOwnProperty('visibility')) {
-                    field.visibility = 'visible';
-                }
+                field.create = field.create ?? true;
+                field.edit = field.edit ?? true;
+                field.list = field.list ?? true;
+                field.sorting = field.sorting ?? true;
+                field.visibility = field.visibility ?? 'visible';
             }
         });
 
@@ -1686,7 +1722,7 @@ class FTable extends FTableEventEmitter {
         // Find key field
         this.keyField = this.fieldList.find(name => this.options.fields[name].key === true);
         if (!this.keyField) {
-            this.logger.warn('No key field defined');
+            this.logger.info('No key field defined');
         }
     }
 
@@ -1862,7 +1898,7 @@ class FTable extends FTableEventEmitter {
             }
 
             // Hide column if needed
-            if (field.visibility === 'hidden') {
+            if (field.visibility === 'hidden' || field.visibility === 'separator') {
                 FTableDOMHelper.hide(th);
             }
         });
@@ -1905,7 +1941,10 @@ class FTable extends FTableEventEmitter {
 
         // Add empty cell for selecting column if enabled
         if (this.options.selecting && this.options.selectingCheckboxes) {
-            FTableDOMHelper.create('th', { parent: searchRow });
+            FTableDOMHelper.create('th', {
+                className: 'ftable-toolbarsearch-column-header',
+                parent: searchRow
+            });
         }
 
         // Add search input cells for data columns
@@ -2040,7 +2079,7 @@ class FTable extends FTableEventEmitter {
             }
 
             // Hide search cell if column is hidden
-            if (field.visibility === 'hidden') {
+            if (field.visibility === 'hidden' || field.visibility === 'separator') {
                 FTableDOMHelper.hide(th);
             }
         }
@@ -2048,7 +2087,7 @@ class FTable extends FTableEventEmitter {
         if (this.options.toolbarsearch && this.options.toolbarreset) {
             // Add reset button cell
             const resetTh = FTableDOMHelper.create('th', {
-                className: 'ftable-toolbarsearch-reset',
+                className: 'ftable-toolbarsearch-column-header ftable-toolbarsearch-reset',
                 parent: searchRow
             });
 
@@ -2165,8 +2204,18 @@ class FTable extends FTableEventEmitter {
         this.load();
     }
 
+    getNextVisibleHeader(th) {
+        const headers = Array.from(this.elements.table.querySelectorAll('thead th:not(.ftable-command-column-header, .ftable-toolbarsearch-column-header)'));
+        const index = headers.indexOf(th);
+        for (let i = index + 1; i < headers.length; i++) {
+            if (headers[i].offsetParent !== null) { // visible
+                return headers[i];
+            }
+        }
+        return null;
+    }
+
     makeColumnResizable(th, container) {
-        // Create resize bar if it doesn't exist
         if (!this.elements.resizeBar) {
             this.elements.resizeBar = FTableDOMHelper.create('div', {
                 className: 'ftable-column-resize-bar',
@@ -2183,59 +2232,88 @@ class FTable extends FTableEventEmitter {
         let isResizing = false;
         let startX = 0;
         let startWidth = 0;
+        let containerRect;
+        let nextTh = null;
+        let nextStartWidth = 0;
+        let nextField = null;
 
         resizeHandler.addEventListener('mousedown', (e) => {
             e.preventDefault();
             e.stopPropagation();
-            
+
             isResizing = true;
+
+            // Capture layout
+            containerRect = this.elements.mainContainer.getBoundingClientRect();
             startX = e.clientX;
             startWidth = th.offsetWidth;
-            
-            // Show resize bar
-            const rect = th.getBoundingClientRect();
-            const containerRect = this.elements.mainContainer.getBoundingClientRect();
-            
-            this.elements.resizeBar.style.left = (rect.right - containerRect.left) + 'px';
-            this.elements.resizeBar.style.top = (rect.top - containerRect.top) + 'px';
+
+            // Find next visible column
+            nextTh = this.getNextVisibleHeader(th);
+            if (nextTh) {
+                nextStartWidth = nextTh.offsetWidth;
+                const fieldName = nextTh.dataset.fieldName;
+                nextField = this.options.fields[fieldName];
+            } else {
+                return;
+            }
+
+            // Position resize bar
+            const thRect = th.getBoundingClientRect();
+            this.elements.resizeBar.style.left = (thRect.right - containerRect.left) + 'px';
+            this.elements.resizeBar.style.top = (thRect.top - containerRect.top) + 'px';
             this.elements.resizeBar.style.height = this.elements.table.offsetHeight + 'px';
+
             FTableDOMHelper.show(this.elements.resizeBar);
-            
+
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
         });
 
         const handleMouseMove = (e) => {
             if (!isResizing) return;
-            
-            const diff = e.clientX - startX;
-            const newWidth = Math.max(50, startWidth + diff); // Minimum 50px width
-            
-            // Update resize bar position
-            const containerRect = this.elements.mainContainer.getBoundingClientRect();
+
+            // Move resize bar with mouse
             this.elements.resizeBar.style.left = (e.clientX - containerRect.left) + 'px';
         };
 
         const handleMouseUp = (e) => {
             if (!isResizing) return;
-            
             isResizing = false;
-            const diff = e.clientX - startX;
-            const newWidth = Math.max(50, startWidth + diff);
-            
-            // Apply new width
-            th.style.width = newWidth + 'px';
-            
-            // Hide resize bar
-            FTableDOMHelper.hide(this.elements.resizeBar);
-            
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            
-            // Save column width preference if enabled
+
+            const diff = e.clientX - startX; // px
+            const totalWidth = containerRect.width;
+
+            // Current column new width in px
+            const newCurrentPx = Math.max(50, startWidth + diff);
+            const newCurrentPct = (newCurrentPx / totalWidth) * 100;
+
+            // Next column adjustment
+            if (nextTh) {
+                const newNextPx = Math.max(50, nextStartWidth - diff); // opposite delta
+                const newNextPct = (newNextPx / totalWidth) * 100;
+
+                // Apply to next
+                nextField.width = `${newNextPct.toFixed(2)}%`;
+                nextTh.style.width = nextField.width;
+            }
+
+            // Apply to current
+            const field = this.options.fields[th.dataset.fieldName];
+            field.width = `${newCurrentPct.toFixed(2)}%`;
+            th.style.width = field.width;
+
+            // Final normalization (optional, but safe)
+            this.normalizeColumnWidths();
+
+            // Save
             if (this.options.saveUserPreferences) {
                 this.saveColumnSettings();
             }
+
+            FTableDOMHelper.hide(this.elements.resizeBar);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
         };
     }
 
@@ -2466,8 +2544,8 @@ class FTable extends FTableEventEmitter {
         this.subscribeOptionEvents();
 
         // Add toolbar buttons
-        this.createToolbarButtons();
         this.createCustomToolbarItems();
+        this.createToolbarButtons();
         
         // Keyboard shortcuts
         this.bindKeyboardEvents();
@@ -2564,6 +2642,7 @@ class FTable extends FTableEventEmitter {
             const field = this.options.fields[fieldName];
             const isVisible = field.visibility !== 'hidden';
             const isFixed = field.visibility === 'fixed';
+            const isSeparator = field.visibility === 'separator';
             const isSorted = this.isFieldSorted(fieldName);
 
             const listItem = FTableDOMHelper.create('li', {
@@ -2576,24 +2655,32 @@ class FTable extends FTableEventEmitter {
                 parent: listItem
             });
 
-            const checkbox = FTableDOMHelper.create('input', {
-                attributes: { 
-                    type: 'checkbox',
-                    id: `column-${fieldName}`
-                },
-                parent: label
-            });
-
-            checkbox.checked = isVisible;
+            if (!isSeparator) {
+                const checkbox = FTableDOMHelper.create('input', {
+                    attributes: { 
+                        type: 'checkbox',
+                        id: `column-${fieldName}`
+                    },
+                    parent: label
+                });
+                checkbox.checked = isVisible;
 
-            // Disable checkbox if column is fixed or currently sorted
-            if (isFixed || (isSorted && isVisible)) {
-                checkbox.disabled = true;
-                listItem.style.opacity = '0.6';
+                // Disable checkbox if column is fixed or currently sorted
+                if (isFixed || (isSorted && isVisible)) {
+                    checkbox.disabled = true;
+                    listItem.style.opacity = '0.6';
+                }
+                // Handle checkbox change
+                if (!checkbox.disabled) {
+                    checkbox.addEventListener('change', () => {
+                        this.setColumnVisibility(fieldName, checkbox.checked);
+                    });
+                }
             }
 
             const labelText = FTableDOMHelper.create('span', {
                 text: field.title || fieldName,
+                style: isSeparator ? 'font-weight: bold;' : null,
                 parent: label
             });
 
@@ -2608,12 +2695,6 @@ class FTable extends FTableEventEmitter {
                 sortIndicator.style.color = '#666';
             }
 
-            // Handle checkbox change
-            if (!checkbox.disabled) {
-                checkbox.addEventListener('change', () => {
-                    this.setColumnVisibility(fieldName, checkbox.checked);
-                });
-            }
         });
     }
 
@@ -2721,7 +2802,7 @@ class FTable extends FTableEventEmitter {
         if (!this.options.toolbar || !this.options.toolbar.items) return;
 
         this.options.toolbar.items.forEach(item => {
-            const button = FTableDOMHelper.create('button', {
+            const button = FTableDOMHelper.create('span', {
                 className: `ftable-toolbar-item ftable-toolbar-item-custom ${item.buttonClass || ''}`,
                 parent: this.elements.toolbarDiv
             });
@@ -2749,6 +2830,7 @@ class FTable extends FTableEventEmitter {
             if (item.text) {
                 FTableDOMHelper.create('span', {
                     text: item.text,
+                    className: `ftable-toolbar-item-text ftable-toolbar-item-custom-text ${item.buttonTextClass || ''}`,
                     parent: button
                 });
             }
@@ -2818,6 +2900,7 @@ class FTable extends FTableEventEmitter {
         // Update sorting display
         this.renderSortingInfo();
 
+        this.normalizeColumnWidths();
     }
 
     buildLoadParams() {
@@ -3507,7 +3590,7 @@ class FTable extends FTableEventEmitter {
         if (this.options.selectOnRowClick !== false) {
             row.addEventListener('click', (e) => {
                 // input elements can't select the row, nor norowselectonclick class
-                if (!['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(e.target.tagName) &&
+                if (!['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA', 'A'].includes(e.target.tagName) &&
                     !e.target.classList.contains('norowselectonclick')) {
                     this.toggleRowSelection(row);
                 }
@@ -3900,11 +3983,8 @@ class FTable extends FTableEventEmitter {
     }
 
     // Public API Methods
-    reload(hard = false) {
-        if (hard) {
-            // Clear list cache
-            this.clearListCache();
-        }
+    reload() {
+        this.clearListCache();
         return this.load();
     }