@acorex/components 22.1.0-next.16 → 22.1.0-next.18

package/fesm2022/acorex-components-lookup.mjs

@@ -575,32 +575,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
- * Internal mini component for the `multi-column` lookup mode:
- * renders selectable rows in an `ax-data-table` grid and loads further
- * pages as the user scrolls (no pager UI).
+ * Internal mini component for the `multi-column-tree` lookup mode:
+ * a multi-column `ax-data-table` with a drop-down tree inside it.
+ * Rows expand/collapse via the data-table hierarchy (`parentField` / nested `children`).
  *
  * @category Components
  */
-class AXLookupMultiColumnComponent {
-    /** Accumulated rows fed to the table (grows as pages are scrolled in). */
-    #loadedItems;
-    /** Total matching rows from the source (used to size the popup). */
-    #totalCount;
-    #host;
+class AXLookupMultiColumnTreeComponent {
     constructor() {
         /**
-         * The datasource providing the grid rows (paged, remote-capable).
-         * Pages are fetched on demand as the user scrolls the table body.
+         * The datasource providing hierarchical rows (roots on load, children via `parentField`).
          */
         this.dataSource = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
         /**
-         * The item property used as the selection value.
+         * The item property used as the selection value (also the data-table row key).
          */
         this.valueField = input('id', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
         /**
-         * The item property used as the display text.
+         * The item property used as the display text. The matching column shows the expand control
+         * unless another column sets `expandHandler`.
          */
         this.textField = input('text', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
@@ -609,6 +604,16 @@ class AXLookupMultiColumnComponent {
          */
         this.disabledField = input('disabled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
+        /**
+         * Field used by the data table to fetch children (`AXDataSource` filter on expand).
+         */
+        this.parentField = input('parentId', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentField" }] : /* istanbul ignore next */ []));
+        /**
+         * Field used by the data table to decide whether a row can expand.
+         */
+        this.hasChildrenField = input('hasChild', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildrenField" }] : /* istanbul ignore next */ []));
         /**
          * Currently selected values (always an array, even for single selection).
          */
@@ -651,40 +656,13 @@ class AXLookupMultiColumnComponent {
         this.alternate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
-         * Emitted when the user picks a row.
+         * Emitted when the user picks a row (not when expanding/collapsing).
          */
         this.itemClick = output();
-        this.tableRef = viewChild(AXDataTableComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
-        /** Accumulated rows fed to the table (grows as pages are scrolled in). */
-        this.#loadedItems = [];
-        /** Total matching rows from the source (used to size the popup). */
-        this.#totalCount = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#totalCount" }] : /* istanbul ignore next */ []));
         /**
-         * Local table source: one page of whatever has been scrolled in so far.
-         * Kept as a stable instance so the table host is not recreated on each page load.
-         * `pageSize` grows with `#loadedItems` — never seed with a huge empty array (data-table
-         * initializes `displayedRows` as `new Array(pageSize)`, which caused NG0955-level jank).
-         */
-        this.tableDataSource = new AXDataSource({
-            pageSize: 1,
-            key: 'id',
-            load: async () => ({
-                items: this.#loadedItems,
-                total: this.#loadedItems.length,
-            }),
-        });
-        /**
-         * Header (~40px) + body rows. Grows with results up to `maxVisibleItems`,
-         * then the table body scrolls for the rest.
+         * Header (~40px) + up to `maxVisibleItems` body rows. Expanded children scroll inside.
          */
-        this.tableHeight = computed(() => {
-            const header = 40;
-            const total = this.#totalCount();
-            const rows = total > 0 ? total : Math.min(3, this.maxVisibleItems());
-            return header + Math.min(rows, this.maxVisibleItems()) * this.itemHeight();
-        }, /* @ts-ignore */
+        this.tableHeight = computed(() => 40 + this.maxVisibleItems() * this.itemHeight(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableHeight" }] : /* istanbul ignore next */ []));
         this.loadingConfig = computed(() => ({
             enabled: true,
@@ -692,7 +670,6 @@ class AXLookupMultiColumnComponent {
             loadingTemplate: this.loadingTemplate(),
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loadingConfig" }] : /* istanbul ignore next */ []));
-        this.#host = inject((ElementRef));
         this.resolveRowCssClass = (row) => {
             const item = row;
             if (!item) {
@@ -707,44 +684,6 @@ class AXLookupMultiColumnComponent {
             }
             return classes.join(' ');
         };
-        effect((onCleanup) => {
-            const source = this.dataSource();
-            this.tableDataSource.config.key = source.config.key || this.valueField();
-            untracked(() => {
-                this.#applyLoadedItems(source.cachedItems, source.totalCount);
-            });
-            const changedSub = source.onChanged.subscribe((event) => {
-                this.#applyLoadedItems(event.cachedItems, event.totalCount);
-            });
-            // Fetch page 0 only when the source has never loaded. Reopen remounts this
-            // view; setPage(0) is a no-op on a warm source and must not force a new API call.
-            queueMicrotask(() => {
-                if (!source.cachedItems.some((item) => item != null)) {
-                    source.setPage(0);
-                }
-            });
-            onCleanup(() => changedSub.unsubscribe());
-        });
-        effect((onCleanup) => {
-            // Rebind when the table instance appears / source changes.
-            this.tableRef();
-            this.dataSource();
-            let scrollSub;
-            const timer = setTimeout(() => {
-                const wrapper = this.tableRef()?.getHostElement()?.querySelector('.ax-data-table-wrapper') ??
-                    this.#host.nativeElement.querySelector('.ax-data-table-wrapper');
-                if (!wrapper) {
-                    return;
-                }
-                scrollSub = fromEvent(wrapper, 'scroll')
-                    .pipe(auditTime(80))
-                    .subscribe(() => this.#tryLoadMore(wrapper));
-            }, 0);
-            onCleanup(() => {
-                clearTimeout(timer);
-                scrollSub?.unsubscribe();
-            });
-        });
     }
     /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
     trackColumnKey(index, column) {
@@ -757,14 +696,15 @@ class AXLookupMultiColumnComponent {
         }
         return width;
     }
-    #applyLoadedItems(cachedItems, totalCount) {
-        this.#loadedItems = cachedItems.filter((item) => item != null);
-        this.#totalCount.set(totalCount);
-        this.#syncTablePageSize();
-        this.tableDataSource.refresh({ reset: true });
-    }
-    #syncTablePageSize() {
-        this.tableDataSource.config.pageSize = Math.max(this.#loadedItems.length, 1);
+    isExpandColumn(index, column) {
+        if (column.expandHandler === true) {
+            return true;
+        }
+        if (this.columns().some((item) => item.expandHandler === true)) {
+            return false;
+        }
+        const textIndex = this.columns().findIndex((item) => item.field === this.textField());
+        return (textIndex === -1 ? 0 : textIndex) === index;
     }
     handleRowClick(event) {
         this.handleItemClick(event.data);
@@ -787,31 +727,17 @@ class AXLookupMultiColumnComponent {
     isDisabled(item) {
         return Boolean(item?.[this.disabledField()]);
     }
-    #tryLoadMore(wrapper) {
-        const nearBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 48;
-        if (!nearBottom) {
-            return;
-        }
-        const source = this.dataSource();
-        if (source.isLoading || source.totalCount === 0) {
-            return;
-        }
-        const loadedCount = source.cachedItems.filter((item) => item != null).length;
-        if (loadedCount >= source.totalCount) {
-            return;
-        }
-        const nextPage = Math.floor(loadedCount / source.pageSize);
-        source.setPage(nextPage);
-    }
     getValue(item) {
         return item?.[this.valueField()];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnComponent, isStandalone: true, selector: "ax-lookup-multi-column", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnTreeComponent, isStandalone: true, selector: "ax-lookup-multi-column-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, parentField: { classPropertyName: "parentField", publicName: "parentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column ax-lookup-multi-column-tree" }, ngImport: i0, template: `
     <ax-data-table
       class="ax-lookup-multi-column-table"
       look="minimal"
-      [dataSource]="tableDataSource"
+      [dataSource]="dataSource()"
+      [parentField]="parentField()"
+      [hasChildrenField]="hasChildrenField()"
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
@@ -830,6 +756,7 @@ class AXLookupMultiColumnComponent {
           [dataField]="column.field"
           [caption]="column.title"
           [width]="resolveColumnWidth(column)"
+          [expandHandler]="isExpandColumn($index, column)"
           [allowSorting]="false"
           [allowResizing]="false"
         />
@@ -856,22 +783,24 @@ class AXLookupMultiColumnComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-lookup-multi-column',
+                    selector: 'ax-lookup-multi-column-tree',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
                     host: {
-                        class: 'ax-lookup-multi-column',
+                        class: 'ax-lookup-multi-column ax-lookup-multi-column-tree',
                         '[style.height.px]': 'tableHeight()',
                     },
                     template: `
     <ax-data-table
       class="ax-lookup-multi-column-table"
       look="minimal"
-      [dataSource]="tableDataSource"
+      [dataSource]="dataSource()"
+      [parentField]="parentField()"
+      [hasChildrenField]="hasChildrenField()"
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
@@ -890,6 +819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [dataField]="column.field"
           [caption]="column.title"
           [width]="resolveColumnWidth(column)"
+          [expandHandler]="isExpandColumn($index, column)"
           [allowSorting]="false"
           [allowResizing]="false"
         />
@@ -916,30 +846,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
- * Internal mini component for the `multi-column-tree` lookup mode:
- * a multi-column `ax-data-table` with a drop-down tree inside it.
- * Rows expand/collapse via the data-table hierarchy (`parentField` / nested `children`).
+ * Internal mini component for the `multi-column` lookup mode:
+ * renders selectable rows in an `ax-data-table` grid and loads further
+ * pages as the user scrolls (no pager UI).
  *
  * @category Components
  */
-class AXLookupMultiColumnTreeComponent {
+class AXLookupMultiColumnComponent {
+    /** Accumulated rows fed to the table (grows as pages are scrolled in). */
+    #loadedItems;
+    /** Total matching rows from the source (used to size the popup). */
+    #totalCount;
+    #host;
     constructor() {
         /**
-         * The datasource providing hierarchical rows (roots on load, children via `parentField`).
+         * The datasource providing the grid rows (paged, remote-capable).
+         * Pages are fetched on demand as the user scrolls the table body.
          */
         this.dataSource = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
         /**
-         * The item property used as the selection value (also the data-table row key).
+         * The item property used as the selection value.
          */
         this.valueField = input('id', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
         /**
-         * The item property used as the display text. The matching column shows the expand control
-         * unless another column sets `expandHandler`.
+         * The item property used as the display text.
          */
         this.textField = input('text', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
@@ -948,16 +883,6 @@ class AXLookupMultiColumnTreeComponent {
          */
         this.disabledField = input('disabled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
-        /**
-         * Field used by the data table to fetch children (`AXDataSource` filter on expand).
-         */
-        this.parentField = input('parentId', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "parentField" }] : /* istanbul ignore next */ []));
-        /**
-         * Field used by the data table to decide whether a row can expand.
-         */
-        this.hasChildrenField = input('hasChild', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasChildrenField" }] : /* istanbul ignore next */ []));
         /**
          * Currently selected values (always an array, even for single selection).
          */
@@ -1000,13 +925,40 @@ class AXLookupMultiColumnTreeComponent {
         this.alternate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
-         * Emitted when the user picks a row (not when expanding/collapsing).
+         * Emitted when the user picks a row.
          */
         this.itemClick = output();
+        this.tableRef = viewChild(AXDataTableComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
+        /** Accumulated rows fed to the table (grows as pages are scrolled in). */
+        this.#loadedItems = [];
+        /** Total matching rows from the source (used to size the popup). */
+        this.#totalCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#totalCount" }] : /* istanbul ignore next */ []));
         /**
-         * Header (~40px) + up to `maxVisibleItems` body rows. Expanded children scroll inside.
+         * Local table source: one page of whatever has been scrolled in so far.
+         * Kept as a stable instance so the table host is not recreated on each page load.
+         * `pageSize` grows with `#loadedItems` — never seed with a huge empty array (data-table
+         * initializes `displayedRows` as `new Array(pageSize)`, which caused NG0955-level jank).
          */
-        this.tableHeight = computed(() => 40 + this.maxVisibleItems() * this.itemHeight(), /* @ts-ignore */
+        this.tableDataSource = new AXDataSource({
+            pageSize: 1,
+            key: 'id',
+            load: async () => ({
+                items: this.#loadedItems,
+                total: this.#loadedItems.length,
+            }),
+        });
+        /**
+         * Header (~40px) + body rows. Grows with results up to `maxVisibleItems`,
+         * then the table body scrolls for the rest.
+         */
+        this.tableHeight = computed(() => {
+            const header = 40;
+            const total = this.#totalCount();
+            const rows = total > 0 ? total : Math.min(3, this.maxVisibleItems());
+            return header + Math.min(rows, this.maxVisibleItems()) * this.itemHeight();
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tableHeight" }] : /* istanbul ignore next */ []));
         this.loadingConfig = computed(() => ({
             enabled: true,
@@ -1014,6 +966,7 @@ class AXLookupMultiColumnTreeComponent {
             loadingTemplate: this.loadingTemplate(),
         }), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loadingConfig" }] : /* istanbul ignore next */ []));
+        this.#host = inject((ElementRef));
         this.resolveRowCssClass = (row) => {
             const item = row;
             if (!item) {
@@ -1028,6 +981,44 @@ class AXLookupMultiColumnTreeComponent {
             }
             return classes.join(' ');
         };
+        effect((onCleanup) => {
+            const source = this.dataSource();
+            this.tableDataSource.config.key = source.config.key || this.valueField();
+            untracked(() => {
+                this.#applyLoadedItems(source.cachedItems, source.totalCount);
+            });
+            const changedSub = source.onChanged.subscribe((event) => {
+                this.#applyLoadedItems(event.cachedItems, event.totalCount);
+            });
+            // Fetch page 0 only when the source has never loaded. Reopen remounts this
+            // view; setPage(0) is a no-op on a warm source and must not force a new API call.
+            queueMicrotask(() => {
+                if (!source.cachedItems.some((item) => item != null)) {
+                    source.setPage(0);
+                }
+            });
+            onCleanup(() => changedSub.unsubscribe());
+        });
+        effect((onCleanup) => {
+            // Rebind when the table instance appears / source changes.
+            this.tableRef();
+            this.dataSource();
+            let scrollSub;
+            const timer = setTimeout(() => {
+                const wrapper = this.tableRef()?.getHostElement()?.querySelector('.ax-data-table-wrapper') ??
+                    this.#host.nativeElement.querySelector('.ax-data-table-wrapper');
+                if (!wrapper) {
+                    return;
+                }
+                scrollSub = fromEvent(wrapper, 'scroll')
+                    .pipe(auditTime(80))
+                    .subscribe(() => this.#tryLoadMore(wrapper));
+            }, 0);
+            onCleanup(() => {
+                clearTimeout(timer);
+                scrollSub?.unsubscribe();
+            });
+        });
     }
     /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
     trackColumnKey(index, column) {
@@ -1040,15 +1031,14 @@ class AXLookupMultiColumnTreeComponent {
         }
         return width;
     }
-    isExpandColumn(index, column) {
-        if (column.expandHandler === true) {
-            return true;
-        }
-        if (this.columns().some((item) => item.expandHandler === true)) {
-            return false;
-        }
-        const textIndex = this.columns().findIndex((item) => item.field === this.textField());
-        return (textIndex === -1 ? 0 : textIndex) === index;
+    #applyLoadedItems(cachedItems, totalCount) {
+        this.#loadedItems = cachedItems.filter((item) => item != null);
+        this.#totalCount.set(totalCount);
+        this.#syncTablePageSize();
+        this.tableDataSource.refresh({ reset: true });
+    }
+    #syncTablePageSize() {
+        this.tableDataSource.config.pageSize = Math.max(this.#loadedItems.length, 1);
     }
     handleRowClick(event) {
         this.handleItemClick(event.data);
@@ -1071,17 +1061,31 @@ class AXLookupMultiColumnTreeComponent {
     isDisabled(item) {
         return Boolean(item?.[this.disabledField()]);
     }
+    #tryLoadMore(wrapper) {
+        const nearBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 48;
+        if (!nearBottom) {
+            return;
+        }
+        const source = this.dataSource();
+        if (source.isLoading || source.totalCount === 0) {
+            return;
+        }
+        const loadedCount = source.cachedItems.filter((item) => item != null).length;
+        if (loadedCount >= source.totalCount) {
+            return;
+        }
+        const nextPage = Math.floor(loadedCount / source.pageSize);
+        source.setPage(nextPage);
+    }
     getValue(item) {
         return item?.[this.valueField()];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnTreeComponent, isStandalone: true, selector: "ax-lookup-multi-column-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, parentField: { classPropertyName: "parentField", publicName: "parentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column ax-lookup-multi-column-tree" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnComponent, isStandalone: true, selector: "ax-lookup-multi-column", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ax-data-table
       class="ax-lookup-multi-column-table"
       look="minimal"
-      [dataSource]="dataSource()"
-      [parentField]="parentField()"
-      [hasChildrenField]="hasChildrenField()"
+      [dataSource]="tableDataSource"
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
@@ -1100,7 +1104,6 @@ class AXLookupMultiColumnTreeComponent {
           [dataField]="column.field"
           [caption]="column.title"
           [width]="resolveColumnWidth(column)"
-          [expandHandler]="isExpandColumn($index, column)"
           [allowSorting]="false"
           [allowResizing]="false"
         />
@@ -1127,24 +1130,22 @@ class AXLookupMultiColumnTreeComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-lookup-multi-column-tree',
+                    selector: 'ax-lookup-multi-column',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
                     host: {
-                        class: 'ax-lookup-multi-column ax-lookup-multi-column-tree',
+                        class: 'ax-lookup-multi-column',
                         '[style.height.px]': 'tableHeight()',
                     },
                     template: `
     <ax-data-table
       class="ax-lookup-multi-column-table"
       look="minimal"
-      [dataSource]="dataSource()"
-      [parentField]="parentField()"
-      [hasChildrenField]="hasChildrenField()"
+      [dataSource]="tableDataSource"
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
@@ -1163,7 +1164,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [dataField]="column.field"
           [caption]="column.title"
           [width]="resolveColumnWidth(column)"
-          [expandHandler]="isExpandColumn($index, column)"
           [allowSorting]="false"
           [allowResizing]="false"
         />
@@ -1190,7 +1190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
 
 /**
  * Internal mini component for the `multi-select-tree` lookup mode:
@@ -1466,6 +1466,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXLookupComponent extends NXValueComponent {
     #platform;
     #destroyRef;
+    /** Reused so closing/reopening the popup does not create a new AXDataSource (which would miss cache). */
+    #multiColumnTreeTableSource;
+    #multiColumnTreeTableKey;
+    #multiColumnTreeInput;
     /**
      * Tree callback results keyed by parent id. Survives popup remount so
      * drop-down-tree / multi-select-tree do not refetch on every open.
@@ -1713,15 +1717,24 @@ class AXLookupComponent extends NXValueComponent {
         this.resolvedDataSource = computed(() => {
             const tree = this.treeDataSource();
             if (this.mode() === 'multi-column-tree' && tree) {
+                const key = `${this.valueField()}|${this.textField()}|${this.treeParentField()}|${this.hasChildrenField()}`;
+                if (this.#multiColumnTreeTableSource &&
+                    this.#multiColumnTreeInput === tree &&
+                    this.#multiColumnTreeTableKey === key) {
+                    return this.#multiColumnTreeTableSource;
+                }
                 const cachedTree = Array.isArray(tree)
                     ? tree
                     : (nodeId) => this.#loadCachedTreeNodes(tree, nodeId);
-                return createLookupTreeTableDataSource(cachedTree, {
+                this.#multiColumnTreeInput = tree;
+                this.#multiColumnTreeTableKey = key;
+                this.#multiColumnTreeTableSource = createLookupTreeTableDataSource(cachedTree, {
                     valueField: this.valueField(),
                     textField: this.textField(),
                     parentField: this.treeParentField(),
                     hasChildrenField: this.hasChildrenField(),
                 });
+                return this.#multiColumnTreeTableSource;
             }
             const source = this.dataSource();
             if (!source) {