@ngbase/adk 0.1.17 → 0.1.18

package/fesm2022/ngbase-adk-table.mjs

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, input, contentChild, TemplateRef, viewChild, ViewContainerRef, computed, effect, untracked, InjectionToken, Injector, IterableDiffers, contentChildren, signal, model, output } from '@angular/core';
+import { inject, Directive, input, contentChild, TemplateRef, viewChild, ViewContainerRef, computed, effect, untracked, InjectionToken, Injector, IterableDiffers, contentChildren, signal, DestroyRef, model, output, ElementRef, Renderer2, afterNextRender } from '@angular/core';
+import { fromEvent, auditTime } from 'rxjs';
 
 class NgbHead {
     constructor() {
         this.column = inject(NgbColumn);
         this.sticky = this.column.sticky;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbHead, isStandalone: true, selector: "[ngbHead]", host: { properties: { "attr.data-sticky": "column.sticky() || undefined" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbHead, isStandalone: true, selector: "[ngbHead]", host: { properties: { "attr.data-sticky": "column.sticky() || undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHead, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbHead]',
@@ -19,10 +20,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                 }]
         }] });
 class NgbHeadDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbHeadDef, isStandalone: true, selector: "[ngbHeadDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbHeadDef, isStandalone: true, selector: "[ngbHeadDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbHeadDef]',
@@ -33,27 +34,27 @@ class NgbColumn {
     constructor() {
         this.ngbColumn = input.required(...(ngDevMode ? [{ debugName: "ngbColumn" }] : []));
         this.sticky = input('', ...(ngDevMode ? [{ debugName: "sticky" }] : []));
-        this.cells = contentChild(NgbCellDef, ...(ngDevMode ? [{ debugName: "cells", read: TemplateRef }] : [{ read: TemplateRef }]));
-        this.heads = contentChild(NgbHeadDef, ...(ngDevMode ? [{ debugName: "heads", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.cells = contentChild(NgbCellDef, { ...(ngDevMode ? { debugName: "cells" } : {}), read: TemplateRef });
+        this.heads = contentChild(NgbHeadDef, { ...(ngDevMode ? { debugName: "heads" } : {}), read: TemplateRef });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: NgbColumn, isStandalone: true, selector: "[ngbColumn]", inputs: { ngbColumn: { classPropertyName: "ngbColumn", publicName: "ngbColumn", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cells", first: true, predicate: NgbCellDef, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "heads", first: true, predicate: NgbHeadDef, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: NgbColumn, isStandalone: true, selector: "[ngbColumn]", inputs: { ngbColumn: { classPropertyName: "ngbColumn", publicName: "ngbColumn", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cells", first: true, predicate: NgbCellDef, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "heads", first: true, predicate: NgbHeadDef, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbColumn]',
                 }]
-        }] });
+        }], propDecorators: { ngbColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbColumn", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], cells: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgbCellDef), { ...{ read: TemplateRef }, isSignal: true }] }], heads: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgbHeadDef), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 class NgbCell {
     constructor() {
         this.column = inject(NgbColumn);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbCell, isStandalone: true, selector: "[ngbCell]", host: { properties: { "class": "column.sticky() === 'start' ? 'sticky left-0 border-r z-10' : column.sticky() === 'end' ? 'sticky right-0 border-l z-10' : ''" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbCell, isStandalone: true, selector: "[ngbCell]", host: { properties: { "class": "column.sticky() === 'start' ? 'sticky left-0 border-r z-10' : column.sticky() === 'end' ? 'sticky right-0 border-l z-10' : ''" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbCell]',
@@ -63,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                 }]
         }] });
 class NgbCellDef {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbCellDef, isStandalone: true, selector: "[ngbCellDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbCellDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbCellDef, isStandalone: true, selector: "[ngbCellDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbCellDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbCellDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbCellDef]',
@@ -78,15 +79,15 @@ class NgbHeadRowDef {
         this.ngbHeadRowDef = input.required(...(ngDevMode ? [{ debugName: "ngbHeadRowDef" }] : []));
         this.ngbHeadRowDefSticky = input(...(ngDevMode ? [undefined, { debugName: "ngbHeadRowDefSticky" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbHeadRowDef, isStandalone: true, selector: "[ngbHeadRowDef]", inputs: { ngbHeadRowDef: { classPropertyName: "ngbHeadRowDef", publicName: "ngbHeadRowDef", isSignal: true, isRequired: true, transformFunction: null }, ngbHeadRowDefSticky: { classPropertyName: "ngbHeadRowDefSticky", publicName: "ngbHeadRowDefSticky", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbHeadRowDef, isStandalone: true, selector: "[ngbHeadRowDef]", inputs: { ngbHeadRowDef: { classPropertyName: "ngbHeadRowDef", publicName: "ngbHeadRowDef", isSignal: true, isRequired: true, transformFunction: null }, ngbHeadRowDefSticky: { classPropertyName: "ngbHeadRowDefSticky", publicName: "ngbHeadRowDefSticky", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadRowDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadRowDef, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbHeadRowDef]',
                 }]
-        }] });
+        }], propDecorators: { ngbHeadRowDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbHeadRowDef", required: true }] }], ngbHeadRowDefSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbHeadRowDefSticky", required: false }] }] } });
 class NgbHeadRow {
     constructor() {
         this.headDef = inject(NgbHeadRowDef);
@@ -131,10 +132,10 @@ class NgbHeadRow {
     ngOnDestroy() {
         this.container().clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: NgbHeadRow, isStandalone: true, selector: "[ngbHeadRow]", host: { properties: { "attr.data-sticky": "headDef.ngbHeadRowDefSticky() || undefined" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: NgbHeadRow, isStandalone: true, selector: "[ngbHeadRow]", host: { properties: { "attr.data-sticky": "headDef.ngbHeadRowDefSticky() || undefined" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbHeadRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbHeadRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbHeadRow]',
@@ -142,26 +143,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         '[attr.data-sticky]': 'headDef.ngbHeadRowDefSticky() || undefined',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 function aliasHeadRow(headRow) {
     return { provide: NgbHeadRow, useExisting: headRow };
 }
 
+/**
+ * Cache for storing and reusing table row views during virtual scrolling.
+ * Dramatically improves performance by avoiding view destruction/recreation.
+ */
+class ViewCache {
+    /**
+     * @param maxSize Maximum number of views to cache (default: 100)
+     */
+    constructor(maxSize = 100) {
+        this.maxSize = maxSize;
+        this.cache = new Map();
+        this.previousDataReference = null;
+    }
+    /**
+     * Get cached views for a specific trackBy ID.
+     * @param trackById The trackBy identifier
+     * @returns Array of cached views, or undefined if not found
+     */
+    get(trackById) {
+        return this.cache.get(trackById);
+    }
+    /**
+     * Store views in the cache for a specific trackBy ID.
+     * @param trackById The trackBy identifier
+     * @param views Array of views to cache
+     */
+    set(trackById, views) {
+        this.cache.set(trackById, views);
+    }
+    /**
+     * Add a single view to the cache for a specific trackBy ID.
+     * @param trackById The trackBy identifier
+     * @param view The view to add
+     * @returns true if view was cached, false if cache size limit reached
+     */
+    add(trackById, view) {
+        if (this.isFull()) {
+            return false;
+        }
+        let views = this.cache.get(trackById);
+        if (!views) {
+            views = [];
+            this.cache.set(trackById, views);
+        }
+        views.push(view);
+        return true;
+    }
+    /**
+     * Remove views from cache for a specific trackBy ID.
+     * @param trackById The trackBy identifier
+     * @param count Number of views to remove (default: all)
+     * @returns Array of removed views
+     */
+    remove(trackById, count) {
+        const views = this.cache.get(trackById);
+        if (!views) {
+            return [];
+        }
+        const removed = count !== undefined ? views.splice(0, count) : views.splice(0);
+        // Clean up empty cache entry
+        if (views.length === 0) {
+            this.cache.delete(trackById);
+        }
+        return removed;
+    }
+    /**
+     * Check if cache has reached its size limit.
+     */
+    isFull() {
+        return this.size() >= this.maxSize;
+    }
+    /**
+     * Get total number of cached views across all trackBy IDs.
+     */
+    size() {
+        return Array.from(this.cache.values()).reduce((sum, views) => sum + views.length, 0);
+    }
+    /**
+     * Clear cache when data reference changes.
+     * Destroys all cached views to prevent stale data.
+     * @param newDataReference New data array reference
+     */
+    invalidateOnDataChange(newDataReference) {
+        if (this.previousDataReference !== newDataReference) {
+            this.destroyAll();
+            this.previousDataReference = newDataReference;
+        }
+    }
+    /**
+     * Destroy all cached views and clear the cache.
+     */
+    destroyAll() {
+        this.cache.forEach(views => views.forEach(view => view.destroy()));
+        this.cache.clear();
+    }
+    /**
+     * Delete a specific cache entry without destroying views.
+     * Useful when views are being reused.
+     * @param trackById The trackBy identifier
+     */
+    delete(trackById) {
+        this.cache.delete(trackById);
+    }
+}
+
 const TABLE_ROW_DATA = new InjectionToken('TABLE_ROW_DATA');
+/**
+ * Plugin priority levels for controlling execution order.
+ * Higher priority plugins execute first.
+ */
+var PluginPriority;
+(function (PluginPriority) {
+    /** Search and filter operations (highest priority) */
+    PluginPriority[PluginPriority["FILTER"] = 100] = "FILTER";
+    /** Data transformation operations (group, aggregate, etc.) */
+    PluginPriority[PluginPriority["TRANSFORM"] = 50] = "TRANSFORM";
+    /** Sorting operations */
+    PluginPriority[PluginPriority["SORT"] = 10] = "SORT";
+    /** View operations (virtual scroll, pagination) (lowest priority) */
+    PluginPriority[PluginPriority["VIEW"] = 0] = "VIEW";
+})(PluginPriority || (PluginPriority = {}));
 class NgbTable {
     constructor() {
         this.injector = inject(Injector);
         this.differs = inject(IterableDiffers);
         this.thead = viewChild.required('thead', { read: ViewContainerRef });
         this.tbody = viewChild.required('tbody', { read: ViewContainerRef });
-        this.bodyRowDef = contentChildren(NgbBodyRowDef, ...(ngDevMode ? [{ debugName: "bodyRowDef", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.bodyRowDef = contentChildren(NgbBodyRowDef, { ...(ngDevMode ? { debugName: "bodyRowDef" } : {}), read: TemplateRef });
         this.headRowDef = contentChild.required(NgbHeadRowDef, { read: TemplateRef });
         this.columns = contentChildren(NgbColumn, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-        this.plugins = signal(new Set(), ...(ngDevMode ? [{ debugName: "plugins" }] : []));
+        this._plugins = new Map();
+        this._pluginVersion = signal(0, ...(ngDevMode ? [{ debugName: "_pluginVersion" }] : []));
+        this._pluginOrder = 0;
+        // View caching for performance
+        this._viewCache = new ViewCache(100);
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
         this.trackBy = input((_, item) => item, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
         this.pluggedData = computed(() => {
-            return Array.from(this.plugins()).reduce((acc, plugin) => plugin(acc), this.data());
+            // Trigger recomputation when plugins change
+            this._pluginVersion();
+            const originalData = this.data();
+            // Sort plugins by priority (descending) then by insertion order (ascending)
+            const sortedPlugins = Array.from(this._plugins.values()).sort((a, b) => {
+                if (b.priority !== a.priority) {
+                    return b.priority - a.priority; // Higher priority first
+                }
+                return a.order - b.order; // Earlier registration first
+            });
+            return sortedPlugins.reduce((acc, { fn }) => fn(acc, originalData), originalData);
         }, ...(ngDevMode ? [{ debugName: "pluggedData" }] : []));
         this._values = new WeakMap();
         effect(cleanup => {
@@ -176,7 +311,12 @@ class NgbTable {
             const tbody = this.tbody();
             const bodyRowDefs = this.bodyRowDef();
             const data = this.pluggedData();
-            this._dataDiffers ??= this.differs.find([]).create(this.trackBy());
+            const originalData = this.data();
+            const trackByFn = this.trackBy();
+            // Clear cache only when original data reference changes
+            // This avoids expensive validation loops on every scroll
+            this._viewCache.invalidateOnDataChange(originalData);
+            this._dataDiffers ??= this.differs.find([]).create(trackByFn);
             const changes = this._dataDiffers?.diff(data);
             if (!changes) {
                 return;
@@ -184,24 +324,56 @@ class NgbTable {
             const len = bodyRowDefs.length;
             changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
                 if (item.previousIndex == null) {
-                    const value = item.item;
-                    const data = signal(value, ...(ngDevMode ? [{ debugName: "data" }] : []));
-                    const injector = Injector.create({
-                        providers: [{ provide: TABLE_ROW_DATA, useValue: data }],
-                        parent: this.injector,
-                    });
-                    const i = currentIndex * len;
-                    for (let j = 0; j < len; j++) {
-                        const ref = tbody.createEmbeddedView(bodyRowDefs[j], { $implicit: value, _data: data }, { injector, index: i + j });
-                        this._values.set(ref, item.item);
+                    // Item entering visible range - check cache first
+                    const trackById = trackByFn(0, item.item);
+                    const reusedViews = this._viewCache.remove(trackById, len);
+                    if (reusedViews.length >= len) {
+                        // Reuse cached views
+                        const i = currentIndex * len;
+                        reusedViews.forEach((ref, j) => {
+                            // Update context with new data
+                            ref.context.$implicit = item.item;
+                            ref.context._data.set(item.item);
+                            ref.markForCheck();
+                            // Reattach to tbody at correct position
+                            tbody.insert(ref, i + j);
+                        });
+                    }
+                    else {
+                        // Create new views
+                        const value = item.item;
+                        const data = signal(value, ...(ngDevMode ? [{ debugName: "data" }] : []));
+                        const injector = Injector.create({
+                            providers: [{ provide: TABLE_ROW_DATA, useValue: data }],
+                            parent: this.injector,
+                        });
+                        const i = currentIndex * len;
+                        for (let j = 0; j < len; j++) {
+                            const ref = tbody.createEmbeddedView(bodyRowDefs[j], { $implicit: value, _data: data }, { injector, index: i + j });
+                            this._values.set(ref, item.item);
+                        }
                     }
                 }
                 else if (currentIndex == null) {
-                    for (let i = 0; i < len; i++) {
-                        const ref = tbody.get(adjustedPreviousIndex * len);
-                        ref?.destroy();
+                    // Item leaving visible range - cache instead of destroy
+                    const trackById = trackByFn(0, item.item);
+                    if (!this._viewCache.isFull()) {
+                        // Cache the views (detach without destroying)
+                        for (let i = 0; i < len; i++) {
+                            const viewIndex = adjustedPreviousIndex * len;
+                            const ref = tbody.detach(viewIndex);
+                            if (ref) {
+                                this._viewCache.add(trackById, ref);
+                            }
+                        }
+                    }
+                    else {
+                        // Cache full - destroy views
+                        for (let i = 0; i < len; i++) {
+                            const ref = tbody.get(adjustedPreviousIndex * len);
+                            ref?.destroy();
+                        }
                     }
-                    // tbody.remove(adjustedPreviousIndex!);
                 }
                 else {
                     // based on current and previous index we need to check whether we need to do 1 or -1
@@ -235,15 +407,41 @@ class NgbTable {
             context.index = renderIndex;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbTable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: NgbTable, isStandalone: true, selector: "table[ngbTable]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "bodyRowDef", predicate: NgbBodyRowDef, read: TemplateRef, isSignal: true }, { propertyName: "headRowDef", first: true, predicate: NgbHeadRowDef, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columns", predicate: NgbColumn, isSignal: true }], viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
+    /**
+     * Register a plugin to transform table data.
+     * Plugins receive both the current data and the original data.
+     * @param plugin Function that transforms data
+     * @param priority Plugin priority (higher values execute first). Use PluginPriority enum values.
+     * @returns Symbol key to unregister the plugin later
+     */
+    registerPlugin(plugin, priority = PluginPriority.VIEW) {
+        const key = Symbol('plugin');
+        this._plugins.set(key, {
+            fn: plugin,
+            priority,
+            order: this._pluginOrder++,
+        });
+        this._pluginVersion.update(v => v + 1);
+        return key;
+    }
+    /**
+     * Unregister a previously registered plugin.
+     * @param key Symbol returned from registerPlugin
+     */
+    unregisterPlugin(key) {
+        if (this._plugins.delete(key)) {
+            this._pluginVersion.update(v => v - 1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbTable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: NgbTable, isStandalone: true, selector: "table[ngbTable]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "bodyRowDef", predicate: NgbBodyRowDef, read: TemplateRef, isSignal: true }, { propertyName: "headRowDef", first: true, predicate: NgbHeadRowDef, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columns", predicate: NgbColumn, isSignal: true }], viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbTable, decorators: [{
             type: Directive,
             args: [{
                     selector: 'table[ngbTable]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thead: [{ type: i0.ViewChild, args: ['thead', { ...{ read: ViewContainerRef }, isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { ...{ read: ViewContainerRef }, isSignal: true }] }], bodyRowDef: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgbBodyRowDef), { ...{ read: TemplateRef }, isSignal: true }] }], headRowDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgbHeadRowDef), { ...{ read: TemplateRef }, isSignal: true }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgbColumn), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }] } });
 function aliasTable(table) {
     return { provide: NgbTable, useExisting: table };
 }
@@ -258,13 +456,13 @@ class NgbBodyRowDef {
     constructor() {
         this.ngbBodyRowDefColumns = input.required(...(ngDevMode ? [{ debugName: "ngbBodyRowDefColumns" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbBodyRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbBodyRowDef, isStandalone: true, selector: "[ngbBodyRowDef]", inputs: { ngbBodyRowDefColumns: { classPropertyName: "ngbBodyRowDefColumns", publicName: "ngbBodyRowDefColumns", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbBodyRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbBodyRowDef, isStandalone: true, selector: "[ngbBodyRowDef]", inputs: { ngbBodyRowDefColumns: { classPropertyName: "ngbBodyRowDefColumns", publicName: "ngbBodyRowDefColumns", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbBodyRowDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbBodyRowDef, decorators: [{
             type: Directive,
             args: [{ selector: '[ngbBodyRowDef]' }]
-        }] });
+        }], propDecorators: { ngbBodyRowDefColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbBodyRowDefColumns", required: true }] }] } });
 class NgbBodyRow {
     constructor() {
         this.rowData = inject(TABLE_ROW_DATA);
@@ -282,13 +480,14 @@ class NgbBodyRow {
                 return indexA - indexB;
             });
         }, ...(ngDevMode ? [{ debugName: "sortedColumns" }] : []));
+        // Effect 1: Manage column creation/movement/removal (runs when columns change)
         effect(() => {
-            const data = this.rowData();
             const columns = this.sortedColumns();
             const cols = this.rowDef.ngbBodyRowDefColumns();
             columns.forEach(row => {
                 const index = cols.indexOf(row.ngbColumn());
                 if (index === -1) {
+                    // Remove column view
                     const ref = this.ref.get(row);
                     if (ref) {
                         ref.destroy();
@@ -298,33 +497,42 @@ class NgbBodyRow {
                 }
                 let ref = this.ref.get(row);
                 if (ref) {
-                    // move the row to the new index
+                    // Move existing column to new index
                     this.container().move(ref, index);
-                    ref.context.$implicit = data;
-                    ref.markForCheck();
                     return;
                 }
+                // Create new column view with current data
                 ref = untracked(() => {
-                    // maintain the order of the columns
+                    const data = this.rowData();
                     return this.container().createEmbeddedView(row.cells(), { $implicit: data }, { index });
                 });
                 this.ref.set(row, ref);
             });
         });
+        // Effect 2: Update data in all existing column views (runs when data changes)
+        // This is lightweight and only updates the $implicit reference without touching DOM
+        effect(() => {
+            const data = this.rowData();
+            // Update $implicit for all existing column views
+            this.ref.forEach(ref => {
+                ref.context.$implicit = data;
+                ref.markForCheck();
+            });
+        });
     }
     ngOnDestroy() {
         this.container().clear();
         this.ref.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbBodyRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.2.0", type: NgbBodyRow, isStandalone: true, selector: "[ngbBodyRow]", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbBodyRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: NgbBodyRow, isStandalone: true, selector: "[ngbBodyRow]", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbBodyRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbBodyRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbBodyRow]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 function aliasBodyRow(row) {
     return { provide: NgbBodyRow, useExisting: row };
 }
@@ -332,6 +540,7 @@ function aliasBodyRow(row) {
 class NgbSort {
     constructor() {
         this.table = inject(NgbTable);
+        this.destroyRef = inject(DestroyRef);
         this.sortFn = input(...(ngDevMode ? [undefined, { debugName: "sortFn" }] : []));
         this.disableClear = input(false, ...(ngDevMode ? [{ debugName: "disableClear" }] : []));
         this.sortColumn = model('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
@@ -352,19 +561,21 @@ class NgbSort {
                 return direction === 'asc' ? comparison : -comparison;
             });
         };
-        effect(cleanup => {
-            if (this.sortMode() === 'client') {
-                const sortFn = untracked(() => this.sortFn() || this.defaultSortFn);
-                const fn = (data) => {
-                    const direction = this.sortDirection();
-                    const column = this.sortColumn();
-                    return direction && column ? sortFn(data, column, direction) : data;
-                };
-                this.table.plugins.update(plugins => new Set([...plugins, fn]));
-                cleanup(() => {
-                    this.table.plugins.update(plugins => new Set([...plugins].filter(plugin => plugin !== fn)));
-                });
+        const sortFn = untracked(() => this.sortFn() || this.defaultSortFn);
+        // Register plugin once with SORT priority - it will reactively read signals when executed
+        this.pluginKey = this.table.registerPlugin(data => {
+            // Only sort in client mode
+            if (this.sortMode() !== 'client') {
+                return data;
             }
+            // Read sort signals reactively
+            const direction = this.sortDirection();
+            const column = this.sortColumn();
+            return direction && column ? sortFn(data, column, direction) : data;
+        }, PluginPriority.SORT);
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.table.unregisterPlugin(this.pluginKey);
         });
     }
     sort(column, direction) {
@@ -407,16 +618,16 @@ class NgbSort {
             direction: newDirection,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSort, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbSort, isStandalone: true, selector: "[ngbSort]", inputs: { sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, disableClear: { classPropertyName: "disableClear", publicName: "disableClear", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", sortChange: "sortChange" }, exportAs: ["ngbSort"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSort, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbSort, isStandalone: true, selector: "[ngbSort]", inputs: { sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, disableClear: { classPropertyName: "disableClear", publicName: "disableClear", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", sortChange: "sortChange" }, exportAs: ["ngbSort"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSort, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSort]',
                     exportAs: 'ngbSort',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClear", required: false }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
 class NgbSortHeader {
     constructor() {
         this.sort = inject(NgbSort);
@@ -434,10 +645,10 @@ class NgbSortHeader {
     toggle() {
         this.sort.sort(this.column.ngbColumn(), this.sortDirection() === 'asc' ? 'desc' : this.sortDirection() === 'desc' ? '' : 'asc');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbSortHeader, isStandalone: true, selector: "[ngbSortHeader]", inputs: { disableClear: { classPropertyName: "disableClear", publicName: "disableClear", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-sort": "sortDirection()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbSortHeader, isStandalone: true, selector: "[ngbSortHeader]", inputs: { disableClear: { classPropertyName: "disableClear", publicName: "disableClear", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-sort": "sortDirection()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbSortHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbSortHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbSortHeader]',
@@ -445,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         '[attr.aria-sort]': 'sortDirection()',
                     },
                 }]
-        }] });
+        }], propDecorators: { disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClear", required: false }] }] } });
 function aliasSort(directive) {
     return { provide: NgbSort, useExisting: directive };
 }
@@ -453,9 +664,296 @@ function aliasSortHeader(directive) {
     return { provide: NgbSortHeader, useExisting: directive };
 }
 
+/**
+ * Virtual scroll directive for tables that only renders visible rows.
+ * Dramatically improves performance for large datasets by rendering only
+ * rows that are visible in the viewport plus a small buffer.
+ *
+ * @example
+ * ```html
+ * <div class="h-[600px] overflow-auto">
+ *   <table
+ *     ngbTable
+ *     [data]="largeDataset"
+ *     ngbVirtualScroll="50">
+ *     <!-- table definition -->
+ *   </table>
+ * </div>
+ * ```
+ */
+class NgbTableVirtualScroll {
+    // ====== CONSTRUCTOR & INITIALIZATION ======
+    constructor() {
+        // ====== INPUTS ======
+        /**
+         * Height of each row in pixels (required).
+         * Must be consistent across all rows for proper virtual scrolling.
+         */
+        this.rowHeight = input.required({ ...(ngDevMode ? { debugName: "rowHeight" } : {}), alias: 'ngbVirtualScroll',
+            transform: (value) => Math.max(1, value) });
+        /**
+         * Number of extra rows to render beyond the visible viewport.
+         * Higher values provide smoother scrolling but render more rows.
+         * @default 5
+         */
+        this.bufferSize = input(5, { ...(ngDevMode ? { debugName: "bufferSize" } : {}), transform: (value) => Math.max(0, value) });
+        /**
+         * Optional custom scroll container element.
+         * If not provided, will find or create a scroll container.
+         */
+        this.scrollContainer = input(null, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+        // ====== DEPENDENCIES ======
+        this.table = inject(NgbTable);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        // ====== STATE SIGNALS ======
+        this.scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : []));
+        this.viewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : []));
+        this.totalDataLength = signal(0, ...(ngDevMode ? [{ debugName: "totalDataLength" }] : []));
+        this.scrollContainerElement = signal(null, ...(ngDevMode ? [{ debugName: "scrollContainerElement" }] : []));
+        this.isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
+        // DOM element references (set during initialization)
+        this.topSpacerRef = null;
+        this.bottomSpacerRef = null;
+        // ====== COMPUTED VALUES ======
+        /**
+         * Calculates the range of visible row indices based on scroll position and viewport size.
+         */
+        this.visibleRange = computed(() => {
+            const scroll = this.scrollTop();
+            const viewport = this.viewportHeight();
+            const rowHeight = this.rowHeight();
+            const buffer = this.bufferSize();
+            const totalLength = this.totalDataLength();
+            if (totalLength === 0 || rowHeight === 0) {
+                return { start: 0, end: 0, visibleStart: 0, visibleEnd: 0 };
+            }
+            // Calculate indices
+            const startIndex = Math.floor(scroll / rowHeight);
+            const visibleCount = Math.ceil(viewport / rowHeight);
+            // Apply buffer
+            const bufferedStart = Math.max(0, startIndex - buffer);
+            const bufferedEnd = Math.min(totalLength, startIndex + visibleCount + buffer);
+            return {
+                start: bufferedStart,
+                end: bufferedEnd,
+                visibleStart: startIndex,
+                visibleEnd: Math.min(totalLength, startIndex + visibleCount),
+            };
+        }, ...(ngDevMode ? [{ debugName: "visibleRange" }] : []));
+        /**
+         * Total height of all data items (for scrollbar sizing).
+         */
+        this.totalHeight = computed(() => {
+            return this.totalDataLength() * this.rowHeight();
+        }, ...(ngDevMode ? [{ debugName: "totalHeight" }] : []));
+        /**
+         * Vertical offset for virtual positioning.
+         */
+        this.offsetY = computed(() => {
+            const { start } = this.visibleRange();
+            return start * this.rowHeight();
+        }, ...(ngDevMode ? [{ debugName: "offsetY" }] : []));
+        /**
+         * Get the currently visible row index range.
+         * @returns Object with start and end indices of visible rows
+         */
+        this.getVisibleRange = computed(() => {
+            const { visibleStart, visibleEnd } = this.visibleRange();
+            return { start: visibleStart, end: visibleEnd };
+        }, ...(ngDevMode ? [{ debugName: "getVisibleRange" }] : []));
+        // Register plugin once with VIEW priority (lowest) - it will reactively read signals when executed
+        this.pluginKey = this.table.registerPlugin((data, originalData) => {
+            // Store total length for scrollbar calculation (untracked to avoid circular dependency)
+            untracked(() => this.totalDataLength.set(originalData.length));
+            // Get visible range (reactive - reads signals)
+            const { start, end } = this.visibleRange();
+            // Slice data to visible portion
+            return data.slice(start, end);
+        }, PluginPriority.VIEW);
+        // Wait for next render to ensure DOM is ready
+        afterNextRender(() => {
+            this.initializeVirtualScroll();
+        });
+        // Setup spacer updates
+        this.setupSpacerUpdates();
+        // Setup scroll tracking (only after initialization)
+        this.setupScrollTracking();
+        // Setup resize tracking (only after initialization)
+        this.setupResizeTracking();
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.table.unregisterPlugin(this.pluginKey);
+        });
+    }
+    // ====== INITIALIZATION ======
+    initializeVirtualScroll() {
+        const table = this.elementRef.nativeElement;
+        // Find or create scroll container
+        const container = this.scrollContainer() || this.findOrCreateScrollContainer(table);
+        this.scrollContainerElement.set(container);
+        // Setup DOM structure
+        // this.setupTableStructure(table);
+        // Create spacers
+        this.createSpacers(table);
+        // Mark as initialized
+        this.isInitialized.set(true);
+        // Set initial viewport height
+        if (container) {
+            this.viewportHeight.set(container.clientHeight);
+        }
+    }
+    // ====== DOM STRUCTURE SETUP ======
+    findOrCreateScrollContainer(table) {
+        // Try to find parent with overflow
+        let parent = table.parentElement;
+        while (parent) {
+            const style = window.getComputedStyle(parent);
+            const overflow = style.overflow || style.overflowY;
+            if (overflow === 'auto' || overflow === 'scroll') {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        // If no scroll container found, wrap in one
+        const container = this.renderer.createElement('div');
+        this.renderer.setStyle(container, 'overflow', 'auto');
+        this.renderer.setStyle(container, 'position', 'relative');
+        this.renderer.setStyle(container, 'height', '100%');
+        const currentParent = table.parentElement;
+        if (currentParent) {
+            this.renderer.insertBefore(currentParent, container, table);
+            this.renderer.removeChild(currentParent, table);
+            this.renderer.appendChild(container, table);
+        }
+        return container;
+    }
+    // private setupTableStructure(table: HTMLElement) {
+    // Ensure tbody and thead display correctly for virtual scrolling
+    // const tbody = table.querySelector('tbody');
+    // if (tbody) {
+    //   this.renderer.setStyle(tbody, 'display', 'block');
+    // }
+    // const thead = table.querySelector('thead');
+    // if (thead) {
+    //   this.renderer.setStyle(thead, 'display', 'block');
+    //   this.renderer.setStyle(thead, 'position', 'sticky');
+    //   this.renderer.setStyle(thead, 'top', '0');
+    //   this.renderer.setStyle(thead, 'z-index', '10');
+    //   this.renderer.setStyle(thead, 'background', 'inherit');
+    // }
+    // }
+    createSpacers(table) {
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return;
+        // Top spacer - creates space for rows scrolled past
+        this.topSpacerRef = this.renderer.createElement('tr');
+        this.renderer.setStyle(this.topSpacerRef, 'height', '0px');
+        // this.renderer.setStyle(this.topSpacerRef, 'display', 'block');
+        this.renderer.insertBefore(tbody, this.topSpacerRef, tbody.firstChild);
+        // Bottom spacer - creates scrollable space for rows below viewport
+        this.bottomSpacerRef = this.renderer.createElement('tr');
+        this.renderer.setStyle(this.bottomSpacerRef, 'height', '0px');
+        // this.renderer.setStyle(this.bottomSpacerRef, 'display', 'block');
+        this.renderer.appendChild(tbody, this.bottomSpacerRef);
+    }
+    // ====== SPACER UPDATES ======
+    setupSpacerUpdates() {
+        effect(() => {
+            if (!this.isInitialized())
+                return;
+            const { start } = this.visibleRange();
+            const totalLength = this.totalDataLength();
+            const { end } = this.visibleRange();
+            const rowHeight = this.rowHeight();
+            if (!this.topSpacerRef || !this.bottomSpacerRef)
+                return;
+            // Top spacer height = rows scrolled past
+            const topHeight = start * rowHeight;
+            this.renderer.setStyle(this.topSpacerRef, 'height', `${topHeight}px`);
+            // Bottom spacer height = rows below viewport
+            const remainingRows = Math.max(0, totalLength - end);
+            const bottomHeight = remainingRows * rowHeight;
+            this.renderer.setStyle(this.bottomSpacerRef, 'height', `${bottomHeight}px`);
+        });
+    }
+    // ====== SCROLL TRACKING ======
+    setupScrollTracking() {
+        effect(onCleanup => {
+            const container = this.scrollContainerElement();
+            if (!container || !this.isInitialized())
+                return;
+            // Create scroll observable and convert to signal
+            const scroll$ = fromEvent(container, 'scroll').pipe(auditTime(0));
+            const subscription = scroll$.subscribe(() => {
+                this.scrollTop.set(container.scrollTop);
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    // ====== RESIZE TRACKING ======
+    setupResizeTracking() {
+        effect(onCleanup => {
+            const container = this.scrollContainerElement();
+            if (!container || !this.isInitialized())
+                return;
+            const resizeObserver = new ResizeObserver(entries => {
+                const entry = entries[0];
+                if (entry) {
+                    this.viewportHeight.set(entry.contentRect.height);
+                }
+            });
+            resizeObserver.observe(container);
+            onCleanup(() => resizeObserver.disconnect());
+        });
+    }
+    // ====== PUBLIC API ======
+    /**
+     * Scroll to a specific row index.
+     * @param index The row index to scroll to
+     * @param behavior Scroll behavior ('auto' | 'smooth')
+     */
+    scrollToIndex(index, behavior = 'smooth') {
+        const container = this.scrollContainerElement();
+        if (!container)
+            return;
+        const targetScrollTop = index * this.rowHeight();
+        container.scrollTo({
+            top: targetScrollTop,
+            behavior,
+        });
+    }
+    /**
+     * Get the total number of rows in the dataset.
+     */
+    getTotalRows() {
+        return this.totalDataLength();
+    }
+    /**
+     * Get the current scroll position.
+     */
+    getScrollTop() {
+        return this.scrollTop();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbTableVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbTableVirtualScroll, isStandalone: true, selector: "table[ngbTable][ngbVirtualScroll]", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "ngbVirtualScroll", isSignal: true, isRequired: true, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, scrollContainer: { classPropertyName: "scrollContainer", publicName: "scrollContainer", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.table-layout": "\"fixed\"", "style.width": "\"100%\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbTableVirtualScroll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[ngbTable][ngbVirtualScroll]',
+                    host: {
+                        '[style.table-layout]': '"fixed"',
+                        '[style.width]': '"100%"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbVirtualScroll", required: true }] }], bufferSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferSize", required: false }] }], scrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainer", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgbBodyRow, NgbBodyRowDef, NgbCell, NgbCellDef, NgbColumn, NgbHead, NgbHeadDef, NgbHeadRow, NgbHeadRowDef, NgbSort, NgbSortHeader, NgbTable, aliasBodyRow, aliasHeadRow, aliasSort, aliasSortHeader, aliasTable };
+export { NgbBodyRow, NgbBodyRowDef, NgbCell, NgbCellDef, NgbColumn, NgbHead, NgbHeadDef, NgbHeadRow, NgbHeadRowDef, NgbSort, NgbSortHeader, NgbTable, NgbTableVirtualScroll, PluginPriority, aliasBodyRow, aliasHeadRow, aliasSort, aliasSortHeader, aliasTable };
 //# sourceMappingURL=ngbase-adk-table.mjs.map