From e0de29cb68bc171b2737f613eafb162a43ca32ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 14 Dec 2021 12:00:46 +0200
Subject: [PATCH] Table column configs can be updated

---
 src/lib/listing/services/entities.service.ts |  2 +-
 src/lib/listing/table/table.component.ts     | 29 +++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/listing/services/entities.service.ts b/src/lib/listing/services/entities.service.ts
index 79f7ef4..1bcfdd7 100644
--- a/src/lib/listing/services/entities.service.ts
+++ b/src/lib/listing/services/entities.service.ts
@@ -21,7 +21,7 @@ export class EntitiesService<E extends IListable, I = E> extends GenericService<
     readonly noData$: Observable<boolean>;
     readonly all$: Observable<E[]>;
     readonly allLength$: Observable<number>;
-    readonly entityChanged$ = new Subject<E>();
+    protected readonly entityChanged$ = new Subject<E>();
     private readonly _all$ = new BehaviorSubject<E[]>([]);
 
     constructor(
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index 836a44f..f717902 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -1,17 +1,19 @@
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     EventEmitter,
     forwardRef,
     Inject,
     Input,
-    OnInit,
+    OnChanges,
     Output,
+    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
-import { AutoUnsubscribe, Required } from '../../utils';
+import { AutoUnsubscribe } from '../../utils';
 import { IListable, ListingModes, TableColumnConfig } from '../models';
 import { ListingComponent } from '../listing-component.directive';
 import { EntitiesService } from '../services';
@@ -20,18 +22,19 @@ import { TableContentComponent } from '../table-content/table-content.component'
 const SCROLLBAR_WIDTH = 11;
 
 @Component({
-    selector: 'iqser-table',
+    selector: 'iqser-table [tableColumnConfigs] [itemSize]',
     templateUrl: './table.component.html',
     styleUrls: ['./table.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableComponent<T extends IListable> extends AutoUnsubscribe implements OnInit {
+export class TableComponent<T extends IListable> extends AutoUnsubscribe implements OnChanges {
     readonly listingModes = ListingModes;
 
+    @Input() tableColumnConfigs!: readonly TableColumnConfig<T>[];
     @Input() bulkActions?: TemplateRef<unknown>;
     @Input() actionsTemplate?: TemplateRef<unknown>;
     @Input() headerTemplate?: TemplateRef<unknown>;
-    @Input() @Required() itemSize!: number;
+    @Input() itemSize!: number;
     @Input() selectionEnabled = false;
     @Input() hasScrollButton = false;
     @Input() emptyColumnWidth?: string;
@@ -53,31 +56,31 @@ export class TableComponent<T extends IListable> extends AutoUnsubscribe impleme
     constructor(
         @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
         private readonly _hostRef: ViewContainerRef,
+        private readonly _changeRef: ChangeDetectorRef,
         readonly entitiesService: EntitiesService<T>,
     ) {
         super();
     }
 
-    get tableColumnConfigs(): readonly TableColumnConfig<T>[] {
-        return this.listingComponent.tableColumnConfigs;
-    }
-
     get tableHeaderLabel(): string | undefined {
         return this.listingComponent.tableHeaderLabel;
     }
 
-    scrollToLastIndex(): void {
-        this._tableContent.scrollToLastIndex();
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.tableColumnConfigs) {
+            this._setStyles();
+        }
     }
 
-    ngOnInit(): void {
-        this._setStyles();
+    scrollToLastIndex(): void {
+        this._tableContent.scrollToLastIndex();
     }
 
     private _setStyles(): void {
         const element = this._hostRef.element.nativeElement as HTMLElement;
         this._setColumnsWidth(element);
         this._setItemSize(element);
+        this._changeRef.markForCheck();
     }
 
     private _setColumnsWidth(element: HTMLElement) {