increase table cache and other updates

src/lib/listing/listing-component.directive.ts

@@ -1,12 +1,12 @@
 import { Directive, Injector, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 import { map, switchMapTo } from 'rxjs/operators';
 import { FilterService } from '../filtering';
 import { SortingService } from '../sorting';
 import { AutoUnsubscribe, shareDistinctLast } from '../utils';
 import { SearchService } from '../search';
 import { EntitiesService, ListingService } from './services';
-import { IListable, ListingMode, ListingModes, TableColumnConfig } from './models';
+import { IListable, TableColumnConfig } from './models';
 
 export const DefaultListingServicesTmp = [FilterService, SearchService, SortingService, ListingService] as const;
 export const DefaultListingServices = [...DefaultListingServicesTmp, EntitiesService] as const;
@@ -29,8 +29,6 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
     @ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
     @ViewChild('workflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
 
-    private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
-
     protected constructor(protected readonly _injector: Injector) {
         super();
     }

src/lib/listing/table-content/table-content.component.html

@@ -5,27 +5,21 @@
     [minBufferPx]="300"
     iqserHasScrollbar
 >
-    <ng-container *ngIf="listingComponent.sortedDisplayedEntities$ | async as entities">
+    <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
         <!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
         <!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
-        <ng-container *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents">
+        <div
-            <div
+            (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
-                (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
+            (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
-                (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
+            *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
-                *cdkVirtualFor="let entity of entities; trackBy: trackById"
+            [ngClass]="getTableItemClasses(entity)"
-                [ngClass]="getTableItemClasses(entity)"
+            [routerLink]="entity.routerLink"
-                [routerLink]="entity.routerLink"
+        >
-            >
+            <ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
-                <ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
+        </div>
-            </div>
-        </ng-container>
 
         <ng-template #withoutMouseEvents>
-            <div
+            <div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
-                *cdkVirtualFor="let entity of entities; trackBy: trackById"
-                [ngClass]="getTableItemClasses(entity)"
-                [routerLink]="entity.routerLink"
-            >
                 <ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
             </div>
         </ng-template>

src/lib/listing/table-content/table-content.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { tap } from 'rxjs/operators';
-import { AutoUnsubscribe } from '../../utils';
+import { AutoUnsubscribe, trackBy } from '../../utils';
 import { IListable } from '../models';
 import { ListingComponent, ListingService } from '../index';
 import { HasScrollbarDirective } from '../../scrollbar';
@@ -18,6 +18,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
     @Input() itemMouseLeaveFn?: (entity: T) => void;
     @Input() tableItemClasses?: Record<string, (e: T) => boolean>;
     @Input() selectionEnabled!: boolean;
+    readonly trackBy = trackBy<T>();
 
     @ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
     @ViewChild(HasScrollbarDirective, { static: true }) readonly hasScrollbarDirective!: HasScrollbarDirective;
@@ -49,10 +50,6 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
         this.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
     }
 
-    trackById(index: number, entity: T): string {
-        return entity.id;
-    }
-
     getTableItemClasses(entity: T): Record<string, boolean> {
         const classes: Record<string, boolean> = {
             'table-item': true,

src/lib/utils/functions.ts

@@ -27,6 +27,6 @@ export function toNumber(str: string): number {
     }
 }
 
-export function trackBy() {
+export function trackBy<T extends ITrackable>() {
-    return <T extends ITrackable>(index: number, item: T): string => item.id;
+    return (index: number, item: T): string => item.id;
 }