Table updates

src/assets/styles/_inputs.scss

@@ -195,7 +195,7 @@ form .iqser-input-group:not(first-of-type) {
         .mat-datepicker-toggle {
             position: absolute;
             right: 0;
-            top: 4px;
+            top: 1px;
             color: $accent;
 
             &.mat-datepicker-toggle-active {

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

@@ -18,6 +18,7 @@ export abstract class ListingComponent<T extends Listable> extends AutoUnsubscri
     readonly entitiesService = this._injector.get<EntitiesService<T>>(EntitiesService);
 
     readonly noMatch$ = this._noMatch$;
+    readonly noContent$ = this._noContent$;
     readonly sortedDisplayedEntities$ = this._sortedDisplayedEntities$;
 
     // TODO: These should be somewhere in table listing, not generic listing
@@ -54,6 +55,13 @@ export abstract class ListingComponent<T extends Listable> extends AutoUnsubscri
         );
     }
 
+    private get _noContent$(): Observable<boolean> {
+        return combineLatest([this._noMatch$, this.entitiesService.noData$]).pipe(
+            map(([noMatch, noData]) => noMatch || noData),
+            distinctUntilChanged()
+        );
+    }
+
     setInitialConfig(): void {
         this.sortingService.setSortingOption({
             column: this._primaryKey,

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

@@ -7,7 +7,7 @@
     ></iqser-round-checkbox>
 
     <span class="all-caps-label">
-        {{ tableHeaderLabel | translate: { length: (entitiesService.displayedLength$ | async) } }}
+        {{ tableHeaderLabel | translate: {length: totalSize || (entitiesService.displayedLength$ | async)} }}
     </span>
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>

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

@@ -23,6 +23,7 @@ export class TableHeaderComponent<T extends Listable> {
     @Input() hasEmptyColumn = false;
     @Input() selectionEnabled = false;
     @Input() mode: ListingMode = ListingModes.list;
+    @Input() totalSize?: number;
     @Input() bulkActions?: TemplateRef<unknown>;
 
     constructor(readonly entitiesService: EntitiesService<T>, readonly filterService: FilterService) {}

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

@@ -4,6 +4,7 @@
     [selectionEnabled]="selectionEnabled"
     [tableColumnConfigs]="tableColumnConfigs"
     [tableHeaderLabel]="tableHeaderLabel"
+    [totalSize]="totalSize"
 >
     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
 </iqser-table-header>
@@ -20,7 +21,7 @@
 
 <iqser-empty-state *ngIf="listingComponent.noMatch$ | async" [text]="noMatchText"></iqser-empty-state>
 
-<cdk-virtual-scroll-viewport [class.no-data]="(listingComponent.noMatch$ | async) || (listingComponent.entitiesService.noData$ | async)"
+<cdk-virtual-scroll-viewport [class.no-data]="listingComponent.noContent$ | async"
                              [itemSize]="itemSize"
                              iqserHasScrollbar>
     <div

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

@@ -32,6 +32,7 @@ export class TableComponent<T extends Listable> implements OnInit {
     @Input() selectionEnabled = false;
     @Input() hasScrollButton = false;
     @Input() emptyColumnWidth?: string;
+    @Input() totalSize?: number;
     @Input() classes?: string;
     @Input() noDataText?: string;
     @Input() noDataIcon?: string;
@@ -58,9 +59,14 @@ export class TableComponent<T extends Listable> implements OnInit {
     }
 
     ngOnInit(): void {
-        this.tableColumnConfigs = this.listingComponent.tableColumnConfigs;
+        this.tableColumnConfigs = <TableColumnConfig<T>[]>this.listingComponent.tableColumnConfigs;
         this.tableHeaderLabel = this.listingComponent.tableHeaderLabel;
-        this.routerLinkFn = this.listingComponent.routerLinkFn;
+        this.routerLinkFn = <((entity: T) => string | string[]) | undefined>this.listingComponent.routerLinkFn;
+        this.listingComponent.noContent$.subscribe(() => {
+            setTimeout(() => {
+                this.scrollViewport.checkViewportSize();
+            }, 0);
+        });
 
         this._patchConfig();
         this._setStyles();