@liedekef/ftable 1.1.15 → 1.1.17

package/ftable.esm.js

@@ -1493,6 +1493,7 @@ class FTable extends FTableEventEmitter {
         
         this.bindEvents();
         
+        this.updateSortingHeaders();
         this.renderSortingInfo();
 
         // Add essential CSS if not already present
@@ -1505,7 +1506,7 @@ class FTable extends FTableEventEmitter {
     initColumnWidths() {
         const visibleFields = this.columnList.filter(fieldName => {
             const field = this.options.fields[fieldName];
-            return field.visibility !== 'hidden';
+            return field.visibility !== 'hidden' && field.visibility !== 'separator';
         });
 
         const count = visibleFields.length;
@@ -1524,7 +1525,7 @@ class FTable extends FTableEventEmitter {
                 th: this.elements.table.querySelector(`[data-field-name="${fieldName}"]`),
                 field: this.options.fields[fieldName]
             }))
-            .filter(item => item.th && item.field.visibility !== 'hidden');
+            .filter(item => item.th && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
 
         if (visibleHeaders.length === 0) return;
 
@@ -1836,7 +1837,7 @@ class FTable extends FTableEventEmitter {
         // Add selecting column if enabled
         if (this.options.selecting && this.options.selectingCheckboxes) {
             const selectHeader = FTableDOMHelper.create('th', {
-                className: `ftable-column-header ftable-column-header-select`,
+                className: `ftable-command-column-header ftable-column-header-select`,
                 parent: headerRow
             });
 
@@ -1883,16 +1884,12 @@ class FTable extends FTableEventEmitter {
 
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
-                // Add some empty spaces after the text so the background icon has room next to it
-                // one could play with css and ::after, but then the width calculation of columns borks, resize bar is off etc ...
-                //textHeader.innerHTML += '     ';
                 FTableDOMHelper.addClass(textHeader, 'ftable-sortable-text'); // Add class for spacing
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
                 th.addEventListener('click', (e) => {
                     e.preventDefault();
-                    // Store event for multiSortingCtrlKey logic
-                    this.lastSortEvent = e;
-                    this.sortByColumn(fieldName);
+                    const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey for Mac
+                    this.sortByColumn(fieldName, isCtrlPressed);
                 });
             }
 
@@ -2208,8 +2205,8 @@ 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)'));
+    getNextResizableHeader(th) {
+        const headers = Array.from(this.elements.table.querySelectorAll('thead th.ftable-column-header-resizable'));
         const index = headers.indexOf(th);
         for (let i = index + 1; i < headers.length; i++) {
             if (headers[i].offsetParent !== null) { // visible
@@ -2220,6 +2217,7 @@ class FTable extends FTableEventEmitter {
     }
 
     makeColumnResizable(th, container) {
+        FTableDOMHelper.addClass(th, 'ftable-column-header-resizable');
         if (!this.elements.resizeBar) {
             this.elements.resizeBar = FTableDOMHelper.create('div', {
                 className: 'ftable-column-resize-bar',
@@ -2253,13 +2251,13 @@ class FTable extends FTableEventEmitter {
             startWidth = th.offsetWidth;
 
             // Find next visible column
-            nextTh = this.getNextVisibleHeader(th);
+            nextTh = this.getNextResizableHeader(th);
             if (nextTh) {
                 nextStartWidth = nextTh.offsetWidth;
                 const fieldName = nextTh.dataset.fieldName;
                 nextField = this.options.fields[fieldName];
-            } else {
-                return;
+         //  } else {
+           //     return;
             }
 
             // Position resize bar
@@ -3109,7 +3107,7 @@ class FTable extends FTableEventEmitter {
         if (field.visibility === 'fixed') {
             return;
         }
-        if (field.visibility === 'hidden') {
+        if (field.visibility === 'hidden' || field.visibility === 'separator') {
             FTableDOMHelper.hide(cell);
         }
     }
@@ -3685,7 +3683,7 @@ class FTable extends FTableEventEmitter {
     }
 
     // Sorting Methods
-    sortByColumn(fieldName) {
+    sortByColumn(fieldName, isCtrlPressed = false) {
         const field = this.options.fields[fieldName];
 
         if (!field || field.sorting === false) return;
@@ -3706,9 +3704,6 @@ class FTable extends FTableEventEmitter {
             this.state.sorting.push({ fieldName, direction: newDirection });
         }
 
-        // Handle multiSortingCtrlKey: did user press Ctrl/Cmd?
-        const isCtrlPressed = this.lastSortEvent?.ctrlKey || this.lastSortEvent?.metaKey; // metaKey for Mac
-
         if (this.options.multiSorting) {
             // If multiSorting is enabled, respect multiSortingCtrlKey
             if (this.options.multiSortingCtrlKey && !isCtrlPressed) {
@@ -4069,23 +4064,70 @@ class FTable extends FTableEventEmitter {
 
     // CSV Export functionality
     exportToCSV(filename = 'table-data.csv') {
-        const headers = this.columnList.map(fieldName => {
-            const field = this.options.fields[fieldName];
-            return field.title || fieldName;
-        });
+        // Create a clean table clone from the DOM
+        const tableClone = this.elements.table.cloneNode(true);
+        const csvRows = [];
+
+        // Helper to format CSV cell (escape quotes, wrap in quotes)
+        const formatCSV = (text) => {
+            const str = String(text || '').replace(/"/g, '""');
+                return `"${str}"`;
+            };
 
-        const rows = this.state.records.map(record => {
-            return this.columnList.map(fieldName => {
-                const value = this.getDisplayText(record, fieldName);
-                // Escape CSV values
-                return `"${String(value).replace(/"/g, '""')}"`;
-            });
-        });
+        // 1. Extract headers from visible, non-command columns
+        const headerCells = tableClone.querySelectorAll('thead th');
+        const headerRow = [];
+        for (const th of headerCells) {
+            if (th.classList.contains('ftable-command-column-header') ||
+                th.classList.contains('ftable-toolbarsearch-column-header') ||
+                th.style.display === 'none') {
+                continue;
+            }
+            const text = th.textContent.trim();
+            headerRow.push(formatCSV(text));
+        }
+        csvRows.push(headerRow.join(','));
+
+        // 2. Extract rows from visible, non-command cells
+        const dataRows = tableClone.querySelectorAll('tbody tr');
+        for (const tr of dataRows) {
+            // Skip hidden rows
+            if (tr.style.display === 'none') {
+                continue;
+            }
+
+            const rowCells = tr.querySelectorAll('td');
+            const csvRow = [];
+            let hasData = false;
+
+            for (const td of rowCells) {
+                if (td.classList.contains('ftable-command-column') ||
+                    td.style.display === 'none') {
+                    continue;
+                }
+
+                // Clean up: remove buttons, images
+                if (td.querySelector('img, button, input, select')) {
+                    td.innerHTML = td.textContent; // Strip HTML
+                }
+
+                // Replace <br> with \n
+                const html = td.innerHTML;
+                const withLineBreaks = html.replace(/<br\s*\/?>/gi, '\n');
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = withLineBreaks;
+                const text = tempDiv.textContent || '';
+
+                csvRow.push(formatCSV(text));
+                hasData = true;
+            }
+
+            if (hasData) {
+                csvRows.push(csvRow.join(','));
+            }
+        }
 
-        const csvContent = [
-            headers.map(h => `"${h}"`).join(','),
-            ...rows.map(row => row.join(','))
-        ].join('\n');
+        const csvContent = csvRows.join('\n');
 
         // Create and trigger download
         const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });

package/ftable.js

@@ -1498,6 +1498,7 @@ class FTable extends FTableEventEmitter {
         
         this.bindEvents();
         
+        this.updateSortingHeaders();
         this.renderSortingInfo();
 
         // Add essential CSS if not already present
@@ -1510,7 +1511,7 @@ class FTable extends FTableEventEmitter {
     initColumnWidths() {
         const visibleFields = this.columnList.filter(fieldName => {
             const field = this.options.fields[fieldName];
-            return field.visibility !== 'hidden';
+            return field.visibility !== 'hidden' && field.visibility !== 'separator';
         });
 
         const count = visibleFields.length;
@@ -1529,7 +1530,7 @@ class FTable extends FTableEventEmitter {
                 th: this.elements.table.querySelector(`[data-field-name="${fieldName}"]`),
                 field: this.options.fields[fieldName]
             }))
-            .filter(item => item.th && item.field.visibility !== 'hidden');
+            .filter(item => item.th && item.field.visibility !== 'hidden' && item.field.visibility !== 'separator');
 
         if (visibleHeaders.length === 0) return;
 
@@ -1841,7 +1842,7 @@ class FTable extends FTableEventEmitter {
         // Add selecting column if enabled
         if (this.options.selecting && this.options.selectingCheckboxes) {
             const selectHeader = FTableDOMHelper.create('th', {
-                className: `ftable-column-header ftable-column-header-select`,
+                className: `ftable-command-column-header ftable-column-header-select`,
                 parent: headerRow
             });
 
@@ -1888,16 +1889,12 @@ class FTable extends FTableEventEmitter {
 
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
-                // Add some empty spaces after the text so the background icon has room next to it
-                // one could play with css and ::after, but then the width calculation of columns borks, resize bar is off etc ...
-                //textHeader.innerHTML += '     ';
                 FTableDOMHelper.addClass(textHeader, 'ftable-sortable-text'); // Add class for spacing
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
                 th.addEventListener('click', (e) => {
                     e.preventDefault();
-                    // Store event for multiSortingCtrlKey logic
-                    this.lastSortEvent = e;
-                    this.sortByColumn(fieldName);
+                    const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey for Mac
+                    this.sortByColumn(fieldName, isCtrlPressed);
                 });
             }
 
@@ -2213,8 +2210,8 @@ 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)'));
+    getNextResizableHeader(th) {
+        const headers = Array.from(this.elements.table.querySelectorAll('thead th.ftable-column-header-resizable'));
         const index = headers.indexOf(th);
         for (let i = index + 1; i < headers.length; i++) {
             if (headers[i].offsetParent !== null) { // visible
@@ -2225,6 +2222,7 @@ class FTable extends FTableEventEmitter {
     }
 
     makeColumnResizable(th, container) {
+        FTableDOMHelper.addClass(th, 'ftable-column-header-resizable');
         if (!this.elements.resizeBar) {
             this.elements.resizeBar = FTableDOMHelper.create('div', {
                 className: 'ftable-column-resize-bar',
@@ -2258,13 +2256,13 @@ class FTable extends FTableEventEmitter {
             startWidth = th.offsetWidth;
 
             // Find next visible column
-            nextTh = this.getNextVisibleHeader(th);
+            nextTh = this.getNextResizableHeader(th);
             if (nextTh) {
                 nextStartWidth = nextTh.offsetWidth;
                 const fieldName = nextTh.dataset.fieldName;
                 nextField = this.options.fields[fieldName];
-            } else {
-                return;
+         //  } else {
+           //     return;
             }
 
             // Position resize bar
@@ -3114,7 +3112,7 @@ class FTable extends FTableEventEmitter {
         if (field.visibility === 'fixed') {
             return;
         }
-        if (field.visibility === 'hidden') {
+        if (field.visibility === 'hidden' || field.visibility === 'separator') {
             FTableDOMHelper.hide(cell);
         }
     }
@@ -3690,7 +3688,7 @@ class FTable extends FTableEventEmitter {
     }
 
     // Sorting Methods
-    sortByColumn(fieldName) {
+    sortByColumn(fieldName, isCtrlPressed = false) {
         const field = this.options.fields[fieldName];
 
         if (!field || field.sorting === false) return;
@@ -3711,9 +3709,6 @@ class FTable extends FTableEventEmitter {
             this.state.sorting.push({ fieldName, direction: newDirection });
         }
 
-        // Handle multiSortingCtrlKey: did user press Ctrl/Cmd?
-        const isCtrlPressed = this.lastSortEvent?.ctrlKey || this.lastSortEvent?.metaKey; // metaKey for Mac
-
         if (this.options.multiSorting) {
             // If multiSorting is enabled, respect multiSortingCtrlKey
             if (this.options.multiSortingCtrlKey && !isCtrlPressed) {
@@ -4074,23 +4069,70 @@ class FTable extends FTableEventEmitter {
 
     // CSV Export functionality
     exportToCSV(filename = 'table-data.csv') {
-        const headers = this.columnList.map(fieldName => {
-            const field = this.options.fields[fieldName];
-            return field.title || fieldName;
-        });
+        // Create a clean table clone from the DOM
+        const tableClone = this.elements.table.cloneNode(true);
+        const csvRows = [];
+
+        // Helper to format CSV cell (escape quotes, wrap in quotes)
+        const formatCSV = (text) => {
+            const str = String(text || '').replace(/"/g, '""');
+                return `"${str}"`;
+            };
 
-        const rows = this.state.records.map(record => {
-            return this.columnList.map(fieldName => {
-                const value = this.getDisplayText(record, fieldName);
-                // Escape CSV values
-                return `"${String(value).replace(/"/g, '""')}"`;
-            });
-        });
+        // 1. Extract headers from visible, non-command columns
+        const headerCells = tableClone.querySelectorAll('thead th');
+        const headerRow = [];
+        for (const th of headerCells) {
+            if (th.classList.contains('ftable-command-column-header') ||
+                th.classList.contains('ftable-toolbarsearch-column-header') ||
+                th.style.display === 'none') {
+                continue;
+            }
+            const text = th.textContent.trim();
+            headerRow.push(formatCSV(text));
+        }
+        csvRows.push(headerRow.join(','));
+
+        // 2. Extract rows from visible, non-command cells
+        const dataRows = tableClone.querySelectorAll('tbody tr');
+        for (const tr of dataRows) {
+            // Skip hidden rows
+            if (tr.style.display === 'none') {
+                continue;
+            }
+
+            const rowCells = tr.querySelectorAll('td');
+            const csvRow = [];
+            let hasData = false;
+
+            for (const td of rowCells) {
+                if (td.classList.contains('ftable-command-column') ||
+                    td.style.display === 'none') {
+                    continue;
+                }
+
+                // Clean up: remove buttons, images
+                if (td.querySelector('img, button, input, select')) {
+                    td.innerHTML = td.textContent; // Strip HTML
+                }
+
+                // Replace <br> with \n
+                const html = td.innerHTML;
+                const withLineBreaks = html.replace(/<br\s*\/?>/gi, '\n');
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = withLineBreaks;
+                const text = tempDiv.textContent || '';
+
+                csvRow.push(formatCSV(text));
+                hasData = true;
+            }
+
+            if (hasData) {
+                csvRows.push(csvRow.join(','));
+            }
+        }
 
-        const csvContent = [
-            headers.map(h => `"${h}"`).join(','),
-            ...rows.map(row => row.join(','))
-        ].join('\n');
+        const csvContent = csvRows.join('\n');
 
         // Create and trigger download
         const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });