@vii7/div-table-widget 1.1.0 → 1.2.0

package/src/div-table.js

@@ -352,6 +352,32 @@ class DivTable {
       this.scrollBodyContainer.scrollLeft = this.scrollHeaderContainer.scrollLeft;
       requestAnimationFrame(() => { isSyncingScroll = false; });
     });
+    
+    // Adjust fixed body padding for horizontal scrollbar height
+    this.adjustFixedBodyForHorizontalScrollbar();
+    
+    // Re-adjust on window resize
+    window.addEventListener('resize', () => {
+      this.adjustFixedBodyForHorizontalScrollbar();
+    });
+  }
+  
+  /**
+   * Adjust fixed body padding to account for horizontal scrollbar in scroll body
+   * This prevents row misalignment at the bottom when scrolled to the end
+   */
+  adjustFixedBodyForHorizontalScrollbar() {
+    if (!this.fixedBodyContainer || !this.scrollBodyContainer) return;
+    
+    // Calculate horizontal scrollbar height
+    const scrollbarHeight = this.scrollBodyContainer.offsetHeight - this.scrollBodyContainer.clientHeight;
+    
+    // Add padding to fixed body to compensate for scrollbar
+    if (scrollbarHeight > 0) {
+      this.fixedBodyContainer.style.paddingBottom = `${scrollbarHeight}px`;
+    } else {
+      this.fixedBodyContainer.style.paddingBottom = '';
+    }
   }
 
   getEffectiveFixedColumnCount() {
@@ -721,8 +747,25 @@ class DivTable {
       this.handleKeyDown(e);
     });
 
