@vii7/div-table-widget 1.0.1 → 1.1.1

package/src/div-table.js

@@ -82,6 +82,17 @@ class DivTable {
     // Fixed columns option (frozen left columns)
     this.fixedColumns = options.fixedColumns || 0;
     
+    // Lazy cell rendering option (for performance optimization)
+    this.lazyCellRendering = options.lazyCellRendering !== false; // Enabled by default
+    this.lazyRenderMargin = options.lazyRenderMargin || '200px'; // Pre-render rows slightly before visible
+    this.rowObserver = null; // IntersectionObserver for lazy rendering
+    
+    // Aggregate summary row options
+    // Header summary shows totals for entire dataset (grand total)
+    // Group summary shows totals per group when data is grouped
+    this.showHeaderSummary = options.showHeaderSummary || false;
+    this.showGroupSummary = options.showGroupSummary || false;
+    
     // Find primary key field first
     this.primaryKeyField = this.columns.find(col => col.primaryKey)?.field || 'id';
     
@@ -341,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() {
@@ -710,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();
       }
     });
@@ -1277,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;
@@ -1294,21 +1350,25 @@ 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;
         }
       });
     }
 
     // Update main header checkbox state
     this.updateHeaderCheckbox();
+    
+    // Update summary row aggregates based on current selection
+    this.updateSummaryRows();
   }
 
   updateSelectionStatesWithFixedColumns() {
@@ -1337,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;
 
@@ -1352,21 +1414,25 @@ 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;
         }
       });
     }
 
     // Update main header checkbox state
     this.updateHeaderCheckbox();
+    
+    // Update summary row aggregates based on current selection
+    this.updateSummaryRows();
   }
 
   updateHeaderCheckbox() {
@@ -1495,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
@@ -1577,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();
@@ -1715,6 +1781,10 @@ class DivTable {
         // Group headers span all columns - set explicit width to match total
         row.style.gridTemplateColumns = '1fr';
         row.style.minWidth = `${totalWidth}px`;
+      } else if (row.classList.contains('summary-row')) {
+        // Summary rows need the same grid template as regular rows
+        row.style.gridTemplateColumns = gridTemplate;
+        row.style.minWidth = `${totalWidth}px`;
       } else {
         row.style.gridTemplateColumns = gridTemplate;
       }
@@ -2239,6 +2309,11 @@ class DivTable {
   }
 
   renderBody() {
+    // Disconnect lazy rendering observer before clearing content
+    if (this.rowObserver) {
+      this.rowObserver.disconnect();
+    }
+    
     // Handle fixed columns layout
     if (this.fixedColumns > 0) {
       this.renderBodyWithFixedColumns();
@@ -2284,9 +2359,24 @@ class DivTable {
     } else {
       this.renderRegularRows(dataToRender);
     }
+    
+    // Add header summary row if enabled and has aggregate columns
+    if (this.showHeaderSummary && this.hasAggregateColumns()) {
+      const summaryRow = this.createHeaderSummaryRow(dataToRender);
+      // Insert at the beginning of body container (after header)
+      this.bodyContainer.insertBefore(summaryRow, this.bodyContainer.firstChild);
+    }
+    
+    // Setup lazy cell rendering observer if enabled
+    if (this.lazyCellRendering) {
+      this.setupLazyRenderingObserver();
+    }
   }
 
   renderBodyWithFixedColumns() {
+    // Preserve horizontal scroll position before clearing
+    const scrollLeft = this.scrollBodyContainer?.scrollLeft || 0;
+    
     this.fixedBodyContainer.innerHTML = '';
     this.scrollBodyContainer.innerHTML = '';
 
@@ -2327,11 +2417,36 @@ class DivTable {
       this.renderRegularRowsWithFixedColumns(dataToRender);
     }
     
+    // Add header summary row if enabled and has aggregate columns
+    if (this.showHeaderSummary && this.hasAggregateColumns()) {
+      const { fixedSummary, scrollSummary } = this.createHeaderSummaryRowWithFixedColumns(dataToRender);
+      // Insert at the beginning of body containers (after header)
+      this.fixedBodyContainer.insertBefore(fixedSummary, this.fixedBodyContainer.firstChild);
+      this.scrollBodyContainer.insertBefore(scrollSummary, this.scrollBodyContainer.firstChild);
+    }
+    
     // Synchronize column widths in scroll section (must be done before row heights)
     this.syncFixedColumnsColumnWidths();
     
     // Synchronize row heights between fixed and scroll sections
     this.syncFixedColumnsRowHeights();
+    
+    // Setup lazy cell rendering observer if enabled
+    if (this.lazyCellRendering) {
+      this.setupLazyRenderingObserver();
+    }
+    
+    // Restore horizontal scroll position after rendering
+    if (scrollLeft > 0) {
+      requestAnimationFrame(() => {
+        this.scrollBodyContainer.scrollLeft = scrollLeft;
+      });
+    }
+    
+    // Adjust fixed body padding for horizontal scrollbar (after content is rendered)
+    requestAnimationFrame(() => {
+      this.adjustFixedBodyForHorizontalScrollbar();
+    });
   }
 
   renderRegularRowsWithFixedColumns(dataToRender = this.filteredData) {
@@ -2388,6 +2503,115 @@ class DivTable {
           this.scrollBodyContainer.appendChild(scrollRow);
         });
       }
+      
+      // Add group summary row after group (visible even when collapsed)
+      if (this.showGroupSummary && this.hasAggregateColumns()) {
+        const { fixedSummary, scrollSummary } = this.createGroupSummaryRowWithFixedColumns(group);
+        this.fixedBodyContainer.appendChild(fixedSummary);
+        this.scrollBodyContainer.appendChild(scrollSummary);
+      }
+    });
+  }
+
+  /**
+   * Setup IntersectionObserver for lazy cell rendering
+   * Observes unpopulated rows and populates them when they enter the viewport
+   */
+  setupLazyRenderingObserver() {
+    // Disconnect existing observer if any
+    if (this.rowObserver) {
+      this.rowObserver.disconnect();
+    }
+    
+    // Check for IntersectionObserver support
+    if (typeof IntersectionObserver === 'undefined') {
+      // Fallback: populate all rows immediately
+      console.warn('DivTable: IntersectionObserver not supported, falling back to eager rendering');
+      this.populateAllUnpopulatedRows();
+      return;
+    }
+    
+    // Determine the root element for observation
+    const rootElement = this.fixedColumns > 0 
+      ? this.scrollBodyContainer 
+      : this.bodyContainer;
+    
+    // Create observer with margin to pre-render rows slightly before visible
+    this.rowObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const row = entry.target;
+          
+          // Only populate if not already done
+          if (row.dataset.populated !== 'true') {
+            const rowId = row.dataset.id;
+            const item = this.findRowData(rowId);
+            
+            if (item) {
+              // Handle fixed columns layout
+              if (this.fixedColumns > 0) {
+                // Find the corresponding row in the other container
+                const isFixedRow = row.classList.contains('div-table-fixed-row');
+                let fixedRow, scrollRow;
+                
+                if (isFixedRow) {
+                  fixedRow = row;
+                  scrollRow = this.scrollBodyContainer.querySelector(`.div-table-row[data-id="${rowId}"]`);
+                } else {
+                  scrollRow = row;
+                  fixedRow = this.fixedBodyContainer.querySelector(`.div-table-row[data-id="${rowId}"]`);
+                }
+                
+                if (fixedRow && scrollRow) {
+                  this.populateRowCellsWithFixedColumns(fixedRow, scrollRow, item);
+                }
+              } else {
+                this.populateRowCells(row, item);
+              }
+            }
+          }
+          
+          // Unobserve after population
+          this.rowObserver.unobserve(row);
+        }
+      });
+    }, {
+      root: rootElement,
+      rootMargin: this.lazyRenderMargin, // Pre-render before visible
+      threshold: 0
+    });
+    
+    // Observe all unpopulated rows
+    const rows = this.fixedColumns > 0 
+      ? this.scrollBodyContainer.querySelectorAll('.div-table-row[data-populated="false"]')
+      : this.bodyContainer.querySelectorAll('.div-table-row[data-populated="false"]');
+    
+    rows.forEach(row => {
+      this.rowObserver.observe(row);
+    });
+    
+    // Also observe in fixed section if using fixed columns
+    if (this.fixedColumns > 0 && this.fixedBodyContainer) {
+      const fixedRows = this.fixedBodyContainer.querySelectorAll('.div-table-row[data-populated="false"]');
+      fixedRows.forEach(row => {
+        this.rowObserver.observe(row);
+      });
+    }
+  }
+  
+  /**
+   * Fallback method to populate all unpopulated rows (when IntersectionObserver not available)
+   */
+  populateAllUnpopulatedRows() {
+    const bodyContainer = this.fixedColumns > 0 ? this.scrollBodyContainer : this.bodyContainer;
+    const rows = bodyContainer.querySelectorAll('.div-table-row[data-populated="false"]');
+    
+    rows.forEach(row => {
+      const rowId = row.dataset.id;
+      const item = this.findRowData(rowId);
+      if (item) {
+        this.populateRowCells(row, item);
+      }
     });
   }
 
