@vii7/div-table-widget 1.1.1 → 1.2.1

package/src/div-table.js

@@ -113,6 +113,20 @@ class DivTable {
     }
   }
 
+  /**
+   * Strip HTML tags from a string for use in tooltips
+   * @param {string} html - String potentially containing HTML
+   * @returns {string} Plain text without HTML tags
+   */
+  stripHtmlTags(html) {
+    if (!html) return '';
+    // Replace <br> and <br/> with space, then strip all other HTML tags
+    return String(html)
+      .replace(/<br\s*\/?>/gi, ' ')
+      .replace(/<[^>]*>/g, '')
+      .trim();
+  }
+
   init() {
     const container = this.options.tableWidgetElement;
     if (!container) {
@@ -1712,12 +1726,21 @@ class DivTable {
       fixedRow.style.height = '';
       scrollRow.style.height = '';
       
-      // Get natural heights
-      const fixedHeight = fixedRow.offsetHeight;
-      const scrollHeight = scrollRow.offsetHeight;
+      // Get natural heights including any cell content overflow
+      const fixedHeight = Math.max(fixedRow.offsetHeight, fixedRow.scrollHeight);
+      const scrollHeight = Math.max(scrollRow.offsetHeight, scrollRow.scrollHeight);
+      
+      // Also check individual cell heights
+      let maxCellHeight = 0;
+      fixedRow.querySelectorAll('.div-table-cell').forEach(cell => {
+        maxCellHeight = Math.max(maxCellHeight, cell.offsetHeight, cell.scrollHeight);
+      });
+      scrollRow.querySelectorAll('.div-table-cell').forEach(cell => {
+        maxCellHeight = Math.max(maxCellHeight, cell.offsetHeight, cell.scrollHeight);
+      });
       
       // Set both to the maximum height
-      const maxHeight = Math.max(fixedHeight, scrollHeight);
+      const maxHeight = Math.max(fixedHeight, scrollHeight, maxCellHeight);
       if (maxHeight > 0) {
         fixedRow.style.height = `${maxHeight}px`;
         scrollRow.style.height = `${maxHeight}px`;
@@ -1892,8 +1915,8 @@ class DivTable {
       const mainLabel = document.createElement('span');
       mainLabel.className = 'composite-main-header';
       mainLabel.innerHTML = col.label || col.field;
+      mainLabel.title = this.stripHtmlTags(col.label || col.field);
       mainLabel.style.fontWeight = '600';
-      mainLabel.style.color = '#374151';
       mainLabel.style.textAlign = 'left';
       mainLabel.style.flex = '1';
       mainLabelContainer.appendChild(mainLabel);
@@ -1916,7 +1939,7 @@ class DivTable {
         groupIndicator.textContent = this.groupByField === col.field ? '☴' : '☷';
         groupIndicator.style.cursor = 'pointer';
         groupIndicator.style.fontSize = '1em';
-        const columnTitle = col.label || col.field;
+        const columnTitle = this.stripHtmlTags(col.label || col.field);
         groupIndicator.title = this.groupByField === col.field ? `Grouped by ${columnTitle} (click to ungroup)` : `Click to group by ${columnTitle}`;
         
         // Add click handler for grouping
@@ -1960,7 +1983,7 @@ class DivTable {
       
       const subLabel = document.createElement('span');
       subLabel.innerHTML = col.subLabel;
-      subLabel.style.color = '#6b7280';
+      subLabel.title = this.stripHtmlTags(col.subLabel);
       subLabel.style.textAlign = 'left';
       subLabel.style.flex = '1';
       subLabelContainer.appendChild(subLabel);
@@ -1980,9 +2003,9 @@ class DivTable {
         
         subLabelContainer.appendChild(subSortIndicator);
         
-        // Add hover effect
+        // Add hover effect - use CSS variable for theming support
         subLabelContainer.addEventListener('mouseenter', () => {
-          subLabelContainer.style.backgroundColor = '#f3f4f6';
+          subLabelContainer.style.backgroundColor = 'var(--dt-bg-disabled)';
         });
         subLabelContainer.addEventListener('mouseleave', () => {
           subLabelContainer.style.backgroundColor = 'transparent';
@@ -2053,6 +2076,7 @@ class DivTable {
       // Column label
       const labelSpan = document.createElement('span');
       labelSpan.innerHTML = columnLabel;
+      labelSpan.title = this.stripHtmlTags(columnLabel);
       //labelSpan.style.fontWeight = 'bold';
       leftContent.appendChild(labelSpan);
       
@@ -2063,12 +2087,13 @@ class DivTable {
       countSpan.style.opacity = '0.8';
       countSpan.style.fontSize = '0.9em';
       countSpan.style.fontWeight = 'normal';
-      countSpan.title = `${groupCount} distinct value${groupCount === 1 ? '' : 's'} in ${columnLabel}`;
+      countSpan.title = `${groupCount} distinct value${groupCount === 1 ? '' : 's'} in ${this.stripHtmlTags(columnLabel)}`;
       leftContent.appendChild(countSpan);
     } else {
       // Regular column label
       const labelSpan = document.createElement('span');
       labelSpan.innerHTML = col.label || col.field;
+      labelSpan.title = this.stripHtmlTags(col.label || col.field);
       //labelSpan.style.fontWeight = 'bold';
       leftContent.appendChild(labelSpan);
     }
@@ -2089,7 +2114,7 @@ class DivTable {
       groupIndicator.textContent = this.groupByField === col.field ? '☴' : '☷';
       groupIndicator.style.cursor = 'pointer';
       groupIndicator.style.fontSize = '1em';
-      const columnTitle = col.label || col.field;
+      const columnTitle = this.stripHtmlTags(col.label || col.field);
       groupIndicator.title = this.groupByField === col.field ? `Grouped by ${columnTitle} (click to ungroup)` : `Click to group by ${columnTitle}`;
       
       // Add click handler for grouping
@@ -2215,6 +2240,7 @@ class DivTable {
         // Column label
         const labelSpan = document.createElement('span');
         labelSpan.innerHTML = columnLabel;
+        labelSpan.title = this.stripHtmlTags(columnLabel);
         leftContent.appendChild(labelSpan);
         
         // Group count
@@ -2224,12 +2250,13 @@ class DivTable {
         groupCountSpan.style.opacity = '0.8';
         groupCountSpan.style.fontSize = '0.9em';
         groupCountSpan.style.fontWeight = 'normal';
-        groupCountSpan.title = `${groupCount} distinct value${groupCount === 1 ? '' : 's'} in ${columnLabel}`;
+        groupCountSpan.title = `${groupCount} distinct value${groupCount === 1 ? '' : 's'} in ${this.stripHtmlTags(columnLabel)}`;
         leftContent.appendChild(groupCountSpan);
       } else {
         // Regular label (not grouped)
         const labelSpan = document.createElement('span');
         labelSpan.innerHTML = col.label || col.field;
+        labelSpan.title = this.stripHtmlTags(col.label || col.field);
         leftContent.appendChild(labelSpan);
       }
       
@@ -2251,7 +2278,7 @@ class DivTable {
         groupIndicator.textContent = this.groupByField === col.field ? '☴' : '☷';
         groupIndicator.style.cursor = 'pointer';
         groupIndicator.style.fontSize = '1em';
-        const columnTitle = col.label || col.field;
+        const columnTitle = this.stripHtmlTags(col.label || col.field);
         groupIndicator.title = this.groupByField === col.field ? `Grouped by ${columnTitle} (click to ungroup)` : `Click to group by ${columnTitle}`;
         
         groupIndicator.addEventListener('click', (e) => {
@@ -2758,120 +2785,15 @@ class DivTable {
       row.appendChild(checkboxCell);
     }
 
-    // Data columns - render using composite structure
+    // Data columns - render using composite structure with proper alignment
     compositeColumns.forEach(composite => {
-      const cell = document.createElement('div');
-      cell.className = 'div-table-cell';
-      
-      if (composite.compositeName) {
-        cell.classList.add('composite-cell');
-        cell.style.display = 'flex';
-        cell.style.flexDirection = 'column';
-        cell.style.gap = '4px';
-        
-        composite.columns.forEach((col, index) => {
-          const subCell = document.createElement('div');
-          subCell.className = 'composite-sub-cell';
-          
-          if (this.groupByField && col.field === this.groupByField) {
-            subCell.classList.add('grouped-column');
-            subCell.textContent = '';
-          } else {
-            if (col.subField) {
-              subCell.classList.add('composite-column');
-              subCell.style.display = 'flex';
-              subCell.style.flexDirection = 'column';
-              subCell.style.gap = '2px';
-              
-              const mainDiv = document.createElement('div');
-              mainDiv.className = 'composite-main';
-              if (typeof col.render === 'function') {
-                mainDiv.innerHTML = col.render(item[col.field], item);
-              } else {
-                mainDiv.innerHTML = item[col.field] ?? '';
-              }
-              
-              const subDiv = document.createElement('div');
-              subDiv.className = 'composite-sub';
-              if (typeof col.subRender === 'function') {
-                subDiv.innerHTML = col.subRender(item[col.subField], item);
-              } else {
-                subDiv.innerHTML = item[col.subField] ?? '';
-              }
-              
-              subCell.appendChild(mainDiv);
-              subCell.appendChild(subDiv);
-            } else {
-              if (typeof col.render === 'function') {
-                subCell.innerHTML = col.render(item[col.field], item);
-              } else {
-                subCell.innerHTML = item[col.field] ?? '';
-              }
-            }
-          }
-          
-          cell.appendChild(subCell);
-        });
-      } else {
-        const col = composite.columns[0];
-        
-        if (this.groupByField && col.field === this.groupByField) {
-          cell.classList.add('grouped-column');
-          cell.textContent = '';
-        } else {
-          if (col.subField) {
-            cell.classList.add('composite-column');
-            
-            const mainDiv = document.createElement('div');
-            mainDiv.className = 'composite-main';
-            if (typeof col.render === 'function') {
-              mainDiv.innerHTML = col.render(item[col.field], item);
-            } else {
-              mainDiv.innerHTML = item[col.field] ?? '';
-            }
-            
-            const subDiv = document.createElement('div');
-            subDiv.className = 'composite-sub';
-            if (typeof col.subRender === 'function') {
-              subDiv.innerHTML = col.subRender(item[col.subField], item);
-            } else {
-              subDiv.innerHTML = item[col.subField] ?? '';
-            }
-            
-            cell.appendChild(mainDiv);
-            cell.appendChild(subDiv);
-          } else {
-            if (typeof col.render === 'function') {
-              cell.innerHTML = col.render(item[col.field], item);
-            } else {
-              cell.innerHTML = item[col.field] ?? '';
-            }
-          }
-        }
-      }
-      
+      const cell = this.createCellForComposite(composite, item);
       row.appendChild(cell);
     });
 
     // Mark as populated
     row.dataset.populated = 'true';
     
-    // Measure actual height and set it explicitly to prevent bouncing on re-renders
-    // Use requestAnimationFrame to ensure DOM has updated
-    requestAnimationFrame(() => {
-      const actualHeight = row.offsetHeight;
-      if (actualHeight > 0) {
-        // Set explicit height to prevent layout recalculation bouncing
-        row.style.minHeight = `${actualHeight}px`;
-        row.style.height = `${actualHeight}px`;
-        
-        // Update estimate for future unpopulated rows
-        if (actualHeight > this.estimatedRowHeight) {
-          this.estimatedRowHeight = actualHeight;
-        }
-      }
-    });
-    
     // Update tab indexes after population
     this.updateTabIndexes();
   }
@@ -2981,32 +2903,28 @@ class DivTable {
     // Use double requestAnimationFrame to ensure layout is fully complete
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        // Get natural heights after cell content is fully rendered
-        // Temporarily remove any height constraints to get true natural height
-        const prevFixedHeight = fixedRow.style.height;
-        const prevScrollHeight = scrollRow.style.height;
-        const prevFixedMinHeight = fixedRow.style.minHeight;
-        const prevScrollMinHeight = scrollRow.style.minHeight;
-        
+        // Reset any fixed heights to get natural content height
         fixedRow.style.height = '';
         scrollRow.style.height = '';
-        fixedRow.style.minHeight = '40px';
-        scrollRow.style.minHeight = '40px';
         
-        // Force layout recalculation
-        const fixedHeight = fixedRow.offsetHeight;
-        const scrollHeight = scrollRow.offsetHeight;
+        // Get the maximum height from both rows, including any cell content
+        // Use scrollHeight to capture content that might overflow
+        const fixedHeight = Math.max(fixedRow.offsetHeight, fixedRow.scrollHeight);
+        const scrollHeight = Math.max(scrollRow.offsetHeight, scrollRow.scrollHeight);
         
-        // Set both to the maximum height to keep rows in sync
-        const maxHeight = Math.max(fixedHeight, scrollHeight, 40); // Ensure minimum 44px
-        fixedRow.style.minHeight = `${maxHeight}px`;
-        fixedRow.style.height = `${maxHeight}px`;
-        scrollRow.style.minHeight = `${maxHeight}px`;
-        scrollRow.style.height = `${maxHeight}px`;
+        // Also check individual cell heights
+        let maxCellHeight = 0;
+        fixedRow.querySelectorAll('.div-table-cell').forEach(cell => {
+          maxCellHeight = Math.max(maxCellHeight, cell.offsetHeight, cell.scrollHeight);
+        });
+        scrollRow.querySelectorAll('.div-table-cell').forEach(cell => {
+          maxCellHeight = Math.max(maxCellHeight, cell.offsetHeight, cell.scrollHeight);
+        });
         
-        // Update estimate for future unpopulated rows
-        if (maxHeight > this.estimatedRowHeight) {
-          this.estimatedRowHeight = maxHeight;
+        const maxHeight = Math.max(fixedHeight, scrollHeight, maxCellHeight);
+        if (maxHeight > 0) {
+          fixedRow.style.height = `${maxHeight}px`;
+          scrollRow.style.height = `${maxHeight}px`;
         }
       });
     });
@@ -3198,106 +3116,9 @@ class DivTable {
       row.appendChild(checkboxCell);
     }
 
-    // Data columns - render using composite structure
+    // Data columns - render using composite structure with proper alignment
     compositeColumns.forEach(composite => {
-      const cell = document.createElement('div');
-      cell.className = 'div-table-cell';
-      
-      if (composite.compositeName) {
-        // Composite cell with multiple columns stacked vertically
-        cell.classList.add('composite-cell');
-        cell.style.display = 'flex';
-        cell.style.flexDirection = 'column';
-        cell.style.gap = '4px';
-        
-        composite.columns.forEach((col, index) => {
-          const subCell = document.createElement('div');
-          subCell.className = 'composite-sub-cell';
-          
-          // For grouped column, show empty
-          if (this.groupByField && col.field === this.groupByField) {
-            subCell.classList.add('grouped-column');
-            subCell.textContent = '';
-          } else {
-            // Check if this column has subField (vertical stacking within the sub-cell)
-            if (col.subField) {
-              subCell.classList.add('composite-column');
-              subCell.style.display = 'flex';
-              subCell.style.flexDirection = 'column';
-              subCell.style.gap = '2px';
-              
-              const mainDiv = document.createElement('div');
-              mainDiv.className = 'composite-main';
-              if (typeof col.render === 'function') {
-                mainDiv.innerHTML = col.render(item[col.field], item);
-              } else {
-                mainDiv.innerHTML = item[col.field] ?? '';
-              }
-              
-              const subDiv = document.createElement('div');
-              subDiv.className = 'composite-sub';
-              if (typeof col.subRender === 'function') {
-                subDiv.innerHTML = col.subRender(item[col.subField], item);
-              } else {
-                subDiv.innerHTML = item[col.subField] ?? '';
-              }
-              
-              subCell.appendChild(mainDiv);
-              subCell.appendChild(subDiv);
-            } else {
-              // Regular rendering
-              if (typeof col.render === 'function') {
-                subCell.innerHTML = col.render(item[col.field], item);
-              } else {
-                subCell.innerHTML = item[col.field] ?? '';
-              }
-            }
-          }
-          
-          cell.appendChild(subCell);
-        });
-      } else {
-        // Single column
-        const col = composite.columns[0];
-        
-        // For grouped column, show empty
-        if (this.groupByField && col.field === this.groupByField) {
-          cell.classList.add('grouped-column');
-          cell.textContent = '';
-        } else {
-          // Check if this is a composite column with subField (vertical stacking)
-          if (col.subField) {
-            cell.classList.add('composite-column');
-            
-            const mainDiv = document.createElement('div');
-            mainDiv.className = 'composite-main';
-            if (typeof col.render === 'function') {
-              mainDiv.innerHTML = col.render(item[col.field], item);
-            } else {
-              mainDiv.innerHTML = item[col.field] ?? '';
-            }
-            
-            const subDiv = document.createElement('div');
-            subDiv.className = 'composite-sub';
-            if (typeof col.subRender === 'function') {
-              subDiv.innerHTML = col.subRender(item[col.subField], item);
-            } else {
-              subDiv.innerHTML = item[col.subField] ?? '';
-            }
-            
-            cell.appendChild(mainDiv);
-            cell.appendChild(subDiv);
-          } else {
-            // Regular column rendering
-            if (typeof col.render === 'function') {
-              cell.innerHTML = col.render(item[col.field], item);
-            } else {
-              cell.innerHTML = item[col.field] ?? '';
-            }
-          }
-        }
-      }
-      
+      const cell = this.createCellForComposite(composite, item);
       row.appendChild(cell);
     });
 
@@ -3586,9 +3407,6 @@ class DivTable {
     if (composite.compositeName) {
       // Composite cell with multiple columns stacked vertically
       cell.classList.add('composite-cell');
-      cell.style.display = 'flex';
-      cell.style.flexDirection = 'column';
-      cell.style.gap = '4px';
       
       composite.columns.forEach((col, index) => {
         const subCell = document.createElement('div');
@@ -3611,6 +3429,8 @@ class DivTable {
             } else {
               mainDiv.innerHTML = item[col.field] ?? '';
             }
+            // Set title for tooltip on main content
+            mainDiv.title = this.stripHtmlTags(mainDiv.innerHTML);
             
             const subDiv = document.createElement('div');
             subDiv.className = 'composite-sub';
@@ -3619,6 +3439,8 @@ class DivTable {
             } else {
               subDiv.innerHTML = item[col.subField] ?? '';
             }
+            // Set title for tooltip on sub content
+            subDiv.title = this.stripHtmlTags(subDiv.innerHTML);
             
             subCell.appendChild(mainDiv);
             subCell.appendChild(subDiv);
@@ -3628,6 +3450,8 @@ class DivTable {
             } else {
               subCell.innerHTML = item[col.field] ?? '';
             }
+            // Set title for tooltip on sub-cell
+            subCell.title = this.stripHtmlTags(subCell.innerHTML);
           }
         }
         
@@ -3651,6 +3475,8 @@ class DivTable {
           } else {
             mainDiv.innerHTML = item[col.field] ?? '';
           }
+          // Set title for tooltip on main content
+          mainDiv.title = this.stripHtmlTags(mainDiv.innerHTML);
           
           const subDiv = document.createElement('div');
           subDiv.className = 'composite-sub';
@@ -3659,15 +3485,23 @@ class DivTable {
           } else {
             subDiv.innerHTML = item[col.subField] ?? '';
           }
+          // Set title for tooltip on sub content
+          subDiv.title = this.stripHtmlTags(subDiv.innerHTML);
           
           cell.appendChild(mainDiv);
           cell.appendChild(subDiv);
         } else {
+          // Wrap content in a span for proper flex alignment
+          const contentSpan = document.createElement('span');
+          contentSpan.className = 'cell-content';
           if (typeof col.render === 'function') {
-            cell.innerHTML = col.render(item[col.field], item);
+            contentSpan.innerHTML = col.render(item[col.field], item);
           } else {
-            cell.innerHTML = item[col.field] ?? '';
+            contentSpan.innerHTML = item[col.field] ?? '';
           }
+          // Set title for tooltip
+          contentSpan.title = this.stripHtmlTags(contentSpan.innerHTML);
+          cell.appendChild(contentSpan);
         }
       }
     }
@@ -5858,6 +5692,10 @@ class DivTable {
             const formattedValue = this.formatAggregateValue(aggregateValue, col);
             subCell.innerHTML = formattedValue;
             subCell.classList.add('aggregate-value');
+            // Apply column alignment
+            if (col.align) {
+              subCell.style.textAlign = col.align;
+            }
           }
           
           cell.appendChild(subCell);
@@ -5866,10 +5704,21 @@ class DivTable {
         // Single column
         const col = composite.columns[0];
         
+        // Apply column alignment
+        if (col.align) {
+          cell.style.textAlign = col.align;
+          cell.style.justifyContent = col.align === 'right' ? 'flex-end' : 
+                                       col.align === 'center' ? 'center' : 'flex-start';
+        }
+        
         if (col.aggregate) {
           const aggregateValue = this.calculateAggregate(col, aggregationData);
           const formattedValue = this.formatAggregateValue(aggregateValue, col);
-          cell.innerHTML = formattedValue;
+          // Wrap in span for proper flex alignment
+          const contentSpan = document.createElement('span');
+          contentSpan.className = 'cell-content';
+          contentSpan.innerHTML = formattedValue;
+          cell.appendChild(contentSpan);
           cell.classList.add('aggregate-value');
         }
       }
@@ -5947,6 +5796,10 @@ class DivTable {
             const formattedValue = this.formatAggregateValue(aggregateValue, col);
             subCell.innerHTML = formattedValue;
             subCell.classList.add('aggregate-value');
+            // Apply column alignment
+            if (col.align) {
+              subCell.style.textAlign = col.align;
+            }
           }
           
           cell.appendChild(subCell);
@@ -5954,10 +5807,21 @@ class DivTable {
       } else {
         const col = composite.columns[0];
         
+        // Apply column alignment
+        if (col.align) {
+          cell.style.textAlign = col.align;
+          cell.style.justifyContent = col.align === 'right' ? 'flex-end' : 
+                                       col.align === 'center' ? 'center' : 'flex-start';
+        }
+        
         if (col.aggregate) {
           const aggregateValue = this.calculateAggregate(col, groupData);
           const formattedValue = this.formatAggregateValue(aggregateValue, col);
-          cell.innerHTML = formattedValue;
+          // Wrap in span for proper flex alignment
+          const contentSpan = document.createElement('span');
+          contentSpan.className = 'cell-content';
+          contentSpan.innerHTML = formattedValue;
+          cell.appendChild(contentSpan);
           cell.classList.add('aggregate-value');
         }
       }
@@ -6135,7 +5999,11 @@ class DivTable {
       if (col.aggregate) {
         const aggregateValue = this.calculateAggregate(col, data);
         const formattedValue = this.formatAggregateValue(aggregateValue, col);
-        cell.innerHTML = formattedValue;
+        // Wrap in span for proper flex alignment
+        const contentSpan = document.createElement('span');
+        contentSpan.className = 'cell-content';
+        contentSpan.innerHTML = formattedValue;
+        cell.appendChild(contentSpan);
         cell.classList.add('aggregate-value');
       }
     }