@shival99/z-ui 2.0.78 → 2.0.80

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -6701,6 +6701,26 @@ class ZTableComponent {
         },
     ];
     _bulkBarExitDuration = 140;
+    /** Stable identity key per virtual index (row/group id, not array index) so cached measured
+     *  heights follow row identity — prevents height jitter when scrolling fast. */
+    _virtualItemKeys = computed(() => {
+        if (!this.isVirtual()) {
+            return [];
+        }
+        const flatItems = this.virtualGroupedFlatItems();
+        if (flatItems.length > 0) {
+            return flatItems.map((item, index) => item.type === 'group-header' ? `g:${item.groupItem.id}` : `r:${item.rows[0]?.id ?? index}`);
+        }
+        const groupRows = this.dynamicGroupRows();
+        if (groupRows.length > 0) {
+            return groupRows.map((rows, index) => `r:${rows[0]?.id ?? index}`);
+        }
+        return Array.from({ length: this._virtualGroupCount() }, (_, index) => index);
+    }, ...(ngDevMode ? [{ debugName: "_virtualItemKeys" }] : []));
+    /** Estimate height learned from real rendered rows (dynamicSize); `virtual.size` is the fallback
+     *  until a row is measured. Lets not-yet-measured rows estimate close to reality, reducing layout
+     *  shift. Plain field (non-reactive) so updating it won't rebuild the virtualizer. */
+    _dynamicEstimateHeight = null;
     /** Virtualizer instance — operates on groups rather than individual rows */
     virtualizer = injectVirtualizer(() => {
         const groups = this.dynamicGroups();
@@ -6710,23 +6730,30 @@ class ZTableComponent {
         const virtualConfig = this._virtualConfig();
         const flatItems = this.virtualGroupedFlatItems();
         const isGrouping = flatItems.length > 0;
+        const itemKeys = this._virtualItemKeys();
+        const isDynamic = this.dynamicSize();
+        // Estimate for not-yet-measured rows: learned height if available, else virtual.size.
+        const dynamicRowEstimate = isDynamic && this._dynamicEstimateHeight !== null ? this._dynamicEstimateHeight : rowHeight;
         return {
             scrollElement,
             count: isGrouping ? flatItems.length : groups.length > 0 ? groups.length : this._virtualGroupCount(),
+            // Stable per-row key so cached measured heights follow row identity, not the recycled
+            // index slot — prevents the height jitter when scrolling fast (see _virtualItemKeys).
+            getItemKey: (index) => itemKeys[index] ?? index,
             estimateSize: (index) => {
                 if (isGrouping) {
                     return flatItems[index]?.type === 'group-header'
                         ? Math.max(rowHeight, Z_VIRTUAL_GROUP_HEADER_HEIGHT)
-                        : rowHeight;
+                        : dynamicRowEstimate;
                 }
                 if (groups.length > 0 && groups[index]) {
                     const groupHeight = groups[index].height;
                     if (groupHeight !== null) {
                         return groupHeight;
                     }
-                    return groups[index].rowCount * rowHeight;
+                    return groups[index].rowCount * dynamicRowEstimate;
                 }
-                return groupSize * rowHeight;
+                return groupSize * dynamicRowEstimate;
             },
             scrollToFn: (offset, options, instance) => {
                 instance.scrollOffset = offset;
@@ -6755,14 +6782,45 @@ class ZTableComponent {
         if (!view) {
             return;
         }
-        // Gom phép đo vào frame kế tiếp để tránh cập nhật vị trí nhiều lần trong cùng một frame scroll.
+        // Only sample heights until the estimate is locked; afterwards just measure (no extra reads).
+        const needsEstimate = this._dynamicEstimateHeight === null;
+        // Batch measurements into the next frame to avoid repositioning multiple times per scroll frame.
         const frameId = view.requestAnimationFrame(() => {
+            let measuredSum = 0;
+            let measuredCount = 0;
             for (const el of elements) {
-                this.virtualizer.measureElement(el.nativeElement);
+                const node = el.nativeElement;
+                this.virtualizer.measureElement(node);
+                if (needsEstimate) {
+                    // Layout already flushed by measureElement above, so this read hits the cache (no reflow).
+                    const { height } = node.getBoundingClientRect();
+                    if (height > 0) {
+                        measuredSum += height;
+                        measuredCount++;
+                    }
+                }
+            }
+            if (needsEstimate) {
+                this._learnDynamicEstimate(measuredSum, measuredCount);
             }
         });
         onCleanup(() => view.cancelAnimationFrame(frameId));
     }, ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : []));
+    /** Learn estimate height from rendered rows. Locks ONCE so the estimate doesn't jump every scroll
+     *  frame (each row is still measured exactly on render). Re-flows via virtualizer.measure(). */
+    _learnDynamicEstimate(measuredSum, measuredCount) {
+        if (this._dynamicEstimateHeight !== null || measuredCount === 0) {
+            return;
+        }
+        const average = Math.round(measuredSum / measuredCount);
+        // Skip re-flow when already equal to the default size.
+        if (average <= 0 || average === this.virtualRowHeight()) {
+            this._dynamicEstimateHeight = average > 0 ? average : null;
+            return;
+        }
+        this._dynamicEstimateHeight = average;
+        this.virtualizer.measure();
+    }
     _rowDragAutoScroll = effect(onCleanup => {
         const scrollbar = this.tbodyScrollbar();
         if (!scrollbar?.adapter.initialized()) {
@@ -7018,6 +7076,8 @@ class ZTableComponent {
             }
         });
         explicitEffect([this.columnFilters, this.globalFilter, this.pagination, this.sorting, this._data], () => {
+            // New dataset may have different row heights -> relearn the estimate.
+            this._dynamicEstimateHeight = null;
             queueMicrotask(() => {
                 this._checkVerticalScroll();
                 this._checkHorizontalScroll();