@@ -2443,58 +2667,26 @@ class DivTable {
           this.bodyContainer.appendChild(row);
         });
       }
+      
+      // Add group summary row after group (visible even when collapsed)
+      if (this.showGroupSummary && this.hasAggregateColumns()) {
+        const groupSummary = this.createGroupSummaryRow(group);
+        this.bodyContainer.appendChild(groupSummary);
+      }
     });
   }
 
-  createRow(item) {
-    const row = document.createElement('div');
-    row.className = 'div-table-row';
-    row.dataset.id = item[this.primaryKeyField];
-    // Don't set tabindex here - will be managed by updateTabIndexes() based on checkbox presence
+  /**
+   * Populate cells for a row that was created as an empty shell (lazy rendering)
+   * @param {HTMLElement} row - The row element to populate
+   * @param {Object} item - The data item for this row
+   */
+  populateRowCells(row, item) {
+    // Skip if already populated
+    if (row.dataset.populated === 'true') return;
     
     const compositeColumns = this.getCompositeColumns();
-    
-    // Build grid template matching the header
-    let gridTemplate = '';
-    if (this.showCheckboxes) {
-      gridTemplate = '40px '; // Checkbox column
-    }
-    
-    // Add column templates for each composite group
-    compositeColumns.forEach(composite => {
-      const firstCol = composite.columns[0];
-      const responsive = firstCol.responsive || {};
-      switch (responsive.size) {
-        case 'fixed-narrow':
-          gridTemplate += '80px ';
-          break;
-        case 'fixed-medium':
-          gridTemplate += '120px ';
-          break;
-        case 'flexible-small':
-          gridTemplate += '1fr ';
-          break;
-        case 'flexible-medium':
-          gridTemplate += '2fr ';
-          break;
-        case 'flexible-large':
-          gridTemplate += '3fr ';
-          break;
-        default:
-          gridTemplate += '1fr ';
-      }
-    });
-    
-    row.style.gridTemplateColumns = gridTemplate.trim();
-
-    // Selection state
     const rowId = String(item[this.primaryKeyField]);
-    if (this.selectedRows.has(rowId)) {
-      row.classList.add('selected');
-    }
-    if (this.focusedRowId === rowId) {
-      row.classList.add('focused');
-    }
 
     // Checkbox column
     if (this.showCheckboxes) {
@@ -2508,7 +2700,6 @@ class DivTable {
       checkbox.addEventListener('change', (e) => {
         e.stopPropagation();
         
-        // Verify that the row data exists before proceeding
         const rowData = this.findRowData(rowId);
         if (!rowData) {
           console.warn('DivTable: Could not find data for row ID:', rowId);
@@ -2525,14 +2716,10 @@ class DivTable {
           rowData.selected = false;
           row.classList.remove('selected');
           
-          // If filter is active and we just deselected a row, re-render to remove it from view
           if (this.showOnlySelected) {
-            // Re-render the body to update the filtered view
             this.renderBody();
-            // Update info section after render
             this.updateInfoSection();
             
-            // Trigger selection change callback
             const selectedData = Array.from(this.selectedRows)
               .map(id => this.findRowData(id))
               .filter(Boolean);
@@ -2540,17 +2727,13 @@ class DivTable {
             if (typeof this.onSelectionChange === 'function') {
               this.onSelectionChange(selectedData);
             }
-            
-            // Early return since we already updated everything
             return;
           }
         }
         
-        // Update all checkbox states (group and header)
         this.updateSelectionStates();
         this.updateInfoSection();
         
-        // Ensure we only return valid data objects
         const selectedData = Array.from(this.selectedRows)
           .map(id => this.findRowData(id))
           .filter(Boolean);
@@ -2560,24 +2743,14 @@ class DivTable {
         }
       });
       
-      // Sync checkbox focus with row focus
       checkbox.addEventListener('focus', (e) => {
         this.updateFocusState(row);
       });
       
-      checkbox.addEventListener('blur', (e) => {
-        // Optionally handle blur if needed - for now, keep row focused
-        // This allows arrow key navigation to continue working
-      });
-      
       checkboxCell.appendChild(checkbox);
       
-      // Make the entire checkbox cell clickable
       checkboxCell.addEventListener('click', (e) => {
-        // If clicked on the checkbox itself, let it handle naturally
         if (e.target === checkbox) return;
-        
-        // If clicked elsewhere in the cell, toggle the checkbox
         e.stopPropagation();
         checkbox.click();
       });
@@ -2591,7 +2764,6 @@ class DivTable {
       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';
@@ -2601,12 +2773,10 @@ class DivTable {
           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';
@@ -2632,7 +2802,6 @@ class DivTable {
               subCell.appendChild(mainDiv);
               subCell.appendChild(subDiv);
             } else {
-              // Regular rendering
               if (typeof col.render === 'function') {
                 subCell.innerHTML = col.render(item[col.field], item);
               } else {
@@ -2644,15 +2813,12 @@ class DivTable {
           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');
             
@@ -2675,7 +2841,6 @@ class DivTable {
             cell.appendChild(mainDiv);
             cell.appendChild(subDiv);
           } else {
-            // Regular column rendering
             if (typeof col.render === 'function') {
               cell.innerHTML = col.render(item[col.field], item);
             } else {
@@ -2688,86 +2853,42 @@ class DivTable {
       row.appendChild(cell);
     });
 
-    // Row click handler - set focus index for clicked row
-    row.addEventListener('click', (e) => {
-      // Only handle focus if not clicking on checkbox column
-      if (e.target.closest('.checkbox-column')) return;
-      
-      // Check if user is making a text selection
-      const selection = window.getSelection();
-      if (selection.toString().length > 0) {
-        return; // Don't trigger focus if user is selecting text
-      }
-      
-      // Find the focusable element for this row
-      const focusableElement = this.getFocusableElementForRow(row);
-      if (focusableElement) {
-        // Check if this row already has focus
-        const currentFocused = this.getCurrentFocusedElement();
-        if (currentFocused === focusableElement) {
-          return; // Don't trigger focus event if already focused
-        }
-        
-        // Get all focusable elements and find the index of this element
-        const focusableElements = this.getAllFocusableElements();
-        const focusIndex = focusableElements.indexOf(focusableElement);
+    // 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`;
         
-        if (focusIndex !== -1) {
-          // Use the existing focus system to set focus to this index
-          this.focusElementAtIndex(focusIndex);
+        // Update estimate for future unpopulated rows
+        if (actualHeight > this.estimatedRowHeight) {
+          this.estimatedRowHeight = actualHeight;
         }
       }
     });
-
-    // Row focus event to sync with tabIndex navigation
-    row.addEventListener('focus', (e) => {
-      this.updateFocusState(row);
-    });
-
-    return row;
+    
+    // Update tab indexes after population
+    this.updateTabIndexes();
   }
 
-  createRowWithFixedColumns(item) {
+  /**
+   * Populate cells for fixed columns layout (both fixed and scroll row parts)
+   * @param {HTMLElement} fixedRow - The fixed row element
+   * @param {HTMLElement} scrollRow - The scroll row element  
+   * @param {Object} item - The data item for this row
+   */
+  populateRowCellsWithFixedColumns(fixedRow, scrollRow, item) {
+    // Skip if already populated
+    if (fixedRow.dataset.populated === 'true') return;
+    
     const { fixedColumns, scrollColumns } = this.splitColumnsForFixedLayout();
     const rowId = String(item[this.primaryKeyField]);
     
-    // Create fixed row part
-    const fixedRow = document.createElement('div');
-    fixedRow.className = 'div-table-row div-table-fixed-row';
-    fixedRow.dataset.id = rowId;
-    
-    // Build grid template for fixed row
-    let fixedGridTemplate = '';
-    if (this.showCheckboxes) {
-      fixedGridTemplate = '40px ';
-    }
-    fixedColumns.forEach(composite => {
-      fixedGridTemplate += this.getColumnGridSize(composite) + ' ';
-    });
-    fixedRow.style.gridTemplateColumns = fixedGridTemplate.trim();
-    
-    // Create scrollable row part
-    const scrollRow = document.createElement('div');
-    scrollRow.className = 'div-table-row div-table-scroll-row';
-    scrollRow.dataset.id = rowId;
-    
-    // Build grid template for scrollable row
-    let scrollGridTemplate = '';
-    scrollColumns.forEach(composite => {
-      scrollGridTemplate += this.getColumnGridSize(composite) + ' ';
-    });
-    scrollRow.style.gridTemplateColumns = scrollGridTemplate.trim();
-    
-    // Apply selection state to both row parts
-    if (this.selectedRows.has(rowId)) {
-      fixedRow.classList.add('selected');
-      scrollRow.classList.add('selected');
-    }
-    if (this.focusedRowId === rowId) {
-      fixedRow.classList.add('focused');
-      scrollRow.classList.add('focused');
-    }
-    
     // Checkbox column (in fixed row only)
     if (this.showCheckboxes) {
       const checkboxCell = document.createElement('div');
@@ -2852,21 +2973,562 @@ class DivTable {
       scrollRow.appendChild(cell);
     });
     
-    // Row click handlers for both parts
-    const handleRowClick = (e, targetRow) => {
-      if (e.target.closest('.checkbox-column')) return;
-      
-      const selection = window.getSelection();
-      if (selection.toString().length > 0) return;
-      
-      const focusableElement = this.getFocusableElementForRow(fixedRow);
-      if (focusableElement) {
-        const focusableElements = this.getAllFocusableElements();
-        const focusIndex = focusableElements.indexOf(focusableElement);
-        if (focusIndex !== -1) {
-          this.focusElementAtIndex(focusIndex);
+    // Mark as populated
+    fixedRow.dataset.populated = 'true';
+    scrollRow.dataset.populated = 'true';
+    
+    // Synchronize heights between fixed and scroll row parts after cell population
+    // 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;
+        
+        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;
+        
+        // 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`;
+        
+        // Update estimate for future unpopulated rows
+        if (maxHeight > this.estimatedRowHeight) {
+          this.estimatedRowHeight = maxHeight;
         }
-      }
+      });
+    });
+    
+    // Update tab indexes after population
+    this.updateTabIndexes();
+  }
+
+  createRow(item) {
+    const row = document.createElement('div');
+    row.className = 'div-table-row';
+    row.dataset.id = item[this.primaryKeyField];
+    // Don't set tabindex here - will be managed by updateTabIndexes() based on checkbox presence
+    
+    const compositeColumns = this.getCompositeColumns();
+    
+    // Build grid template matching the header
+    let gridTemplate = '';
+    if (this.showCheckboxes) {
+      gridTemplate = '40px '; // Checkbox column
+    }
+    
+    // Add column templates for each composite group
+    compositeColumns.forEach(composite => {
+      const firstCol = composite.columns[0];
+      const responsive = firstCol.responsive || {};
+      switch (responsive.size) {
+        case 'fixed-narrow':
+          gridTemplate += '80px ';
+          break;
+        case 'fixed-medium':
+          gridTemplate += '120px ';
+          break;
+        case 'flexible-small':
+          gridTemplate += '1fr ';
+          break;
+        case 'flexible-medium':
+          gridTemplate += '2fr ';
+          break;
+        case 'flexible-large':
+          gridTemplate += '3fr ';
+          break;
+        default:
+          gridTemplate += '1fr ';
+      }
+    });
+    
+    row.style.gridTemplateColumns = gridTemplate.trim();
+
+    // Selection state
+    const rowId = String(item[this.primaryKeyField]);
+    if (this.selectedRows.has(rowId)) {
+      row.classList.add('selected');
+    }
+    if (this.focusedRowId === rowId) {
+      row.classList.add('focused');
+    }
+
+    // If lazy cell rendering is enabled, create empty shell and defer cell creation
+    if (this.lazyCellRendering) {
+      // Set minimum height to prevent layout shift
+      row.style.minHeight = this.estimatedRowHeight + 'px';
+      row.dataset.populated = 'false';
+      
+      // Row click handler - populate cells first if needed
+      row.addEventListener('click', (e) => {
+        // Populate cells if not yet done
+        if (row.dataset.populated !== 'true') {
+          this.populateRowCells(row, item);
+        }
+        
+        // Only handle focus if not clicking on checkbox column
+        if (e.target.closest('.checkbox-column')) return;
+        
+        const selection = window.getSelection();
+        if (selection.toString().length > 0) return;
+        
+        const focusableElement = this.getFocusableElementForRow(row);
+        if (focusableElement) {
+          const currentFocused = this.getCurrentFocusedElement();
+          if (currentFocused === focusableElement) return;
+          
+          const focusableElements = this.getAllFocusableElements();
+          const focusIndex = focusableElements.indexOf(focusableElement);
+          
+          if (focusIndex !== -1) {
+            this.focusElementAtIndex(focusIndex);
+          }
+        }
+      });
+
+      row.addEventListener('focus', (e) => {
+        // Populate cells if not yet done
+        if (row.dataset.populated !== 'true') {
+          this.populateRowCells(row, item);
+        }
+        this.updateFocusState(row);
+      });
+
+      return row;
+    }
+
+    // Non-lazy rendering: create cells immediately (original behavior)
+    if (this.showCheckboxes) {
+      const checkboxCell = document.createElement('div');
+      checkboxCell.className = 'div-table-cell checkbox-column';
+      
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.checked = this.selectedRows.has(rowId);
+      
+      checkbox.addEventListener('change', (e) => {
+        e.stopPropagation();
+        
+        // Verify that the row data exists before proceeding
+        const rowData = this.findRowData(rowId);
+        if (!rowData) {
+          console.warn('DivTable: Could not find data for row ID:', rowId);
+          return;
+        }
+        
+        if (checkbox.checked) {
+          if (!this.multiSelect) this.clearSelection();
+          this.selectedRows.add(rowId);
+          rowData.selected = true;
+          row.classList.add('selected');
+        } else {
+          this.selectedRows.delete(rowId);
+          rowData.selected = false;
+          row.classList.remove('selected');
+          
+          // If filter is active and we just deselected a row, re-render to remove it from view
+          if (this.showOnlySelected) {
+            // Re-render the body to update the filtered view
+            this.renderBody();
+            // Update info section after render
+            this.updateInfoSection();
+            
+            // Trigger selection change callback
+            const selectedData = Array.from(this.selectedRows)
+              .map(id => this.findRowData(id))
+              .filter(Boolean);
+            
+            if (typeof this.onSelectionChange === 'function') {
+              this.onSelectionChange(selectedData);
+            }
+            
+            // Early return since we already updated everything
+            return;
+          }
+        }
+        
+        // Update all checkbox states (group and header)
+        this.updateSelectionStates();
+        this.updateInfoSection();
+        
+        // Ensure we only return valid data objects
+        const selectedData = Array.from(this.selectedRows)
+          .map(id => this.findRowData(id))
+          .filter(Boolean);
+        
+        if (typeof this.onSelectionChange === 'function') {
+          this.onSelectionChange(selectedData);
+        }
+      });
+      
+      // Sync checkbox focus with row focus
+      checkbox.addEventListener('focus', (e) => {
+        this.updateFocusState(row);
+      });
+      
+      checkbox.addEventListener('blur', (e) => {
+        // Optionally handle blur if needed - for now, keep row focused
+        // This allows arrow key navigation to continue working
+      });
+      
+      checkboxCell.appendChild(checkbox);
+      
+      // Make the entire checkbox cell clickable
+      checkboxCell.addEventListener('click', (e) => {
+        // If clicked on the checkbox itself, let it handle naturally
+        if (e.target === checkbox) return;
+        
+        // If clicked elsewhere in the cell, toggle the checkbox
+        e.stopPropagation();
+        checkbox.click();
+      });
+      
+      row.appendChild(checkboxCell);
+    }
+
+    // Data columns - render using composite structure
+    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] ?? '';
+            }
+          }
+        }
+      }
+      
+      row.appendChild(cell);
+    });
+
+    // Row click handler - set focus index for clicked row
+    row.addEventListener('click', (e) => {
+      // Only handle focus if not clicking on checkbox column
+      if (e.target.closest('.checkbox-column')) return;
+      
+      // Check if user is making a text selection
+      const selection = window.getSelection();
+      if (selection.toString().length > 0) {
+        return; // Don't trigger focus if user is selecting text
+      }
+      
+      // Find the focusable element for this row
+      const focusableElement = this.getFocusableElementForRow(row);
+      if (focusableElement) {
+        // Check if this row already has focus
+        const currentFocused = this.getCurrentFocusedElement();
+        if (currentFocused === focusableElement) {
+          return; // Don't trigger focus event if already focused
+        }
+        
+        // Get all focusable elements and find the index of this element
+        const focusableElements = this.getAllFocusableElements();
+        const focusIndex = focusableElements.indexOf(focusableElement);
+        
+        if (focusIndex !== -1) {
+          // Use the existing focus system to set focus to this index
+          this.focusElementAtIndex(focusIndex);
+        }
+      }
+    });
+
+    // Row focus event to sync with tabIndex navigation
+    row.addEventListener('focus', (e) => {
+      this.updateFocusState(row);
+    });
+
+    return row;
+  }
+
+  createRowWithFixedColumns(item) {
+    const { fixedColumns, scrollColumns } = this.splitColumnsForFixedLayout();
+    const rowId = String(item[this.primaryKeyField]);
+    
+    // Create fixed row part
+    const fixedRow = document.createElement('div');
+    fixedRow.className = 'div-table-row div-table-fixed-row';
+    fixedRow.dataset.id = rowId;
+    
+    // Build grid template for fixed row
+    let fixedGridTemplate = '';
+    if (this.showCheckboxes) {
+      fixedGridTemplate = '40px ';
+    }
+    fixedColumns.forEach(composite => {
+      fixedGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
+    fixedRow.style.gridTemplateColumns = fixedGridTemplate.trim();
+    
+    // Create scrollable row part
+    const scrollRow = document.createElement('div');
+    scrollRow.className = 'div-table-row div-table-scroll-row';
+    scrollRow.dataset.id = rowId;
+    
+    // Build grid template for scrollable row
+    let scrollGridTemplate = '';
+    scrollColumns.forEach(composite => {
+      scrollGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
+    scrollRow.style.gridTemplateColumns = scrollGridTemplate.trim();
+    
+    // Apply selection state to both row parts
+    if (this.selectedRows.has(rowId)) {
+      fixedRow.classList.add('selected');
+      scrollRow.classList.add('selected');
+    }
+    if (this.focusedRowId === rowId) {
+      fixedRow.classList.add('focused');
+      scrollRow.classList.add('focused');
+    }
+    
+    // If lazy cell rendering is enabled, create empty shells and defer cell creation
+    if (this.lazyCellRendering) {
+      fixedRow.style.minHeight = this.estimatedRowHeight + 'px';
+      scrollRow.style.minHeight = this.estimatedRowHeight + 'px';
+      fixedRow.dataset.populated = 'false';
+      scrollRow.dataset.populated = 'false';
+      
+      // Row click handler - populate cells first if needed
+      const handleRowClick = (e, targetRow) => {
+        // Populate cells if not yet done
+        if (fixedRow.dataset.populated !== 'true') {
+          this.populateRowCellsWithFixedColumns(fixedRow, scrollRow, item);
+        }
+        
+        if (e.target.closest('.checkbox-column')) return;
+        
+        const selection = window.getSelection();
+        if (selection.toString().length > 0) return;
+        
+        const focusableElement = this.getFocusableElementForRow(fixedRow);
+        if (focusableElement) {
+          const focusableElements = this.getAllFocusableElements();
+          const focusIndex = focusableElements.indexOf(focusableElement);
+          if (focusIndex !== -1) {
+            this.focusElementAtIndex(focusIndex);
+          }
+        }
+      };
+      
+      fixedRow.addEventListener('click', (e) => handleRowClick(e, fixedRow));
+      scrollRow.addEventListener('click', (e) => handleRowClick(e, scrollRow));
+      
+      fixedRow.addEventListener('focus', (e) => {
+        if (fixedRow.dataset.populated !== 'true') {
+          this.populateRowCellsWithFixedColumns(fixedRow, scrollRow, item);
+        }
+        this.updateFocusStateForFixedRows(fixedRow, scrollRow);
+      });
+      
+      // Sync hover state between row parts
+      fixedRow.addEventListener('mouseenter', () => scrollRow.classList.add('hover'));
+      fixedRow.addEventListener('mouseleave', () => scrollRow.classList.remove('hover'));
+      scrollRow.addEventListener('mouseenter', () => fixedRow.classList.add('hover'));
+      scrollRow.addEventListener('mouseleave', () => fixedRow.classList.remove('hover'));
+      
+      return { fixedRow, scrollRow };
+    }
+
+    // Non-lazy rendering: create cells immediately (original behavior)
+    // Checkbox column (in fixed row only)
+    if (this.showCheckboxes) {
+      const checkboxCell = document.createElement('div');
+      checkboxCell.className = 'div-table-cell checkbox-column';
+      
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.checked = this.selectedRows.has(rowId);
+      
+      checkbox.addEventListener('change', (e) => {
+        e.stopPropagation();
+        
+        const rowData = this.findRowData(rowId);
+        if (!rowData) {
+          console.warn('DivTable: Could not find data for row ID:', rowId);
+          return;
+        }
+        
+        if (checkbox.checked) {
+          if (!this.multiSelect) this.clearSelection();
+          this.selectedRows.add(rowId);
+          rowData.selected = true;
+          fixedRow.classList.add('selected');
+          scrollRow.classList.add('selected');
+        } else {
+          this.selectedRows.delete(rowId);
+          rowData.selected = false;
+          fixedRow.classList.remove('selected');
+          scrollRow.classList.remove('selected');
+          
+          if (this.showOnlySelected) {
+            this.renderBody();
+            this.updateInfoSection();
+            
+            const selectedData = Array.from(this.selectedRows)
+              .map(id => this.findRowData(id))
+              .filter(Boolean);
+            
+            if (typeof this.onSelectionChange === 'function') {
+              this.onSelectionChange(selectedData);
+            }
+            return;
+          }
+        }
+        
+        this.updateSelectionStates();
+        this.updateInfoSection();
+        
+        const selectedData = Array.from(this.selectedRows)
+          .map(id => this.findRowData(id))
+          .filter(Boolean);
+        
+        if (typeof this.onSelectionChange === 'function') {
+          this.onSelectionChange(selectedData);
+        }
+      });
+      
+      checkbox.addEventListener('focus', (e) => {
+        this.updateFocusStateForFixedRows(fixedRow, scrollRow);
+      });
+      
+      checkboxCell.appendChild(checkbox);
+      
+      checkboxCell.addEventListener('click', (e) => {
+        if (e.target === checkbox) return;
+        e.stopPropagation();
+        checkbox.click();
+      });
+      
+      fixedRow.appendChild(checkboxCell);
+    }
+    
+    // Render fixed columns
+    fixedColumns.forEach(composite => {
+      const cell = this.createCellForComposite(composite, item);
+      fixedRow.appendChild(cell);
+    });
+    
+    // Render scrollable columns
+    scrollColumns.forEach(composite => {
+      const cell = this.createCellForComposite(composite, item);
+      scrollRow.appendChild(cell);
+    });
+    
+    // Row click handlers for both parts
+    const handleRowClick = (e, targetRow) => {
+      if (e.target.closest('.checkbox-column')) return;
+      
+      const selection = window.getSelection();
+      if (selection.toString().length > 0) return;
+      
+      const focusableElement = this.getFocusableElementForRow(fixedRow);
+      if (focusableElement) {
+        const focusableElements = this.getAllFocusableElements();
+        const focusIndex = focusableElements.indexOf(focusableElement);
+        if (focusIndex !== -1) {
+          this.focusElementAtIndex(focusIndex);
+        }
+      }
     };
     
     fixedRow.addEventListener('click', (e) => handleRowClick(e, fixedRow));
@@ -2914,6 +3576,13 @@ class DivTable {
     const cell = document.createElement('div');
     cell.className = 'div-table-cell';
     
+    // Apply text alignment from column config (single column only)
+    if (!composite.compositeName && composite.columns[0]?.align) {
+      cell.style.textAlign = composite.columns[0].align;
+      cell.style.justifyContent = composite.columns[0].align === 'right' ? 'flex-end' : 
+                                   composite.columns[0].align === 'center' ? 'center' : 'flex-start';
+    }
+    
     if (composite.compositeName) {
       // Composite cell with multiple columns stacked vertically
       cell.classList.add('composite-cell');
@@ -3512,10 +4181,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 = '';
@@ -3951,10 +4625,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);
@@ -4232,6 +4908,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.
@@ -4853,145 +5538,705 @@ class DivTable {
       }
     }
     
-    if (addedCount > 0 || updatedCount > 0) {
-      this.isLoadingState = false;
-      
-      // Update the query engine with new/updated data
-      this.queryEngine.setObjects(this.data);
-      
-      // Update query editor if field values changed (for completion suggestions)
-      this.updateQueryEditorIfNeeded();
+    if (addedCount > 0 || updatedCount > 0) {
+      this.isLoadingState = false;
+      
+      // Update the query engine with new/updated data
+      this.queryEngine.setObjects(this.data);
+      
+      // Update query editor if field values changed (for completion suggestions)
+      this.updateQueryEditorIfNeeded();
+      
+      // Update filtered data if no active query
+      if (!this.currentQuery.trim()) {
+        this.filteredData = [...this.data];
+      } else {
+        // Re-apply query to include new/updated data
+        this.applyQuery(this.currentQuery);
+      }
+      
+      // Only update info section and re-render if not skipped
+      // (loadNextPage will handle this after setting loading state correctly)
+      if (!skipInfoUpdate) {
+        this.updateInfoSection();
+        this.render();
+      } else {
+        // Still need to render the data, just skip the info section update
+        this.render();
+      }
+    }
+    
+    return { 
+      added: addedCount, 
+      updated: updatedCount, 
+      skipped: invalid.length, 
+      invalid 
+    };
+  }
+
+  replaceData(newData) {
+    if (!newData || !Array.isArray(newData)) {
+      console.warn('replaceData requires a valid array');
+      return { success: false, message: 'Invalid data provided' };
+    }
+
+    // Validate data integrity and check for duplicates within the new data
+    const duplicates = [];
+    const seenIds = new Set();
+    const validRecords = [];
+    
+    for (const record of newData) {
+      if (!record || typeof record !== 'object') {
+        console.warn('replaceData: Skipping invalid record', record);
+        continue;
+      }
+      
+      // Ensure the record has a primary key
+      if (!record[this.primaryKeyField]) {
+        console.warn(`replaceData: Skipping record without ${this.primaryKeyField}`, record);
+        continue;
+      }
+      
+      // Check for duplicate primary key within the new data
+      const recordId = String(record[this.primaryKeyField]);
+      if (seenIds.has(recordId)) {
+        duplicates.push(recordId);
+        console.warn(`replaceData: Skipping duplicate ${this.primaryKeyField} '${recordId}' within new data`);
+        continue;
+      }
+      
+      seenIds.add(recordId);
+      validRecords.push(record);
+    }
+
+    this.data = validRecords;
+    this.isLoadingState = false;
+    this.clearRefreshButtonLoadingState();
+    
+    this.queryEngine.setObjects(this.data);
+    
+    this.updateQueryEditorIfNeeded();
+    
+    if (this.currentQuery && this.currentQuery.trim()) {
+      this.applyQuery(this.currentQuery);
+    } else {
+      this.filteredData = [...this.data];
+    }
+    
+    this.selectedRows.clear();
+    
+    this.virtualScrollingState = {
+      scrollTop: 0,
+      displayStartIndex: 0,
+      displayEndIndex: Math.min(this.pageSize, this.data.length),
+      isLoading: false,
+    };
+    
+    // Reset pagination to first page (zero-indexed)
+    this.currentPage = 0;
+    this.startId = 1;
+    
+    // Update hasMoreData flag based on whether we have less data than totalRecords
+    if (this.virtualScrolling && this.totalRecords) {
+      this.hasMoreData = validRecords.length < this.totalRecords;
+    }
+    
+    // Update info display and re-render
+    this.updateInfoSection();
+    this.render();
+    
+    return { 
+      success: true, 
+      totalProvided: newData.length,
+      validRecords: validRecords.length, 
+      skipped: newData.length - validRecords.length, 
+      duplicates 
+    };
+  }
+
+  // Loading placeholder management
+  resetToLoading() {
+    this.isLoadingState = true;
+    this.data = [];
+    this.filteredData = [];
+    this.selectedRows.clear();
+    this.currentQuery = '';
+    
+    // Update Monaco editor if it exists
+    if (this.queryEditor?.editor) {
+      this.queryEditor.editor.setValue('');
+    }
+    
+    // Update the query engine with empty data
+    this.queryEngine.setObjects([]);
+    
+    // Re-render to show loading placeholder
+    this.render();
+  }
+
+  setLoadingState(isLoading) {
+    this.isLoadingState = Boolean(isLoading);
+    this.render(); // Re-render to show/hide loading placeholder
+  }
+
+  // =====================================
+  // Aggregate Summary Row Methods
+  // =====================================
+
+  /**
+   * Check if any column has an aggregate defined
+   * @returns {boolean} True if at least one column has aggregate property
+   */
+  hasAggregateColumns() {
+    return this.columns.some(col => col.aggregate);
+  }
+
+  /**
+   * Get columns that have aggregate functions defined
+   * @returns {Array} Array of columns with aggregate property
+   */
+  getAggregateColumns() {
+    return this.columns.filter(col => col.aggregate);
+  }
+
+  /**
+   * Calculate aggregate value for a specific column and data set
+   * @param {Object} column - Column definition with aggregate property
+   * @param {Array} data - Array of data items to aggregate
+   * @returns {number|null} Calculated aggregate value
+   */
+  calculateAggregate(column, data) {
+    if (!column.aggregate || !data || data.length === 0) {
+      return null;
+    }
+
+    const field = column.field;
+    const aggregateType = column.aggregate.toLowerCase();
+    
+    // Extract numeric values from data
+    const values = data
+      .map(item => item[field])
+      .filter(val => val !== null && val !== undefined && !isNaN(parseFloat(val)))
+      .map(val => parseFloat(val));
+    
+    if (values.length === 0 && aggregateType !== 'count') {
+      return null;
+    }
+
+    switch (aggregateType) {
+      case 'sum':
+        return values.reduce((sum, val) => sum + val, 0);
+      
+      case 'avg':
+      case 'average':
+        return values.length > 0 ? values.reduce((sum, val) => sum + val, 0) / values.length : null;
+      
+      case 'count':
+        return data.length;
+      
+      case 'min':
+        return values.length > 0 ? Math.min(...values) : null;
+      
+      case 'max':
+        return values.length > 0 ? Math.max(...values) : null;
+      
+      default:
+        console.warn(`DivTable: Unknown aggregate type '${aggregateType}' for column '${field}'`);
+        return null;
+    }
+  }
+
+  /**
+   * Get the data set to use for aggregation, considering selection state
+   * For header summary: all filtered data, or selected rows if any are selected
+   * @param {Array} dataToRender - The currently displayed data
+   * @returns {Array} Data set to use for aggregation
+   */
+  getAggregationDataSet(dataToRender) {
+    // If there are selected rows, aggregate only selected rows
+    if (this.selectedRows.size > 0) {
+      return dataToRender.filter(item => {
+        const itemId = String(item[this.primaryKeyField]);
+        return this.selectedRows.has(itemId);
+      });
+    }
+    // Otherwise aggregate all displayed data
+    return dataToRender;
+  }
+
+  /**
+   * Format aggregate value for display
+   * @param {number|null} value - The aggregate value
+   * @param {Object} column - Column definition
+   * @returns {string} Formatted value string
+   */
+  formatAggregateValue(value, column) {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    
+    // Use column's render function if available for formatting
+    // But only pass the value, not row data
+    if (typeof column.aggregateRender === 'function') {
+      return column.aggregateRender(value);
+    }
+    
+    // Default formatting based on aggregate type
+    const aggregateType = column.aggregate.toLowerCase();
+    
+    if (aggregateType === 'count') {
+      return String(value);
+    }
+    
+    // For numeric values, use locale formatting
+    if (typeof value === 'number') {
+      // Check if it's a decimal that needs precision
+      if (aggregateType === 'avg' || aggregateType === 'average') {
+        return value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+      }
+      return value.toLocaleString();
+    }
+    
+    return String(value);
+  }
+
+  /**
+   * Create the header summary row (grand total row below header)
+   * @param {Array} dataToRender - Data to calculate aggregates from
+   * @returns {HTMLElement} Summary row element
+   */
+  createHeaderSummaryRow(dataToRender) {
+    const summaryRow = document.createElement('div');
+    summaryRow.className = 'div-table-row summary-row header-summary';
+    
+    const compositeColumns = this.getCompositeColumns();
+    const aggregationData = this.getAggregationDataSet(dataToRender);
+    
+    // Build grid template matching header
+    let gridTemplate = '';
+    if (this.showCheckboxes) {
+      gridTemplate = '40px '; // Checkbox column
+    }
+    
+    compositeColumns.forEach(composite => {
+      const firstCol = composite.columns[0];
+      const responsive = firstCol.responsive || {};
+      switch (responsive.size) {
+        case 'fixed-narrow': gridTemplate += '80px '; break;
+        case 'fixed-medium': gridTemplate += '120px '; break;
+        case 'flexible-small': gridTemplate += '1fr '; break;
+        case 'flexible-medium': gridTemplate += '2fr '; break;
+        case 'flexible-large': gridTemplate += '3fr '; break;
+        default: gridTemplate += '1fr ';
+      }
+    });
+    
+    summaryRow.style.gridTemplateColumns = gridTemplate.trim();
+    
+    // Empty checkbox cell
+    if (this.showCheckboxes) {
+      const emptyCell = document.createElement('div');
+      emptyCell.className = 'div-table-cell checkbox-column summary-cell';
+      summaryRow.appendChild(emptyCell);
+    }
+    
+    // Create cells for each composite column
+    compositeColumns.forEach(composite => {
+      const cell = document.createElement('div');
+      cell.className = 'div-table-cell summary-cell';
+      
+      if (composite.compositeName) {
+        // Composite column - check each sub-column for aggregates
+        cell.classList.add('composite-cell');
+        
+        composite.columns.forEach((col, idx) => {
+          const subCell = document.createElement('div');
+          subCell.className = 'composite-sub-cell';
+          
+          if (col.aggregate) {
+            const aggregateValue = this.calculateAggregate(col, aggregationData);
+            const formattedValue = this.formatAggregateValue(aggregateValue, col);
+            subCell.innerHTML = formattedValue;
+            subCell.classList.add('aggregate-value');
+          }
+          
+          cell.appendChild(subCell);
+        });
+      } else {
+        // Single column
+        const col = composite.columns[0];
+        
+        if (col.aggregate) {
+          const aggregateValue = this.calculateAggregate(col, aggregationData);
+          const formattedValue = this.formatAggregateValue(aggregateValue, col);
+          cell.innerHTML = formattedValue;
+          cell.classList.add('aggregate-value');
+        }
+      }
+      
+      summaryRow.appendChild(cell);
+    });
+    
+    return summaryRow;
+  }
+
+  /**
+   * Create a group summary row (subtotal row after group items)
+   * @param {Object} group - Group object with items array
+   * @returns {HTMLElement} Group summary row element
+   */
+  createGroupSummaryRow(group) {
+    const summaryRow = document.createElement('div');
+    summaryRow.className = 'div-table-row summary-row group-summary';
+    summaryRow.dataset.groupKey = group.key;
+    
+    const compositeColumns = this.getCompositeColumns();
+    
+    // For group summary, aggregate only the items in this group
+    // But also respect selection: if items are selected, only aggregate selected items in this group
+    let groupData = group.items;
+    if (this.selectedRows.size > 0) {
+      groupData = group.items.filter(item => {
+        const itemId = String(item[this.primaryKeyField]);
+        return this.selectedRows.has(itemId);
+      });
+    }
+    
+    // Build grid template matching body rows
+    let gridTemplate = '';
+    if (this.showCheckboxes) {
+      gridTemplate = '40px ';
+    }
+    
+    compositeColumns.forEach(composite => {
+      const firstCol = composite.columns[0];
+      const responsive = firstCol.responsive || {};
+      switch (responsive.size) {
+        case 'fixed-narrow': gridTemplate += '80px '; break;
+        case 'fixed-medium': gridTemplate += '120px '; break;
+        case 'flexible-small': gridTemplate += '1fr '; break;
+        case 'flexible-medium': gridTemplate += '2fr '; break;
+        case 'flexible-large': gridTemplate += '3fr '; break;
+        default: gridTemplate += '1fr ';
+      }
+    });
+    
+    summaryRow.style.gridTemplateColumns = gridTemplate.trim();
+    
+    // Empty checkbox cell
+    if (this.showCheckboxes) {
+      const emptyCell = document.createElement('div');
+      emptyCell.className = 'div-table-cell checkbox-column summary-cell';
+      summaryRow.appendChild(emptyCell);
+    }
+    
+    // Create cells for each composite column
+    compositeColumns.forEach(composite => {
+      const cell = document.createElement('div');
+      cell.className = 'div-table-cell summary-cell';
       
-      // Update filtered data if no active query
-      if (!this.currentQuery.trim()) {
-        this.filteredData = [...this.data];
+      if (composite.compositeName) {
+        cell.classList.add('composite-cell');
+        
+        composite.columns.forEach(col => {
+          const subCell = document.createElement('div');
+          subCell.className = 'composite-sub-cell';
+          
+          if (col.aggregate) {
+            const aggregateValue = this.calculateAggregate(col, groupData);
+            const formattedValue = this.formatAggregateValue(aggregateValue, col);
+            subCell.innerHTML = formattedValue;
+            subCell.classList.add('aggregate-value');
+          }
+          
+          cell.appendChild(subCell);
+        });
       } else {
-        // Re-apply query to include new/updated data
-        this.applyQuery(this.currentQuery);
+        const col = composite.columns[0];
+        
+        if (col.aggregate) {
+          const aggregateValue = this.calculateAggregate(col, groupData);
+          const formattedValue = this.formatAggregateValue(aggregateValue, col);
+          cell.innerHTML = formattedValue;
+          cell.classList.add('aggregate-value');
+        }
       }
       
-      // Only update info section and re-render if not skipped
-      // (loadNextPage will handle this after setting loading state correctly)
-      if (!skipInfoUpdate) {
-        this.updateInfoSection();
-        this.render();
-      } else {
-        // Still need to render the data, just skip the info section update
-        this.render();
-      }
-    }
+      summaryRow.appendChild(cell);
+    });
     
-    return { 
-      added: addedCount, 
-      updated: updatedCount, 
-      skipped: invalid.length, 
-      invalid 
-    };
+    return summaryRow;
   }
 
-  replaceData(newData) {
-    if (!newData || !Array.isArray(newData)) {
-      console.warn('replaceData requires a valid array');
-      return { success: false, message: 'Invalid data provided' };
+  /**
+   * Create header summary row pair for fixed columns layout
+   * @param {Array} dataToRender - Data to calculate aggregates from
+   * @returns {Object} Object with fixedSummary and scrollSummary elements
+   */
+  createHeaderSummaryRowWithFixedColumns(dataToRender) {
+    const { fixedColumns, scrollColumns } = this.splitColumnsForFixedLayout();
+    const aggregationData = this.getAggregationDataSet(dataToRender);
+    
+    // Fixed section summary row
+    const fixedSummary = document.createElement('div');
+    fixedSummary.className = 'div-table-row div-table-fixed-row summary-row header-summary';
+    
+    let fixedGridTemplate = '';
+    if (this.showCheckboxes) {
+      fixedGridTemplate = '40px ';
     }
-
-    // Validate data integrity and check for duplicates within the new data
-    const duplicates = [];
-    const seenIds = new Set();
-    const validRecords = [];
     
-    for (const record of newData) {
-      if (!record || typeof record !== 'object') {
-        console.warn('replaceData: Skipping invalid record', record);
-        continue;
-      }
-      
-      // Ensure the record has a primary key
-      if (!record[this.primaryKeyField]) {
-        console.warn(`replaceData: Skipping record without ${this.primaryKeyField}`, record);
-        continue;
-      }
-      
-      // Check for duplicate primary key within the new data
-      const recordId = String(record[this.primaryKeyField]);
-      if (seenIds.has(recordId)) {
-        duplicates.push(recordId);
-        console.warn(`replaceData: Skipping duplicate ${this.primaryKeyField} '${recordId}' within new data`);
-        continue;
-      }
-      
-      seenIds.add(recordId);
-      validRecords.push(record);
+    fixedColumns.forEach(composite => {
+      fixedGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
+    
+    fixedSummary.style.gridTemplateColumns = fixedGridTemplate.trim();
+    
+    // Empty checkbox cell in fixed section
+    if (this.showCheckboxes) {
+      const emptyCell = document.createElement('div');
+      emptyCell.className = 'div-table-cell checkbox-column summary-cell';
+      fixedSummary.appendChild(emptyCell);
     }
-
-    this.data = validRecords;
-    this.isLoadingState = false;
-    this.clearRefreshButtonLoadingState();
     
-    this.queryEngine.setObjects(this.data);
+    // Fixed columns cells
+    fixedColumns.forEach(composite => {
+      const cell = this.createSummaryCell(composite, aggregationData);
+      fixedSummary.appendChild(cell);
+    });
     
-    this.updateQueryEditorIfNeeded();
+    // Scroll section summary row
+    const scrollSummary = document.createElement('div');
+    scrollSummary.className = 'div-table-row summary-row header-summary';
     
-    if (this.currentQuery && this.currentQuery.trim()) {
-      this.applyQuery(this.currentQuery);
-    } else {
-      this.filteredData = [...this.data];
+    let scrollGridTemplate = '';
+    scrollColumns.forEach(composite => {
+      scrollGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
+    
+    scrollSummary.style.gridTemplateColumns = scrollGridTemplate.trim();
+    
+    // Scroll columns cells
+    scrollColumns.forEach(composite => {
+      const cell = this.createSummaryCell(composite, aggregationData);
+      scrollSummary.appendChild(cell);
+    });
+    
+    return { fixedSummary, scrollSummary };
+  }
+
+  /**
+   * Create group summary row pair for fixed columns layout
+   * @param {Object} group - Group object with items array
+   * @returns {Object} Object with fixedSummary and scrollSummary elements
+   */
+  createGroupSummaryRowWithFixedColumns(group) {
+    const { fixedColumns, scrollColumns } = this.splitColumnsForFixedLayout();
+    
+    // Get data for this group, considering selection
+    let groupData = group.items;
+    if (this.selectedRows.size > 0) {
+      groupData = group.items.filter(item => {
+        const itemId = String(item[this.primaryKeyField]);
+        return this.selectedRows.has(itemId);
+      });
     }
     
-    this.selectedRows.clear();
+    // Fixed section summary row
+    const fixedSummary = document.createElement('div');
+    fixedSummary.className = 'div-table-row div-table-fixed-row summary-row group-summary';
+    fixedSummary.dataset.groupKey = group.key;
     
-    this.virtualScrollingState = {
-      scrollTop: 0,
-      displayStartIndex: 0,
-      displayEndIndex: Math.min(this.pageSize, this.data.length),
-      isLoading: false,
-    };
+    let fixedGridTemplate = '';
+    if (this.showCheckboxes) {
+      fixedGridTemplate = '40px ';
+    }
     
-    // Reset pagination to first page (zero-indexed)
-    this.currentPage = 0;
-    this.startId = 1;
+    fixedColumns.forEach(composite => {
+      fixedGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
     
-    // Update hasMoreData flag based on whether we have less data than totalRecords
-    if (this.virtualScrolling && this.totalRecords) {
-      this.hasMoreData = validRecords.length < this.totalRecords;
+    fixedSummary.style.gridTemplateColumns = fixedGridTemplate.trim();
+    
+    // Empty checkbox cell
+    if (this.showCheckboxes) {
+      const emptyCell = document.createElement('div');
+      emptyCell.className = 'div-table-cell checkbox-column summary-cell';
+      fixedSummary.appendChild(emptyCell);
     }
     
-    // Update info display and re-render
-    this.updateInfoSection();
-    this.render();
+    // Fixed columns cells
+    fixedColumns.forEach(composite => {
+      const cell = this.createSummaryCell(composite, groupData);
+      fixedSummary.appendChild(cell);
+    });
     
-    return { 
-      success: true, 
-      totalProvided: newData.length,
-      validRecords: validRecords.length, 
-      skipped: newData.length - validRecords.length, 
-      duplicates 
-    };
+    // Scroll section summary row
+    const scrollSummary = document.createElement('div');
+    scrollSummary.className = 'div-table-row summary-row group-summary';
+    scrollSummary.dataset.groupKey = group.key;
+    
+    let scrollGridTemplate = '';
+    scrollColumns.forEach(composite => {
+      scrollGridTemplate += this.getColumnGridSize(composite) + ' ';
+    });
+    
+    scrollSummary.style.gridTemplateColumns = scrollGridTemplate.trim();
+    
+    // Scroll columns cells
+    scrollColumns.forEach(composite => {
+      const cell = this.createSummaryCell(composite, groupData);
+      scrollSummary.appendChild(cell);
+    });
+    
+    return { fixedSummary, scrollSummary };
   }
 
-  // Loading placeholder management
-  resetToLoading() {
-    this.isLoadingState = true;
-    this.data = [];
-    this.filteredData = [];
-    this.selectedRows.clear();
-    this.currentQuery = '';
+  /**
+   * Create a summary cell for a composite column
+   * @param {Object} composite - Composite column definition
+   * @param {Array} data - Data to aggregate
+   * @returns {HTMLElement} Cell element
+   */
+  createSummaryCell(composite, data) {
+    const cell = document.createElement('div');
+    cell.className = 'div-table-cell summary-cell';
     
-    // Update Monaco editor if it exists
-    if (this.queryEditor?.editor) {
-      this.queryEditor.editor.setValue('');
+    if (composite.compositeName) {
+      cell.classList.add('composite-cell');
+      
+      composite.columns.forEach(col => {
+        const subCell = document.createElement('div');
+        subCell.className = 'composite-sub-cell';
+        
+        if (col.aggregate) {
+          const aggregateValue = this.calculateAggregate(col, data);
+          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);
+      });
+    } else {
+      const col = composite.columns[0];
+      
+      // Apply column alignment to summary cell
+      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, data);
+        const formattedValue = this.formatAggregateValue(aggregateValue, col);
+        cell.innerHTML = formattedValue;
+        cell.classList.add('aggregate-value');
+      }
     }
     
-    // Update the query engine with empty data
-    this.queryEngine.setObjects([]);
+    return cell;
+  }
+
+  /**
+   * Update all summary rows (called when selection changes)
+   * Re-calculates aggregates based on current selection state
+   */
+  updateSummaryRows() {
+    if (!this.hasAggregateColumns()) return;
+    if (!this.showHeaderSummary && !this.showGroupSummary) return;
     
-    // Re-render to show loading placeholder
-    this.render();
+    // Get current data to render
+    let dataToRender = this.filteredData;
+    if (this.showOnlySelected && this.selectedRows.size > 0) {
+      dataToRender = this.filteredData.filter(item => {
+        const itemId = String(item[this.primaryKeyField]);
+        return this.selectedRows.has(itemId);
+      });
+    }
+    
+    const aggregationData = this.getAggregationDataSet(dataToRender);
+    
+    // Update header summary row
+    if (this.showHeaderSummary) {
+      this.updateHeaderSummaryValues(aggregationData);
+    }
+    
+    // Update group summary rows
+    if (this.showGroupSummary && this.groupByField) {
+      this.updateGroupSummaryValues(dataToRender);
+    }
   }
 
-  setLoadingState(isLoading) {
-    this.isLoadingState = Boolean(isLoading);
-    this.render(); // Re-render to show/hide loading placeholder
+  /**
+   * Update aggregate values in the header summary row
+   * @param {Array} aggregationData - Data to aggregate
+   */
+  updateHeaderSummaryValues(aggregationData) {
+    const summaryRows = this.fixedColumns > 0
+      ? [
+          this.fixedBodyContainer?.querySelector('.header-summary'),
+          this.scrollBodyContainer?.querySelector('.header-summary')
+        ].filter(Boolean)
+      : [this.bodyContainer?.querySelector('.header-summary')].filter(Boolean);
+    
+    summaryRows.forEach(summaryRow => {
+      const aggregateCells = summaryRow.querySelectorAll('.aggregate-value');
+      const aggregateColumns = this.getAggregateColumns();
+      
+      aggregateCells.forEach((cell, index) => {
+        if (aggregateColumns[index]) {
+          const col = aggregateColumns[index];
+          const aggregateValue = this.calculateAggregate(col, aggregationData);
+          const formattedValue = this.formatAggregateValue(aggregateValue, col);
+          cell.innerHTML = formattedValue;
+        }
+      });
+    });
+  }
+
+  /**
+   * Update aggregate values in all group summary rows
+   * @param {Array} dataToRender - Current displayed data
+   */
+  updateGroupSummaryValues(dataToRender) {
+    const groups = this.groupData(dataToRender);
+    
+    groups.forEach(group => {
+      let groupData = group.items;
+      if (this.selectedRows.size > 0) {
+        groupData = group.items.filter(item => {
+          const itemId = String(item[this.primaryKeyField]);
+          return this.selectedRows.has(itemId);
+        });
+      }
+      
+      const groupSummaries = this.fixedColumns > 0
+        ? [
+            this.fixedBodyContainer?.querySelector(`.group-summary[data-group-key="${group.key}"]`),
+            this.scrollBodyContainer?.querySelector(`.group-summary[data-group-key="${group.key}"]`)
+          ].filter(Boolean)
+        : [this.bodyContainer?.querySelector(`.group-summary[data-group-key="${group.key}"]`)].filter(Boolean);
+      
+      groupSummaries.forEach(summaryRow => {
+        const aggregateCells = summaryRow.querySelectorAll('.aggregate-value');
+        const aggregateColumns = this.getAggregateColumns();
+        
+        aggregateCells.forEach((cell, index) => {
+          if (aggregateColumns[index]) {
+            const col = aggregateColumns[index];
+            const aggregateValue = this.calculateAggregate(col, groupData);
+            const formattedValue = this.formatAggregateValue(aggregateValue, col);
+            cell.innerHTML = formattedValue;
+          }
+        });
+      });
+    });
   }
 }