ms-data-grid 0.0.148 → 0.0.149

package/fesm2022/ms-data-grid.mjs

@@ -1903,7 +1903,7 @@ class DataGridComponent {
         this.renderStart = 0; // where the slice actually starts (firstIndex - overscan, clamped)
         this.scrollRaf = null;
         this.pendingScrollTop = 0;
-        this.overscan = 0; // buffer rows above and below
+        this.overscan = 4; // buffer rows above and below
         this.dragStartIndex = 0;
         // onDragStart(data: any, index: number) {
         //   this.draggingColumn = data.column;
@@ -2764,78 +2764,161 @@ class DataGridComponent {
             .reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
         return Array.isArray(value);
     }
-    onResizeGroup(event, col, isRightPinned) {
+    // onResizeGroup(event: MouseEvent, col: any, isRightPinned?: boolean): void {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    //   const startX = event.clientX;
+    //   const children = col.children || [];
+    //   if (!children.length) return;
+    //   const childWidths: { field: string; width: number }[] = children.map(
+    //     (child: any) => {
+    //       const el = document.querySelector(
+    //         `[field="${child.field}"]`
+    //       ) as HTMLElement;
+    //       return {
+    //         field: child.field,
+    //         width: el?.offsetWidth || 0,
+    //       };
+    //     }
+    //   );
+    //   const totalInitialWidth = childWidths.reduce(
+    //     (sum, col) => sum + col.width,
+    //     0
+    //   );
+    //   const onMouseMove = (moveEvent: MouseEvent) => {
+    //     let deltaX = moveEvent.clientX - startX;
+    //     if (isRightPinned) {
+    //       deltaX = -deltaX;
+    //     }
+    //     // Prevent shrinking too small
+    //     if (totalInitialWidth + deltaX < children.length * 80) return;
+    //     let totalNewWidth = 0;
+    //     childWidths.forEach((child) => {
+    //       const ratio = child.width / totalInitialWidth;
+    //       const newWidth = Math.max(child.width + deltaX * ratio, 80);
+    //       totalNewWidth += newWidth;
+    //       const childEls = document.querySelectorAll(`[field="${child.field}"]`);
+    //       childEls.forEach((el: Element) => {
+    //         const elHtml = el as HTMLElement;
+    //         elHtml.style.minWidth = `${newWidth}px`;
+    //         elHtml.style.width = `${newWidth}px`;
+    //       });
+    //       this.updateColumnWidthInSourceByField(child.field, newWidth);
+    //     });
+    //     // ✅ Update group header width in DOM
+    //     const groupHeaderEl = document.querySelector(
+    //       `[group="${col.header}"]`
+    //     ) as HTMLElement;
+    //     if (groupHeaderEl) {
+    //       groupHeaderEl.style.width = `${totalNewWidth}px`;
+    //     }
+    //   };
+    //   const onMouseUp = () => {
+    //     if (this.tableFilterViewId) {
+    //       this.savePreset('mouseUp');
+    //     }
+    //     this.refreshHeaders();
+    //     window.removeEventListener('mousemove', onMouseMove);
+    //     window.removeEventListener('mouseup', onMouseUp);
+    //     const sendData = {
+    //       columns: this.cleanColumns(this.columns),
+    //       filters: this.cleanFilterdColumns(),
+    //       no_of_records: this.paginationConfig.pageSize,
+    //       table_config: {
+    //          rowShadingEnabled: this.rowShadingEnabled || false,
+    //          showVerticalBorder: this.showVerticalBorder || false,
+    //          fontFaimly: this.fontFaimly || 'Inter',
+    //          headerTextFontsSize: this.headerTextColor || 14,
+    //          selectedTableLayout: this.selectedTableLayout || 'mediumd',
+    //          bodyTextFontsSize: this.bodyTextFontsSize || 14,
+    //          globalSearch: this.globalSearchText,
+    //          filterNames: '',
+    //          totalCount: 0,
+    //          activeFilters: true,
+    //          oddRowsBackgroundColor: '#f1f1f1'
+    //       },
+    //       type: this.tableType,
+    //     };
+    //     this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
+    //   };
+    //   window.addEventListener('mousemove', onMouseMove);
+    //   window.addEventListener('mouseup', onMouseUp);
+    // }
+    onResizeGroup(event, col, isRightPinned = false) {
         event.preventDefault();
         event.stopPropagation();
         const startX = event.clientX;
-        const children = col.children || [];
-        if (!children.length)
+        const children = col.children;
+        if (!children?.length)
             return;
-        const childWidths = children.map((child) => {
-            const el = document.querySelector(`[field="${child.field}"]`);
+        // 🔥 Cache DOM + initial widths once
+        const childMeta = children.map((child) => {
+            const elements = Array.from(document.querySelectorAll(`[field="${child.field}"]`));
+            const width = elements[0]?.offsetWidth || 80;
             return {
                 field: child.field,
-                width: el?.offsetWidth || 0,
+                elements,
+                initialWidth: width,
+                ratio: 0,
+                finalWidth: width
             };
         });
-        const totalInitialWidth = childWidths.reduce((sum, col) => sum + col.width, 0);
+        const totalInitialWidth = childMeta.reduce((sum, c) => sum + c.initialWidth, 0);
+        // 🔥 Precompute ratios once
+        for (const child of childMeta) {
+            child.ratio = child.initialWidth / totalInitialWidth;
+        }
+        // 🔥 Cache group header once
+        const groupHeaderEl = document.querySelector(`[group="${col.header}"]`);
+        let latestDelta = 0;
+        let rafId = null;
+        const applyWidths = () => {
+            rafId = null;
+            let totalNewWidth = 0;
+            for (const child of childMeta) {
+                const newWidth = Math.max(child.initialWidth + latestDelta * child.ratio, 80);
+                child.finalWidth = newWidth;
+                totalNewWidth += newWidth;
+                const widthPx = `${newWidth}px`;
+                for (const el of child.elements) {
+                    el.style.width = widthPx;
+                    el.style.minWidth = widthPx;
+                }
+            }
+            if (groupHeaderEl) {
+                groupHeaderEl.style.width = `${totalNewWidth}px`;
+            }
+        };
         const onMouseMove = (moveEvent) => {
             let deltaX = moveEvent.clientX - startX;
-            if (isRightPinned) {
+            if (isRightPinned)
                 deltaX = -deltaX;
-            }
-            // Prevent shrinking too small
+            // 🔥 Prevent shrinking below min
             if (totalInitialWidth + deltaX < children.length * 80)
                 return;
-            let totalNewWidth = 0;
-            childWidths.forEach((child) => {
-                const ratio = child.width / totalInitialWidth;
-                const newWidth = Math.max(child.width + deltaX * ratio, 80);
-                totalNewWidth += newWidth;
-                const childEls = document.querySelectorAll(`[field="${child.field}"]`);
-                childEls.forEach((el) => {
-                    const elHtml = el;
-                    elHtml.style.minWidth = `${newWidth}px`;
-                    elHtml.style.width = `${newWidth}px`;
-                });
-                this.updateColumnWidthInSourceByField(child.field, newWidth);
-            });
-            // ✅ Update group header width in DOM
-            const groupHeaderEl = document.querySelector(`[group="${col.header}"]`);
-            if (groupHeaderEl) {
-                groupHeaderEl.style.width = `${totalNewWidth}px`;
+            latestDelta = deltaX;
+            if (rafId === null) {
+                rafId = requestAnimationFrame(applyWidths);
             }
         };
         const onMouseUp = () => {
+            // 🔥 Commit widths ONCE
+            for (const child of childMeta) {
+                this.updateColumnWidthInSourceByField(child.field, child.finalWidth);
+            }
             if (this.tableFilterViewId) {
                 this.savePreset('mouseUp');
             }
             this.refreshHeaders();
+            this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
-            const sendData = {
-                columns: this.cleanColumns(this.columns),
-                filters: this.cleanFilterdColumns(),
-                no_of_records: this.paginationConfig.pageSize,
-                table_config: {
-                    rowShadingEnabled: this.rowShadingEnabled || false,
-                    showVerticalBorder: this.showVerticalBorder || false,
-                    fontFaimly: this.fontFaimly || 'Inter',
-                    headerTextFontsSize: this.headerTextColor || 14,
-                    selectedTableLayout: this.selectedTableLayout || 'mediumd',
-                    bodyTextFontsSize: this.bodyTextFontsSize || 14,
-                    globalSearch: this.globalSearchText,
-                    filterNames: '',
-                    totalCount: 0,
-                    activeFilters: true,
-                    oddRowsBackgroundColor: '#f1f1f1'
-                },
-                type: this.tableType,
-            };
-            this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
         };
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('mousemove', onMouseMove, { passive: true });
+        window.addEventListener('mouseup', onMouseUp, { once: true });
     }
     updateColumnWidthInSourceByField(field, width) {
         const update = (columns) => {
@@ -2894,63 +2977,123 @@ class DataGridComponent {
             };
         });
     }
+    // onResizeColumn(event: MouseEvent, col: any): void {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    //   const startX = event.clientX;
+    //   const targetEl = document.querySelector(
+    //     `[field="${col.field}"]`
+    //   ) as HTMLElement;
+    //   const initialWidth = targetEl?.offsetWidth || 150;
+    //   const matchingEls = document.querySelectorAll(`[field="${col.field}"]`);
+    //   // 👉 Add highlight while resizing
+    //   if (col?.pinned == 'right') {
+    //     matchingEls.forEach((el: Element) => {
+    //       (el as HTMLElement).classList.add('resizing-highlight-right');
+    //     });
+    //   } else {
+    //     matchingEls.forEach((el: Element) => {
+    //       (el as HTMLElement).classList.add('resizing-highlight');
+    //     });
+    //   }
+    //   const onMouseMove = (moveEvent: MouseEvent) => {
+    //     let deltaX = moveEvent.clientX - startX;
+    //     // 👉 Reverse if the column is pinned to the right
+    //     if (col.pinned === 'right') {
+    //       deltaX = -deltaX;
+    //     }
+    //     let newWidth = initialWidth + deltaX;
+    //     if (newWidth < 80) return;
+    //     matchingEls.forEach((el: Element) => {
+    //       const element = el as HTMLElement;
+    //       element.style.minWidth = `${newWidth}px`;
+    //       element.style.width = `${newWidth}px`;
+    //     });
+    //     this.updateColumnWidthInSourceByField(col.field, newWidth);
+    //     col.width = newWidth;
+    //     this.hasScroll = this.hasHorizontalScrollbar();
+    //   };
+    //   const onMouseUp = () => {
+    //     if (this.tableFilterViewId) {
+    //       this.savePreset('mouseUp');
+    //     }
+    //     this.refreshHeaders();
+    //     const sendData = {
+    //       columns: this.cleanColumns(this.columns),
+    //       filters: this.cleanFilterdColumns(),
+    //       no_of_records: this.paginationConfig.pageSize,
+    //       type: this.tableType,
+    //     };
+    //     this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
+    //     matchingEls.forEach((el: Element) => {
+    //       (el as HTMLElement).classList.remove('resizing-highlight');
+    //       (el as HTMLElement).classList.remove('resizing-highlight-right');
+    //     });
+    //     window.removeEventListener('mousemove', onMouseMove);
+    //     window.removeEventListener('mouseup', onMouseUp);
+    //   };
+    //   window.addEventListener('mousemove', onMouseMove);
+    //   window.addEventListener('mouseup', onMouseUp);
+    // }
     onResizeColumn(event, col) {
         event.preventDefault();
         event.stopPropagation();
         const startX = event.clientX;
-        const targetEl = document.querySelector(`[field="${col.field}"]`);
-        const initialWidth = targetEl?.offsetWidth || 150;
-        const matchingEls = document.querySelectorAll(`[field="${col.field}"]`);
-        // 👉 Add highlight while resizing
-        if (col?.pinned == 'right') {
-            matchingEls.forEach((el) => {
-                el.classList.add('resizing-highlight-right');
-            });
-        }
-        else {
-            matchingEls.forEach((el) => {
-                el.classList.add('resizing-highlight');
-            });
-        }
+        // 🔥 Cache DOM once
+        const elements = Array.from(document.querySelectorAll(`[field="${col.field}"]`));
+        if (!elements.length)
+            return;
+        const initialWidth = elements[0].offsetWidth || 150;
+        const isRightPinned = col.pinned === 'right';
+        const highlightClass = isRightPinned
+            ? 'resizing-highlight-right'
+            : 'resizing-highlight';
+        // 🔥 Add highlight once
+        elements.forEach(el => el.classList.add(highlightClass));
+        let latestWidth = initialWidth;
+        let rafId = null;
+        const applyWidth = () => {
+            rafId = null;
+            const widthPx = `${latestWidth}px`;
+            for (const el of elements) {
+                el.style.width = widthPx;
+                el.style.minWidth = widthPx;
+            }
+        };
         const onMouseMove = (moveEvent) => {
             let deltaX = moveEvent.clientX - startX;
-            // 👉 Reverse if the column is pinned to the right
-            if (col.pinned === 'right') {
+            if (isRightPinned)
                 deltaX = -deltaX;
-            }
-            let newWidth = initialWidth + deltaX;
+            const newWidth = initialWidth + deltaX;
             if (newWidth < 80)
                 return;
-            matchingEls.forEach((el) => {
-                const element = el;
-                element.style.minWidth = `${newWidth}px`;
-                element.style.width = `${newWidth}px`;
-            });
-            this.updateColumnWidthInSourceByField(col.field, newWidth);
-            col.width = newWidth;
-            this.hasScroll = this.hasHorizontalScrollbar();
+            latestWidth = newWidth;
+            // 🔥 Throttle DOM writes to animation frame
+            if (rafId === null) {
+                rafId = requestAnimationFrame(applyWidth);
+            }
         };
         const onMouseUp = () => {
+            // 🔥 Finalize state ONCE
+            col.width = latestWidth;
+            this.updateColumnWidthInSourceByField(col.field, latestWidth);
+            // 🔥 Run expensive logic once
+            this.hasScroll = this.hasHorizontalScrollbar();
             if (this.tableFilterViewId) {
                 this.savePreset('mouseUp');
             }
             this.refreshHeaders();
-            const sendData = {
-                columns: this.cleanColumns(this.columns),
-                filters: this.cleanFilterdColumns(),
-                no_of_records: this.paginationConfig.pageSize,
-                type: this.tableType,
-            };
             this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
-            matchingEls.forEach((el) => {
-                el.classList.remove('resizing-highlight');
-                el.classList.remove('resizing-highlight-right');
-            });
+            // 🔥 Cleanup
+            elements.forEach(el => el.classList.remove(highlightClass));
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
         };
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        window.addEventListener('mousemove', onMouseMove, { passive: true });
+        window.addEventListener('mouseup', onMouseUp, { once: true });
     }
     onResizeGroupBox(event) {
         event.preventDefault();
@@ -3797,7 +3940,7 @@ class DataGridComponent {
         this.pendingAnimationFrame = requestAnimationFrame(() => {
             const scrollingDown = scrollTop > this.lastScrollTop;
             this.lastScrollTop = scrollTop;
-            const overscan = 0;
+            const overscan = 4;
             const newStartIndex = Math.floor(scrollTop / this.rowHeight);
             // const dynamicOverscan = scrollingDown ? overscan : overscan;
             const start = Math.max(0, newStartIndex - overscan);
@@ -4560,7 +4703,7 @@ class DataGridComponent {
         this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
         const filters = this.cleanFilterdColumns();
         setTimeout(() => {
-            this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+            this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
             this.filterOptions.emit(filters);
         }, 200);
     }
@@ -4665,7 +4808,7 @@ class DataGridComponent {
         this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
         const filters = this.cleanFilterdColumns();
         setTimeout(() => {
-            this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+            this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
             this.filterOptions.emit(filters);
         }, 200);
     }
@@ -4711,8 +4854,8 @@ class DataGridComponent {
         if (!shouldUpdateConfigListing) {
             this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
         }
-        this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
-        this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+        this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
+        // this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
         setTimeout(() => {
             const filteredColumns = this.cleanFilterdColumns();
             this.genericEvent.emit(event);
@@ -4758,7 +4901,7 @@ class DataGridComponent {
             type: this.tableType,
         };
         this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
-        this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+        this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
         setTimeout(() => {
             const filteredColumns = this.cleanFilterdColumns();
             this.filterOptions.emit(filteredColumns);
@@ -4788,7 +4931,7 @@ class DataGridComponent {
             type: this.tableType,
         };
         this.createUpdateConfigListing.emit(this.createUpdateColumnConfig);
-        this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+        this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
         setTimeout(() => {
             const filteredColumns = this.cleanFilterdColumns();
             this.filterOptions.emit(filteredColumns);
@@ -5144,7 +5287,7 @@ class DataGridComponent {
             },
             eventType: 'pageChange',
         };
-        this.commonSevice.mainContainerLeft = this.centerScrollableBody.nativeElement.scrollLeft;
+        this.commonSevice.mainContainerLeft = this.centerPinnedHeader.nativeElement.scrollLeft;
         this.genericEvent.emit(event);
     }
     onPageSizeChange() {