-    bodyContainer.addEventListener('focus', () => {
-      if (!this.focusedRowId) {
+    // Track whether focus came from keyboard (Tab) vs mouse click
+    // Only auto-focus to first record on Tab navigation, not mouse clicks
+    let lastInputWasKeyboard = false;
+    
+    bodyContainer.addEventListener('keydown', () => {
+      lastInputWasKeyboard = true;
+    }, { capture: true });
+    
+    bodyContainer.addEventListener('mousedown', () => {
+      lastInputWasKeyboard = false;
+    }, { capture: true });
+
+    // Use focusin to detect when focus enters the container
+    bodyContainer.addEventListener('focusin', (e) => {
+      // Only auto-focus to first record if:
+      // 1. There's no currently focused row
+      // 2. Focus came from keyboard navigation (Tab), not mouse click
+      // This prevents auto-scrolling when clicking the scrollbar
+      if (!this.focusedRowId && lastInputWasKeyboard && e.target === bodyContainer) {
         this.focusFirstRecord();
       }
     });
@@ -1288,15 +1331,17 @@ class DivTable {
       }
     });
 
-    // Update group header checkbox states
-    if (this.groupByField) {
+    // Update group header checkbox states (always check for group headers in DOM)
+    const groupHeaders = this.bodyContainer.querySelectorAll('.div-table-row.group-header');
+    if (groupHeaders.length > 0) {
+      // Group headers exist, so groupByField must be set - get the groups
       const groups = this.groupData(this.sortData(this.filteredData));
       
-      this.bodyContainer.querySelectorAll('.div-table-row.group-header').forEach((groupRow) => {
+      groupHeaders.forEach((groupRow) => {
         const checkbox = groupRow.querySelector('input[type="checkbox"]');
         if (!checkbox) return;
 
-        // Find the group by matching the groupKey instead of relying on index
+        // Find the group by matching the groupKey
         const groupKey = groupRow.dataset.groupKey;
         const group = groups.find(g => g.key === groupKey);
         if (!group) return;
@@ -1305,15 +1350,16 @@ class DivTable {
         const groupItemIds = group.items.map(item => String(item[this.primaryKeyField]));
         const selectedInGroup = groupItemIds.filter(id => this.selectedRows.has(id));
 
+        // Set indeterminate BEFORE checked to ensure proper visual update
         if (selectedInGroup.length === 0) {
-          checkbox.checked = false;
           checkbox.indeterminate = false;
+          checkbox.checked = false;
         } else if (selectedInGroup.length === groupItemIds.length) {
-          checkbox.checked = true;
           checkbox.indeterminate = false;
+          checkbox.checked = true;
         } else {
-          checkbox.checked = false;
           checkbox.indeterminate = true;
+          checkbox.checked = false;
         }
       });
     }
@@ -1351,11 +1397,13 @@ class DivTable {
       }
     });
     
-    // Update group header checkbox states
-    if (this.groupByField) {
+    // Update group header checkbox states (always check for group headers in DOM)
+    const groupHeaders = this.fixedBodyContainer.querySelectorAll('.div-table-row.group-header');
+    if (groupHeaders.length > 0) {
+      // Group headers exist, so groupByField must be set - get the groups
       const groups = this.groupData(this.sortData(this.filteredData));
       
-      this.fixedBodyContainer.querySelectorAll('.div-table-row.group-header').forEach((groupRow) => {
+      groupHeaders.forEach((groupRow) => {
         const checkbox = groupRow.querySelector('input[type="checkbox"]');
         if (!checkbox) return;
 
@@ -1366,15 +1414,16 @@ class DivTable {
         const groupItemIds = group.items.map(item => String(item[this.primaryKeyField]));
         const selectedInGroup = groupItemIds.filter(id => this.selectedRows.has(id));
 
+        // Set indeterminate BEFORE checked to ensure proper visual update
         if (selectedInGroup.length === 0) {
-          checkbox.checked = false;
           checkbox.indeterminate = false;
+          checkbox.checked = false;
         } else if (selectedInGroup.length === groupItemIds.length) {
-          checkbox.checked = true;
           checkbox.indeterminate = false;
+          checkbox.checked = true;
         } else {
-          checkbox.checked = false;
           checkbox.indeterminate = true;
+          checkbox.checked = false;
         }
       });
     }
@@ -1512,8 +1561,8 @@ class DivTable {
         const checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
         checkbox.addEventListener('change', (e) => {
-          if (e.target.checked || e.target.indeterminate) {
-            // If checked or indeterminate, select all
+          if (e.target.checked) {
+            // If checked, select all
             this.selectAll();
           } else {
             // If unchecked, clear selection
@@ -1594,7 +1643,7 @@ class DivTable {
         const checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
         checkbox.addEventListener('change', (e) => {
-          if (e.target.checked || e.target.indeterminate) {
+          if (e.target.checked) {
             this.selectAll();
           } else {
             this.clearSelection();
@@ -1663,12 +1712,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`;
@@ -1844,7 +1902,6 @@ class DivTable {
       mainLabel.className = 'composite-main-header';
       mainLabel.innerHTML = col.label || col.field;
       mainLabel.style.fontWeight = '600';
-      mainLabel.style.color = '#374151';
       mainLabel.style.textAlign = 'left';
       mainLabel.style.flex = '1';
       mainLabelContainer.appendChild(mainLabel);
@@ -1911,7 +1968,6 @@ class DivTable {
       
       const subLabel = document.createElement('span');
       subLabel.innerHTML = col.subLabel;
-      subLabel.style.color = '#6b7280';
       subLabel.style.textAlign = 'left';
       subLabel.style.flex = '1';
       subLabelContainer.appendChild(subLabel);
@@ -1931,9 +1987,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';
@@ -2393,6 +2449,11 @@ class DivTable {
         this.scrollBodyContainer.scrollLeft = scrollLeft;
       });
     }
+    
+    // Adjust fixed body padding for horizontal scrollbar (after content is rendered)
+    requestAnimationFrame(() => {
+      this.adjustFixedBodyForHorizontalScrollbar();
+    });
   }
 
   renderRegularRowsWithFixedColumns(dataToRender = this.filteredData) {
@@ -2711,9 +2772,6 @@ class DivTable {
       
       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');
@@ -2802,17 +2860,6 @@ class DivTable {
     // Mark as populated
     row.dataset.populated = 'true';
     
-    // Remove min-height constraint and update estimated height
-    row.style.minHeight = '';
-    
-    // Measure actual height and update estimate for future rows (only once when height increases)
-    requestAnimationFrame(() => {
-      const actualHeight = row.offsetHeight;
-      if (actualHeight > this.estimatedRowHeight) {
-        this.estimatedRowHeight = actualHeight;
-      }
-    });
-    
     // Update tab indexes after population
     this.updateTabIndexes();
   }
@@ -2918,31 +2965,34 @@ class DivTable {
     fixedRow.dataset.populated = 'true';
     scrollRow.dataset.populated = 'true';
     
-    // Remove min-height constraints and synchronize row heights
-    fixedRow.style.minHeight = '';
-    scrollRow.style.minHeight = '';
-    
     // Synchronize heights between fixed and scroll row parts after cell population
+    // Use double requestAnimationFrame to ensure layout is fully complete
     requestAnimationFrame(() => {
-      // Reset any previously set explicit heights
-      fixedRow.style.height = '';
-      scrollRow.style.height = '';
-      
-      // Get natural heights after cell content is rendered
-      const fixedHeight = fixedRow.offsetHeight;
-      const scrollHeight = scrollRow.offsetHeight;
-      
-      // Set both to the maximum height
-      const maxHeight = Math.max(fixedHeight, scrollHeight);
-      if (maxHeight > 0) {
-        fixedRow.style.height = `${maxHeight}px`;
-        scrollRow.style.height = `${maxHeight}px`;
-      }
-      
-      // Update estimated height for future rows
-      if (maxHeight > this.estimatedRowHeight) {
-        this.estimatedRowHeight = maxHeight;
-      }
+      requestAnimationFrame(() => {
+        // Reset any fixed heights to get natural content height
+        fixedRow.style.height = '';
+        scrollRow.style.height = '';
+        
+        // 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);
+        
+        // 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);
+        });
+        
+        const maxHeight = Math.max(fixedHeight, scrollHeight, maxCellHeight);
+        if (maxHeight > 0) {
+          fixedRow.style.height = `${maxHeight}px`;
+          scrollRow.style.height = `${maxHeight}px`;
+        }
+      });
     });
     
     // Update tab indexes after population
@@ -3140,9 +3190,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');
@@ -3520,9 +3567,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');
@@ -4115,10 +4159,15 @@ class DivTable {
   updateInfoSection() {
     if (!this.infoSection) return;
     
-    const total = this.virtualScrolling ? this.totalRecords : this.data.length;
+    // For virtual scrolling, use the max of totalRecords and actual loaded data
+    // This handles cases where loaded data exceeds the reported total
+    const total = this.virtualScrolling 
+      ? Math.max(this.totalRecords, this.data.length) 
+      : this.data.length;
     const loaded = this.data.length;
     const filtered = this.filteredData.length;
-    const selected = this.selectedRows.size;
+    // Count only valid selected rows (detail records, not stale IDs)
+    const selected = this.getValidSelectedCount();
     
     // Clear existing content
     this.infoSection.innerHTML = '';
@@ -4554,10 +4603,12 @@ class DivTable {
   updateInfoSectionWithAnticipatedProgress() {
     if (!this.infoSection || !this.virtualScrolling) return;
     
-    const total = this.totalRecords;
+    // Use max of totalRecords and actual loaded data to handle inconsistencies
+    const total = Math.max(this.totalRecords, this.data.length);
     const currentLoaded = this.data.length;
     const filtered = this.filteredData.length;
-    const selected = this.selectedRows.size;
+    // Count only valid selected rows (detail records, not stale IDs)
+    const selected = this.getValidSelectedCount();
     
     // Calculate anticipated progress (assume we'll get a full page of data)
     const anticipatedLoaded = Math.min(currentLoaded + this.pageSize, total);
@@ -4835,6 +4886,15 @@ class DivTable {
     return Array.from(this.selectedRows).map(id => this.findRowData(id)).filter(Boolean);
   }
 
+  /**
+   * Get the count of selected rows that have valid data records
+   * This excludes any stale selections (IDs that no longer exist in data)
+   * @returns {number} The count of valid selected rows
+   */
+  getValidSelectedCount() {
+    return this.getSelectedRows().length;
+  }
+
   /**
    * Toggle the filter to show only selected rows or all rows
    * @param {boolean} [showOnlySelected] - Optional: explicitly set the filter state (true = show only selected, false = show all). If omitted, toggles current state.