@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/table/table.class.ts

@@ -0,0 +1,2080 @@
+import { AfterViewInit, ChangeDetectorRef, Directive, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { MatSort, MatSortable, SortDirection } from '@angular/material/sort';
+
+import { BehaviorSubject, EMPTY, merge, Observable, of, Subject, Subscription } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, filter, first, mergeMap, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { TableElement } from '@e-is/ngx-material-table';
+import { EntitiesTableDataSource } from './entities-table-datasource.class';
+import { SelectionModel } from '@angular/cdk/collections';
+import { EntityUtils, IEntity } from '../services/model/entity.model';
+import { AlertController, ModalController, NavController, ToastController } from '@ionic/angular';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ColumnItem, TableSelectColumnsComponent } from './table-select-columns.component';
+import { Location } from '@angular/common';
+import { ErrorCodes } from '../services/errors';
+import { AppFormUtils, CanSave, IAppForm, OnReady } from '../form/form.utils';
+import { LocalSettingsService } from '../services/local-settings.service';
+import { TranslateService } from '@ngx-translate/core';
+import {
+  MatAutocompleteConfigHolder,
+  MatAutocompleteFieldAddOptions,
+  MatAutocompleteFieldConfig,
+} from '../../shared/material/autocomplete/material.autocomplete.config';
+import { CompletableEvent, createPromiseEventEmitter, emitPromiseEvent } from '../../shared/events';
+import {
+  changeCaseToUnderscore,
+  getPropertyByPath,
+  isEmptyArray,
+  isNil,
+  isNotEmptyArray,
+  isNotNil,
+  setPropertyByPath,
+  toBoolean,
+} from '../../shared/functions';
+import { waitFor, waitForFalse, WaitForOptions, waitForTrue } from '../../shared/observables';
+import { ShowToastOptions, Toasts } from '../../shared/toast/toasts';
+import { Alerts } from '../../shared/alerts';
+import { CdkColumnDef } from '@angular/cdk/table';
+import { LoadResult } from '../../shared/services/entity-service.class';
+import { FormErrorTranslateOptions, FormErrorTranslator, IFormPathTranslator } from '../../shared/validator/form-error-adapter.class';
+import {
+  CellValueChangeListener,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  DEFAULT_REQUIRED_COLUMNS,
+  RESERVED_END_COLUMNS,
+  RESERVED_START_COLUMNS,
+  SaveActionType,
+  SETTINGS_DISPLAY_COLUMNS,
+  SETTINGS_PAGE_SIZE,
+  SETTINGS_SORTED_COLUMN,
+} from './table.model';
+import { AppTableUtils } from './table.utils';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable } from '@angular/material/table';
+
+// @dynamic
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class AppTable<T extends IEntity<T, ID>, F = any, ID = number>
+  implements OnInit, OnDestroy, AfterViewInit, IAppForm, CanSave, IFormPathTranslator
+{
+  private _initialized = false;
+  private _openingRow = false;
+  private _subscription = new Subscription();
+  private _dataSourceLoadingSubscription: Subscription;
+
+  private _cellValueChangesDefs: {
+    [key: string]: CellValueChangeListener;
+  } = {};
+
+  protected _enabled = true;
+  protected _autocompleteConfigHolder: MatAutocompleteConfigHolder;
+  protected allowRowDetail = true;
+  protected readonly cd: ChangeDetectorRef;
+  protected route: ActivatedRoute;
+  protected router: Router;
+  protected navController: NavController;
+  protected location: Location;
+  protected settings: LocalSettingsService;
+  protected translate: TranslateService;
+  protected modalCtrl: ModalController;
+  protected alertCtrl: AlertController;
+  protected toastController: ToastController;
+  protected previouslyEditedRowId: number;
+  protected formErrorAdapter: FormErrorTranslator;
+  protected readonly destroySubject = new Subject<void>();
+
+  excludesColumns: string[] = [];
+  displayedColumns: string[];
+  totalRowCount: number | null = null;
+  visibleRowCount: number;
+  errorTranslateOptions: FormErrorTranslateOptions;
+
+  readonly readySubject = new BehaviorSubject<boolean>(false);
+  readonly loadingSubject = new BehaviorSubject<boolean>(true);
+  readonly savingSubject = new BehaviorSubject<boolean>(false);
+  readonly touchedSubject = new BehaviorSubject<boolean>(false);
+  readonly dirtySubject = new BehaviorSubject<boolean>(false);
+  readonly errorSubject = new BehaviorSubject<string>(undefined);
+
+  get error(): string {
+    return this.errorSubject.value;
+  }
+
+  set error(error: string) {
+    this.setError(error);
+  }
+
+  /**
+   * @deprecated
+   */
+  get error$(): Observable<string> {
+    return this.errorSubject.asObservable();
+  }
+
+  selection = new SelectionModel<TableElement<T>>(true, []);
+  permanentSelection: SelectionModel<T> = null;
+  permanentSelectionChangedPrevented = false;
+  editedRow: TableElement<T> = undefined;
+  autocompleteFields: { [key: string]: MatAutocompleteFieldConfig };
+  readonly mobile: boolean;
+
+  // Table options
+  @Input() settingsId: string;
+  @Input() debug: boolean;
+  @Input() i18nColumnPrefix = 'COMMON.';
+  @Input() i18nColumnSuffix: string;
+  @Input() autoLoad = true;
+  @Input() readOnly: boolean;
+  @Input() inlineEdition: boolean;
+  @Input() focusFirstColumn = false;
+  @Input() confirmBeforeDelete = false;
+  @Input() confirmBeforeCancel = false;
+  @Input() undoableDeletion = false;
+  @Input() saveBeforeDelete: boolean;
+  @Input() keepEditedRowOnSave: boolean;
+  @Input() saveBeforeSort: boolean;
+  @Input() saveBeforeFilter: boolean;
+  @Input() propagateRowError = false;
+  @Input() permanentSelectionAllowed = false; // Allow keep selected rows over page change or sort change
+  @Input() openRowThrottleTime = 800; // Prevent double click - see issue sumaris-app#864
+
+  @Input() defaultSortBy: string;
+  @Input() defaultSortDirection: SortDirection;
+  @Input() defaultPageSize = DEFAULT_PAGE_SIZE;
+  @Input() defaultPageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
+
+  // Focus manager
+  @Input() focusColumn: string;
+
+  get firstUserColumn(): string {
+    return this.displayedColumns[RESERVED_START_COLUMNS.length];
+  }
+
+  get lastUserColumn(): string {
+    return this.displayedColumns[this.displayedColumns.length - RESERVED_END_COLUMNS.length - 1];
+  }
+
+  @Input() set dataSource(value: EntitiesTableDataSource<T, F, ID>) {
+    this.setDatasource(value);
+  }
+
+  get dataSource(): EntitiesTableDataSource<T, F, ID> {
+    return this._dataSource;
+  }
+
+  @Input() set filter(value: F) {
+    this.setFilter(value);
+  }
+
+  get filter(): F {
+    return this._filter;
+  }
+
+  get empty(): boolean {
+    return this.loading || this.totalRowCount === 0;
+  }
+
+  get selectedEntities(): T[] {
+    return this.permanentSelection?.selected || AppTableUtils.getEntities(this.selection.selected);
+  }
+
+  @Output() onRefresh = new EventEmitter<any>();
+  @Output() onClickRow = new EventEmitter<TableElement<T>>();
+  @Output() onOpenRow = new EventEmitter<TableElement<T>>();
+  @Output() onNewRow = new EventEmitter<any>();
+  @Output() onStartEditingRow = new EventEmitter<TableElement<T>>();
+  @Output() onConfirmEditCreateRow = new EventEmitter<TableElement<T>>();
+  @Output() onCancelOrDeleteRow = new EventEmitter<TableElement<T>>();
+  @Output() onBeforeDeleteRows = createPromiseEventEmitter<boolean, { rows: TableElement<T>[] }>();
+  @Output() onBeforeCancelRows = createPromiseEventEmitter<boolean, { rows: TableElement<T>[] }>();
+  @Output() onBeforeSave = createPromiseEventEmitter<{ confirmed: boolean; save: boolean }, { action: SaveActionType; valid: boolean }>();
+  @Output() onAfterDeletedRows = new EventEmitter<TableElement<T>[]>();
+  @Output() onSort = new EventEmitter<any>();
+  @Output() onDirty = new EventEmitter<boolean>();
+  @Output() onError = new EventEmitter<string>();
+
+  get dirty(): boolean {
+    return this.dirtySubject.value;
+  }
+
+  get valid(): boolean {
+    return this.editedRow && this.editedRow.editing ? this.editedRow.validator?.valid : true;
+  }
+
+  get invalid(): boolean {
+    return this.editedRow && this.editedRow.editing ? this.editedRow.validator?.invalid : false;
+  }
+
+  get pending(): boolean {
+    return this.editedRow && this.editedRow.editing ? this.editedRow.validator?.pending : false;
+  }
+
+  get touched(): boolean {
+    return this.touchedSubject.value;
+  }
+
+  get untouched(): boolean {
+    return !this.touchedSubject.value;
+  }
+
+  disable(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    if (this.sort) this.sort.disabled = true;
+    this._enabled = false;
+    if (!opts || opts.emitEvent !== false) this.markForCheck();
+  }
+
+  enable(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    if (this.sort) this.sort.disabled = false;
+    this._enabled = true;
+    if (!opts || opts.emitEvent !== false) this.markForCheck();
+  }
+
+  get enabled(): boolean {
+    return this._enabled;
+  }
+
+  // FIXME: need to hidden buttons (in HTML), etc. when disabled
+  @Input() set disabled(value: boolean) {
+    if (value !== !this._enabled) {
+      if (value) this.disable({ emitEvent: false });
+      else this.enable({ emitEvent: false });
+    }
+  }
+
+  get disabled(): boolean {
+    return !this._enabled;
+  }
+
+  markAsDirty(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    if (!this.dirtySubject.closed && this.dirtySubject.value !== true) {
+      this.dirtySubject.next(true);
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  markAsPristine(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    if (!this.dirtySubject.closed && this.dirtySubject.value !== false) {
+      this.dirtySubject.next(false);
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  markAsUntouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    let needEmitEvent = false;
+    if (this.touchedSubject.value) {
+      this.touchedSubject.next(false);
+      needEmitEvent = true;
+    }
+    if (this.dirty || (this.editedRow && this.editedRow.id !== this.previouslyEditedRowId)) {
+      // Cancel the current editing row only if editing and if it was not previously saved
+      if (this.editedRow?.editing) {
+        // Cancel the current editing row only if editing and if it was not previously saved
+        if (this.editedRow.id === -1) {
+          this.dataSource.delete(-1);
+        } else {
+          this.dataSource.cancel(this.editedRow);
+        }
+
+        // Mark row as pristine
+        this.checkIfRowPristine(this.editedRow, { emitEvent: false });
+      }
+      this.editedRow = null;
+      needEmitEvent = true;
+    }
+    this.previouslyEditedRowId = undefined;
+    if (needEmitEvent && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  /**
+   * @deprecated prefer to use markAllAsTouched()
+   * @param opts
+   */
+  markAsTouched(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    console.warn('TODO: Replace this call by markAllAsTouched() - because of changes in ngx-components >= 0.16.0');
+    if (this.editedRow?.editing) {
+      this.editedRow.validator?.markAllAsTouched();
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  markAllAsTouched(opts?: { emitEvent?: boolean }) {
+    if (!this.touchedSubject.closed && this.touchedSubject.value !== true) {
+      this.touchedSubject.next(true);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+    if (this.editedRow?.editing) {
+      this.editedRow.validator?.markAllAsTouched();
+    }
+  }
+
+  markAsSaving(opts?: { emitEvent?: boolean }) {
+    if (!this.savingSubject.closed && this.savingSubject.value !== true) {
+      this.focusColumn = undefined; // unselect focus column
+      this.savingSubject.next(true);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  markAsSaved(opts?: { emitEvent?: boolean }) {
+    if (!this.savingSubject.closed && this.savingSubject.value !== false) {
+      this.savingSubject.next(false);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  markAsLoading(opts?: { emitEvent?: boolean }) {
+    this.setLoading(true, opts);
+  }
+
+  markAsLoaded(opts?: { emitEvent?: boolean }) {
+    this.setLoading(false, opts);
+  }
+
+  markAsReady(opts?: { emitEvent?: boolean }) {
+    if (!this.readySubject.closed && this.readySubject.value !== true) {
+      this.readySubject.next(true);
+
+      // If subclasses implements OnReady
+      if (typeof this['ngOnReady'] === 'function') {
+        (this as any as OnReady).ngOnReady();
+      }
+    }
+  }
+
+  get loading(): boolean {
+    return this.loadingSubject.value;
+  }
+
+  get loaded(): boolean {
+    return !this.loadingSubject.value;
+  }
+
+  enableSort() {
+    if (this.sort) this.sort.disabled = false;
+  }
+
+  disableSort() {
+    if (this.sort) this.sort.disabled = true;
+  }
+
+  set pageSize(value: number) {
+    this.defaultPageSize = value;
+    if (this.paginator) {
+      this.paginator.pageSize = value;
+    }
+  }
+
+  get pageSize(): number {
+    return (this.paginator && this.paginator.pageSize) || this.defaultPageSize || DEFAULT_PAGE_SIZE;
+  }
+
+  get pageOffset(): number {
+    return (this.paginator && this.paginator.pageIndex * this.paginator.pageSize) || 0;
+  }
+
+  get sortActive(): string {
+    return this.sort && this.sort.active;
+  }
+
+  set sortActive(sortBy: string) {
+    if (this.sort) {
+      this.sort.active = sortBy;
+    } else {
+      this.defaultSortBy = sortBy;
+    }
+  }
+
+  get sortDirection(): SortDirection {
+    return (this.sort && this.sort.direction && (this.sort.direction === 'desc' ? 'desc' : 'asc')) || undefined;
+  }
+
+  set sortDirection(value: SortDirection) {
+    if (this.sort) {
+      this.sort.direction = value;
+    } else {
+      this.defaultSortDirection = value;
+    }
+  }
+
+  private _paginator: MatPaginator | null = null;
+
+  @Input() set paginator(value: MatPaginator) {
+    this._paginator = value;
+  }
+
+  get paginator(): MatPaginator {
+    return this._paginator || this.childPaginator;
+  }
+
+  get destroyed(): boolean {
+    return this.destroySubject?.closed !== false;
+  }
+
+  @ViewChild(MatTable, { static: false }) table: MatTable<T>;
+  @ViewChild(MatPaginator, { static: false }) childPaginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
+
+  protected constructor(
+    injector: Injector,
+    protected columns: string[],
+    protected _dataSource?: EntitiesTableDataSource<T, F, ID>,
+    private _filter?: F
+  ) {
+    this.cd = injector.get(ChangeDetectorRef);
+    this.route = injector.get(ActivatedRoute);
+    this.router = injector.get(Router);
+    this.navController = injector.get(NavController);
+    this.location = injector.get(Location);
+    this.settings = injector.get(LocalSettingsService);
+    this.translate = injector.get(TranslateService);
+    this.modalCtrl = injector.get(ModalController);
+    this.alertCtrl = injector.get(AlertController);
+    this.toastController = injector.get(ToastController);
+    this.formErrorAdapter = injector.get(FormErrorTranslator);
+    this.mobile = this.settings.mobile;
+
+    // Autocomplete fields
+    this._autocompleteConfigHolder = new MatAutocompleteConfigHolder({
+      getUserAttributes: (a, b) => this.settings.getFieldDisplayAttributes(a, b),
+    });
+    this.autocompleteFields = this._autocompleteConfigHolder.fields;
+  }
+
+  ngOnInit() {
+    if (this._initialized) return; // Init only once
+    this._initialized = true;
+
+    // Set defaults
+    this.readOnly = toBoolean(this.readOnly, this.dataSource?.config.readOnly || false); // read/write by default
+    this.inlineEdition = !this.readOnly && toBoolean(this.inlineEdition, false); // force to false when readonly
+    this.saveBeforeDelete = toBoolean(this.saveBeforeDelete, !this.readOnly); // force to false when readonly
+    this.saveBeforeSort = toBoolean(this.saveBeforeSort, !this.readOnly); // force to false when readonly
+    this.saveBeforeFilter = toBoolean(this.saveBeforeFilter, !this.readOnly); // force to false when readonly
+    this.keepEditedRowOnSave = toBoolean(this.keepEditedRowOnSave, this.inlineEdition);
+    this.errorTranslateOptions = this.errorTranslateOptions || { separator: ', ', pathTranslator: this }; // Can be override in subclasses constructors
+
+    // Check ask user confirmation is possible
+    if (this.confirmBeforeDelete && !this.alertCtrl) throw Error("Missing 'alertCtrl' or 'injector' in component's constructor.");
+
+    // Defined unique id for settings for the page
+    this.settingsId = this.settingsId || this.generateTableId();
+
+    this.displayedColumns = this.getDisplayColumns();
+
+    // Load the sorted columns, from settings
+    {
+      const sortedColumn = this.getSortedColumn();
+      this.defaultSortBy = sortedColumn.id;
+      this.defaultSortDirection = sortedColumn.start;
+    }
+
+    this.defaultPageSize = this.getPageSize();
+
+    // Propagate error to event emitter
+    this.registerSubscription(this.errorSubject.subscribe((value) => this.onError.emit(value)));
+
+    // Propagate dirty to event emitter
+    this.registerSubscription(this.dirtySubject.subscribe((value) => this.onDirty.emit(value)));
+
+    // Propagate row dirty state to table
+    this.registerSubscription(
+      this.onStartEditingRow
+        .pipe(
+          filter((row) => row?.validator && true),
+          mergeMap((row) =>
+            row.validator.valueChanges.pipe(
+              filter(() => row.validator.dirty),
+              first(),
+              // DEBUG
+              //tap(() => console.debug("Propagate row's dirty to table..."))
+
+              // Stop if next another row, or destroying
+              takeUntil(this.onStartEditingRow),
+              takeUntil(this.destroySubject)
+            )
+          )
+        )
+        .subscribe(() => this.markAsDirty())
+    );
+
+    // Call datasource refresh, on each refresh events
+    this.registerSubscription(
+      this.onRefresh
+        .pipe(
+          startWith<any, any>((this.autoLoad ? {} : 'skip') as any),
+          switchMap((event: any) => {
+            this.dirtySubject.next(false);
+            this.selection.clear();
+            if (event === 'skip') {
+              return of(undefined);
+            }
+            if (!this._dataSource) {
+              if (this.debug) console.debug('[table] Skipping data load: no dataSource defined');
+              return of(undefined);
+            }
+            if (this.debug) console.debug('[table] Calling dataSource.watchAll()...');
+            return this._dataSource.watchAll(this.pageOffset, this.pageSize, this.sortActive, this.sortDirection, this._filter);
+          }),
+          catchError((err) => {
+            if (this.debug) console.error(err);
+            this.setError((err && err.message) || err);
+            return of(undefined); // Continue
+          })
+        )
+        .subscribe((res) => this.updateView(res as LoadResult<T> | undefined))
+    );
+
+    // Listen dataSource loading events
+    if (this._dataSource) this.listenDataSourceLoading(this._dataSource);
+
+    // Permanent selection behavior
+    if (this.permanentSelectionAllowed) this.initPermanentSelection();
+  }
+
+  ngAfterViewInit() {
+    // Detect when parent ngOnInit() not call
+    if (this.debug && !this.displayedColumns)
+      console.warn(`[table] Missing 'displayedColumns'. Did you call parent ngOnInit() in component ${this.constructor.name} ?`);
+
+    // Start listening sort and paginator events
+    // noinspection JSIgnoredPromiseFromCall
+    this.listenSortAndPaginationEvents();
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+
+    // Unsubscribe column value changes
+    Object.keys(this._cellValueChangesDefs).forEach((col) => this.stopCellValueChanges(col, true));
+    this._cellValueChangesDefs = {};
+
+    this.readySubject.unsubscribe();
+    this.loadingSubject.unsubscribe();
+    this.savingSubject.unsubscribe();
+    this.errorSubject.unsubscribe();
+    this.dirtySubject.unsubscribe();
+
+    this.onRefresh.unsubscribe();
+    this.onOpenRow.unsubscribe();
+    this.onNewRow.unsubscribe();
+    this.onStartEditingRow.unsubscribe();
+    this.onConfirmEditCreateRow.unsubscribe();
+    this.onCancelOrDeleteRow.unsubscribe();
+    this.onBeforeDeleteRows.unsubscribe();
+    this.onBeforeCancelRows.unsubscribe();
+    this.onBeforeSave.unsubscribe();
+    this.onAfterDeletedRows.unsubscribe();
+    this.onSort.unsubscribe();
+    this.onDirty.unsubscribe();
+    this.onError.unsubscribe();
+
+    this.destroySubject.next();
+    this.destroySubject.unsubscribe();
+  }
+
+  async updateView(
+    res: LoadResult<T> | undefined,
+    opts?: {
+      emitEvent?: boolean;
+    }
+  ): Promise<void> {
+    if (!res) return; // Skip (e.g error)
+    if (res && res.data) {
+      this.visibleRowCount = res.data.length;
+      this.totalRowCount = isNotNil(res.total)
+        ? res.total
+        : ((this.paginator && this.paginator.pageIndex * (this.paginator.pageSize || DEFAULT_PAGE_SIZE)) || 0) + this.visibleRowCount;
+      if (this.debug) console.debug(`[table] ${res.data.length} rows loaded`);
+    } else {
+      //if (this.debug) console.debug('[table] NO rows loaded');
+      this.totalRowCount = 0;
+      this.visibleRowCount = 0;
+    }
+
+    if (!opts || opts.emitEvent !== false) {
+      this.markAsUntouched({ emitEvent: false });
+      this.markAsPristine({ emitEvent: false });
+      this.markAsLoaded({ emitEvent: false });
+    }
+
+    this.markForCheck();
+  }
+
+  setDatasource(datasource: EntitiesTableDataSource<T, F, ID>) {
+    if (this._dataSource) throw new Error('[table] dataSource already set !');
+    if (datasource && this._dataSource !== datasource) {
+      this._dataSource = datasource;
+      if (this._initialized) this.listenDataSourceLoading(datasource);
+    }
+  }
+
+  resetDataSource() {
+    if (this._dataSourceLoadingSubscription) {
+      this._dataSourceLoadingSubscription.unsubscribe();
+      this.unregisterSubscription(this._dataSourceLoadingSubscription);
+    }
+    this._dataSource = null;
+  }
+
+  addColumnDef(column: CdkColumnDef) {
+    this.table.addColumnDef(column);
+  }
+
+  removeColumnDef(column: CdkColumnDef) {
+    this.table.removeColumnDef(column);
+  }
+
+  setFilter(filter: F, opts?: { emitEvent?: boolean; permanentSelectionChangedPrevented?: boolean }) {
+    opts = opts || { emitEvent: true };
+
+    // Prevent permanent selection change events
+    this.permanentSelectionChangedPrevented = toBoolean(opts.permanentSelectionChangedPrevented, this.permanentSelectionChangedPrevented);
+
+    if (this.saveBeforeFilter) {
+      // if a dirty table is to be saved before filter
+      if (this.dirty) {
+        // Save
+        this.saveBeforeAction('filter').then((saved) => {
+          // Apply filter only if user didn't cancel the save or the save is ok
+          if (saved) {
+            this.applyFilter(filter, opts);
+          }
+        });
+      } else {
+        // apply filter on non-dirty table
+        this.applyFilter(filter, opts);
+      }
+    } else {
+      // apply filter directly
+      this.applyFilter(filter, opts);
+    }
+  }
+
+  async confirmAndAdd(event?: Event, row?: TableElement<T>): Promise<boolean> {
+    if (!this.confirmEditCreate(event, row)) {
+      return false;
+    }
+    // Add row
+    return this.addRow(event);
+  }
+
+  confirmAndBackward(event?: Event, row?: TableElement<T>): boolean | Promise<boolean> {
+    // Deleting edited row, if empty and not dirty
+    const previousRow = this.editedRow;
+
+    event?.stopPropagation();
+
+    if (previousRow) {
+      // Previous row was a nex row AND invalid: delete it
+      if (previousRow.id === -1 && previousRow.validator?.invalid && !previousRow.validator?.dirty) {
+        this.deleteNewRow(event, previousRow);
+
+        // Wait deletion is done, then edit previous row (by id, because of reloading)
+        this.waitIdle().then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
+        return true;
+      }
+
+      // If cannot confirm previous row
+      else if (!this.confirmEditCreate(event, previousRow)) {
+        // If pending: Wait end of validation, then loop
+        if (previousRow.validator?.pending) {
+          return AppFormUtils.waitWhilePending(previousRow.validator).then(() => this.confirmAndBackward(event, row));
+        }
+
+        // Go back to first column
+        this.focusColumn = this.lastUserColumn;
+        this.markForCheck();
+
+        return false;
+      }
+    }
+
+    // Edit row, focusing at the end
+    this.editRow(event, row, { focusColumn: this.lastUserColumn });
+    return true;
+  }
+
+  confirmAndForward(event?: Event, row?: TableElement<T>): boolean | Promise<boolean> {
+    if (!this.inlineEdition) return false;
+    row = row || this.editedRow;
+
+    event?.stopPropagation();
+
+    if (!this.confirmEditCreate(event, row)) {
+      // If pending: Wait end of validation, then loop
+      if (row.validator?.pending) {
+        return AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmAndForward(event, row));
+      }
+
+      // Go back to first column
+      this.focusColumn = this.firstUserColumn;
+      this.markForCheck();
+
+      return false;
+    }
+    // Edit next row
+    this.editRowById(event, row.id + 1, { focusColumn: this.firstUserColumn });
+    return true;
+  }
+
+  /**
+   * Confirm the creation of the given row, or if not specified the currently edited row
+   *
+   * @param event
+   * @param row
+   */
+  confirmEditCreate(event?: Event, row?: TableElement<T>): boolean {
+    row = row || this.editedRow;
+    if (!row || !row.editing) return true; // no row to confirm
+
+    // Confirmation edition or creation
+    // TODO: add await ?
+    const confirmed = row.confirmEditCreate();
+
+    if (confirmed) {
+      // If edit finished, forget edited row
+      if (row === this.editedRow) {
+        this.editedRow = undefined;
+      }
+
+      // Mark table as dirty (if row is dirty)
+      if (row.dirty) {
+        this.markAsDirty({ emitEvent: false /* because of resetError() */ });
+      }
+
+      // Clear error
+      this.resetError();
+
+      // Emit the confirm event
+      this.onConfirmEditCreateRow.next(row);
+
+      return true; // Continue
+    }
+
+    if (row.validator) {
+      // If pending: Wait end of validation, then loop
+      // TODO: remove when using async isValid() function
+      if (row.validator.pending) {
+        AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmEditCreate(event, row));
+        return false;
+      }
+
+      // NOT confirmed = row has error
+      if (this.debug) {
+        console.warn('[table] Cannot confirm row, because invalid');
+        AppFormUtils.logFormErrors(row.validator, '[table] ');
+      }
+
+      // fix: mark all controls as touched to show errors
+      row.validator.markAllAsTouched();
+
+      // Compute row error, and propagate to table's error
+      if (this.propagateRowError) {
+        const error = this.getRowError(row);
+        this.setError(error);
+      }
+    }
+
+    // Not confirmed
+    return false;
+  }
+
+  cancelOrDelete(event: Event, row: TableElement<T>, opts?: { interactive?: boolean; keepEditing?: boolean }) {
+    // Delete new row
+    if (row.id === -1) {
+      this.deleteNewRow(event, row);
+    }
+    // Delete existing (but not editing) row
+    else if (!row.editing) {
+      this.deleteExistingRow(event, row, opts);
+    }
+    // Cancel existing (and editing) row
+    else {
+      this.cancelExistingRow(event, row, opts);
+    }
+  }
+
+  async addRow(event?: Event, insertAt?: number, opts?: { focusColumn?: string; editing?: boolean }): Promise<boolean> {
+    if (this.debug) console.debug('[table] Asking for new row...');
+    if (!this._enabled) return false;
+
+    // Use modal if inline edition is disabled
+    if (!this.inlineEdition) {
+      this.openNewRowDetail(event);
+      return false;
+    }
+
+    // Try to finish edited row first
+    if (!this.confirmEditCreate()) {
+      return false;
+    }
+
+    // Add new row
+    const row = await this.addRowToTable(insertAt, opts);
+    return !!row;
+  }
+
+  async save(opts?: { keepEditing?: boolean }): Promise<boolean> {
+    opts = {
+      keepEditing: this.keepEditedRowOnSave,
+      ...opts,
+    };
+    if (this.readOnly) {
+      throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+    }
+
+    this.resetError();
+
+    // Keep edited row id (should be done BEFORE confirmEditCreate() )
+    this.previouslyEditedRowId = opts.keepEditing
+      ? (this.editedRow?.editing ? this.editedRow.id : undefined) || this.singleSelectedRow?.id
+      : undefined;
+    const previouslyEditedRowId = this.previouslyEditedRowId;
+    const previouslyEditedData = opts.keepEditing
+      ? (isNotNil(previouslyEditedRowId) && this.editedRow?.currentData) || this.singleSelectedRow?.currentData
+      : undefined;
+
+    if (!this.confirmEditCreate()) {
+      throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
+    }
+
+    // Mark as saving
+    this.markAsSaving();
+
+    try {
+      // Calling service save()
+      if (this.debug) console.debug('[table] Calling dataSource.save()...');
+      const isOK = await this._dataSource.save();
+
+      if (isOK) this.markAsPristine();
+
+      return isOK;
+    } catch (err) {
+      this.setError((err && err.message) || err);
+      throw err;
+    } finally {
+      this.markAsSaved();
+
+      // Restore previous row
+      if (isNotNil(previouslyEditedRowId)) {
+        await this.selectRowByIdOrData(previouslyEditedRowId, previouslyEditedData);
+      }
+    }
+  }
+
+  cancel(event?: Event, opts?: { interactive?: boolean }) {
+    // Check confirmation
+    if ((!opts || opts.interactive !== false) && this.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observed)) {
+      event?.stopPropagation();
+      this.canCancelRows().then((confirm) => {
+        // If confirmed, loop
+        if (confirm) this.cancel(null, { interactive: false });
+      });
+      return;
+    }
+
+    this.emitRefresh();
+  }
+
+  async duplicateRow(
+    event?: Event,
+    row?: TableElement<T>,
+    opts?: {
+      includedProperties?: string[];
+      excludedProperties?: string[];
+    }
+  ) {
+    event?.stopPropagation();
+
+    row = row || this.singleSelectedRow;
+    if (!row || !this.confirmEditCreate(event, row)) {
+      return false;
+    }
+
+    const newRow = await this.addRowToTable(row.id + 1);
+    if (!newRow) throw new Error('Cannot add new row to table');
+
+    const source = row.cloneData();
+    let target: any;
+
+    // Copy included properties only
+    if (isNotEmptyArray(opts?.includedProperties)) {
+      target = {};
+      // Clone (deep copy)
+      opts.includedProperties.forEach((path) => {
+        setPropertyByPath(target, path, getPropertyByPath(source, path));
+      });
+    }
+
+    // Copy all properties
+    else {
+      target = source;
+
+      // Clean id and updateDate
+      EntityUtils.cleanIdAndUpdateDate(target, undefined);
+    }
+
+    // Restore excluded properties (e.g. rankOrder, etc)
+    if (isNotEmptyArray(opts?.excludedProperties)) {
+      const newData = newRow.currentData;
+      opts.excludedProperties.forEach((path) => {
+        setPropertyByPath(target, path, getPropertyByPath(newData, path));
+      });
+    }
+
+    if (newRow.validator) {
+      newRow.validator.patchValue(target);
+      newRow.validator.markAsDirty();
+    } else {
+      if (newRow.currentData?.fromObject) {
+        newRow.currentData.fromObject(target);
+      } else {
+        newRow.currentData = target;
+      }
+      this.markAsDirty();
+    }
+
+    // select
+    this.clickRow(undefined, newRow);
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    // DEBUG
+    //console.debug('isAllSelected. lengths', this.selection.selected.length, this.totalRowCount);
+
+    return this.selection.selected.length === this.totalRowCount || this.selection.selected.length === this.visibleRowCount;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  async masterToggle() {
+    if (this.loading) return;
+    if (this.isAllSelected()) {
+      this.selection.clear();
+    } else {
+      const rows = this._dataSource.getRows();
+      this.selection.setSelection(...rows);
+    }
+  }
+
+  async deleteSelection(event: Event, opts?: { interactive?: boolean }): Promise<number> {
+    const deleteCount = await this.deleteRows(event, this.selection.selected, opts);
+    if (deleteCount > 0) this.selection.clear();
+    return deleteCount;
+  }
+
+  /**
+   *
+   * @param event
+   * @param row
+   * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
+   *  And to force deletion even if table is busy
+   */
+  async deleteRow(event: Event | null, row: TableElement<T>, opts?: { interactive?: boolean }): Promise<boolean> {
+    const deleteCount = await this.deleteRows(event, [row], opts);
+    return deleteCount === 1;
+  }
+
+  /**
+   *
+   * @param event
+   * @param rows
+   * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
+   *    And to force deletion even if table is busy
+   */
+  async deleteRows(event: Event | null, rows: TableElement<T>[], opts?: { interactive?: boolean }): Promise<number> {
+    if (this.readOnly) {
+      throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+    }
+    if (event?.defaultPrevented) return 0; // SKip
+    event?.preventDefault();
+    this.resetError();
+
+    if (!this._enabled || isEmptyArray(rows)) return 0; // Skip is disabled, or no rows to delete
+
+    if (this.loading && (!opts || opts.interactive !== false)) {
+      console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.interactive = false to force deletion');
+      return 0; // Skip if loading
+    }
+
+    // Make sure to keep newly created row
+    if (this.editedRow?.id === -1 && this.editedRow.editing && !rows.includes(this.editedRow)) {
+      const confirmed = this.confirmEditCreate();
+      if (!confirmed) return 0; // Cannot delete (e.g. edited row is invalid)
+    }
+
+    // Check if can delete
+    const canDelete = await this.canDeleteRows(rows, opts);
+    if (!canDelete) return 0; // Cannot delete
+
+    // Reverse row order (on a copy)
+    // This is a workaround, need because row.delete() has async execution
+    // and index cache is updated with a delay
+    let tempRows = rows.slice().sort((a, b) => (a.id > b.id ? -1 : 1));
+
+    const deletedRows: TableElement<T>[] = [];
+
+    // If data need to be saved first
+    if (this.saveBeforeDelete) {
+      // Exclude invalid rows (because of save() will fail, when exists some invalid rows)
+      tempRows = tempRows.filter((row) => {
+        // Delete the row :
+        // - if newly created row (id = -1),
+        // - or if invalid and not editing (= not cancellable)
+        if (row.id === -1 || (!row.editing && row.invalid) /*do not use !valid because if row is disabled, it will be always !valid */) {
+          if (this.debug) console.debug(`[table] Delete row #${row.id}`);
+          this.selection.deselect(row);
+          row.delete();
+          this.visibleRowCount--;
+          this.totalRowCount--;
+          deletedRows.push(row);
+          if (this.editedRow === row) this.editedRow = undefined;
+          return false; // Exclude from the list to delete using the service
+        }
+        // Cancel the row (and mark as pristine), when not valid but in edition
+        else if (row.editing && !row.valid) {
+          this.selection.deselect(row);
+          row.cancel();
+          // Mark row as pristine (if possible)
+          this.checkIfRowPristine(row, { emitEvent: false, onlySelf: true /*avoid propagation to table*/ });
+          return true; // Keep the row. the row will be deleted after the save
+        }
+
+        return true;
+      });
+
+      // Apply save, only if there is still some rows to delete
+      // WARN: If no more rows (e.g. because all has been cancelled) then continue anyway to clear editedRow and selection (issue IMAGINE-669)
+      if (deletedRows.length || tempRows.length) {
+        // Save data (e.g. when using memory service)
+        const saved = await this.saveBeforeAction('delete');
+        if (!saved) {
+          // Stop if save cancelled or save failed
+          return;
+        }
+      }
+    }
+
+    try {
+      // Apply deletion on datasource
+      // If no more rows to delete, continue anyway to clear editedRow and selection (issue IMAGINE-669)
+      if (tempRows.length) {
+        if (this.debug) console.debug(`[table] Delete ${tempRows.length} rows...`);
+        await this._dataSource.deleteAll(tempRows);
+      }
+
+      // DO not update manually, because watchALl().subscribe() will update this count
+      //this.totalRowCount -= deleteCount;
+      //this.visibleRowCount -= deleteCount;
+
+      // Deselect deleted rows
+      this.selection.deselect(...rows);
+
+      this.editedRow = undefined;
+      this.markAsDirty({ emitEvent: false /*markForCheck() is called just after*/ });
+      this.markForCheck();
+
+      this.onAfterDeletedRows.next(rows);
+
+      return rows.length;
+    } catch (err) {
+      this.setError((err && err.message) || err);
+      throw err;
+    }
+  }
+
+  async selectRowById(id: number): Promise<boolean> {
+    if (id === undefined) return false;
+    await this.waitIdle();
+    const row = this.dataSource.getRow(id);
+    if (!row) return false;
+    return this.clickRow(null, row);
+  }
+
+  /**
+   * Try to select row by data. Will use equals() to find same row's data
+   *
+   * @param data
+   */
+  async selectRowByData(data: T): Promise<boolean> {
+    if (data === undefined) return Promise.resolve(false);
+    await this.waitIdle();
+    const row = this.dataSource.getRows().find((row) => this.equals(row.currentData, data));
+    if (!row) return false;
+    return this.clickRow(null, row);
+  }
+
+  toggleSelectRow(event: Event | undefined, row: TableElement<T>) {
+    // /!\ DO NOT prevent default, otherwise the checkbox will not be updated
+    //event?.preventDefault();
+    event?.stopPropagation();
+    this.selection.toggle(row);
+  }
+
+  clickRow(event: Event | undefined, row: TableElement<T>): boolean {
+    if (this.loading) {
+      // Wait while loading, and loop
+      if (this.debug) console.debug('[table] Waiting before apply clickRow() (datasource is busy)...');
+      this.waitIdle({ timeout: 2000 }).then(() => this.clickRow(event, row));
+      return false;
+    }
+
+    // DEBUG
+    //console.debug("[table] Detect click on row");
+
+    // Cancelled by event
+    if (event?.defaultPrevented) {
+      if (this.debug) console.debug('[table] clickRow event is defaultPrevented');
+      return false;
+    }
+
+    // Call onClickRow if observed
+    if (this.onClickRow.observed) {
+      this.onClickRow.next(row);
+      return true;
+    }
+
+    // Open the detail page (if not inline editing)
+    if (!this.inlineEdition) {
+      if (this._openingRow) return; // Prevent double click
+
+      if (event) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+
+      this._openingRow = true; // Prevent double click
+      this.markAsLoading();
+
+      this.openRow(row.currentData.id, row)
+        .catch((err) => console.error('Failed to open row', err)) // Continue
+        .then(() => {
+          this.markAsLoaded();
+
+          // Prevent double click (use an open throttle time)
+          if (this.openRowThrottleTime > 0) {
+            setTimeout(() => {
+              this._openingRow = false;
+            }, this.openRowThrottleTime);
+          } else {
+            this._openingRow = false;
+          }
+        });
+
+      return true;
+    }
+
+    // Start editing row
+    return this.editRow(event, row, { focusColumn: undefined /*force to use the click target*/ });
+  }
+
+  moveRow(id: number, direction: number) {
+    this.dataSource.move(id, direction);
+  }
+
+  ready(opts?: WaitForOptions): Promise<void> {
+    return waitForTrue(this.readySubject, { stop: this.destroySubject, ...opts });
+  }
+
+  waitIdle(opts?: WaitForOptions): Promise<void> {
+    if (!this.loadingSubject.value) return Promise.resolve();
+    return waitForFalse(this.loadingSubject, { stop: this.destroySubject, ...opts });
+  }
+
+  async openSelectColumnsModal(event?: Event): Promise<any> {
+    event?.preventDefault();
+
+    // Copy current columns (deep copy)
+    const columns = this.getCurrentColumns();
+
+    const hasTopModal = !!(await this.modalCtrl.getTop());
+    const modal = await this.modalCtrl.create({
+      component: TableSelectColumnsComponent,
+      componentProps: { columns },
+      cssClass: hasTopModal && 'stack-modal',
+    });
+
+    // Open the modal
+    await modal.present();
+
+    // On dismiss
+    const { data } = await modal.onDidDismiss();
+    if (!data) return; // CANCELLED
+
+    // Apply columns
+    const userColumns = (data || []).filter((c) => c.canHide === false || c.visible).map((c) => c.name) || [];
+    this.displayedColumns = RESERVED_START_COLUMNS.concat(userColumns).concat(RESERVED_END_COLUMNS);
+    this.markForCheck();
+
+    // Update user settings
+    await this.savePageSettings(userColumns, SETTINGS_DISPLAY_COLUMNS);
+  }
+
+  trackByFn(index: number, row: TableElement<T>) {
+    return row.id;
+  }
+
+  doRefresh(event?: CompletableEvent) {
+    this.emitRefresh(event);
+
+    // When target wait for a complete (e.g. IonRefresher)
+    if (event?.target && event.target.complete) {
+      setTimeout(async () => {
+        await this.waitIdle();
+        event.target.complete();
+      });
+    }
+  }
+
+  getCurrentColumns(): ColumnItem[] {
+    const hiddenColumns = this.columns.slice(RESERVED_START_COLUMNS.length).filter((name) => this.displayedColumns.indexOf(name) === -1);
+    return this.displayedColumns
+      .concat(hiddenColumns)
+      .filter((name) => !RESERVED_START_COLUMNS.includes(name) && !RESERVED_END_COLUMNS.includes(name) && !this.excludesColumns.includes(name))
+      .map((name) => ({
+        name,
+        label: this.getI18nColumnName(name),
+        visible: this.displayedColumns.indexOf(name) !== -1,
+        canHide: this.getRequiredColumns().indexOf(name) === -1,
+      }));
+  }
+
+  escapeEditingRow(event?: Event, row?: TableElement<T>) {
+    row = row || this.editedRow;
+    if (!row || !row.editing) return;
+
+    // DEBUG
+    //console.debug('[app-table] Cancel the row (keydown.escape)');
+
+    if (event) {
+      // Avoid to cancel the editor
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    // If new row (no id)
+    if (row.id === -1) {
+      if (row.validator) {
+        // If pending: Wait end of validation, then loop
+        if (row.pending) {
+          AppFormUtils.waitWhilePending(row.validator).then(() => this.escapeEditingRow(event, row));
+          return;
+        }
+
+        // Row is invalid: delete the row
+        if (row.invalid) {
+          this.deleteNewRow(event, row);
+          return;
+        }
+      }
+    }
+    // If the row exists (has an id)
+    else {
+      // need to call cancel function (if confirmation will be called before)
+      if (this.confirmBeforeCancel) {
+        this.cancelExistingRow(event, row, { keepEditing: false });
+        return;
+      }
+    }
+
+    // By default, try to confirm the row
+    this.confirmEditCreate(event, row);
+  }
+
+  translateFormPath(path: string): string {
+    // Can be overridden by subclasses, to resolve all field name
+
+    // Use columns key, has default name
+    const i18nColumnKey = this.getI18nColumnName(path);
+    return this.translate?.instant(i18nColumnKey) || i18nColumnKey;
+  }
+
+  /* -- protected method -- */
+
+  protected editRow(event: Event | undefined, row: TableElement<T>, opts?: { focusColumn?: string }): boolean {
+    if (!this._enabled || !this.inlineEdition) return false;
+    if (this.editedRow === row) return true; // Already the edited row
+    if (event?.defaultPrevented) return false;
+
+    const confirmed = this.confirmEditCreate();
+    if (!confirmed) return false;
+
+    if (!row.editing && !this.loading) {
+      this.focusColumn = (opts && opts.focusColumn) || this.focusColumn;
+      this._dataSource.startEdit(row);
+    }
+    this.editedRow = row;
+    this.onStartEditingRow.emit(row);
+    return true;
+  }
+
+  /**
+   * Try to select row, by row.id, or by data. WIll use EntityUtils.equals()
+   *
+   * @param id
+   * @param data
+   * @protected
+   */
+  protected async selectRowByIdOrData(id: number, data?: T): Promise<boolean> {
+    let done = false;
+    try {
+      // Select by row id (if NOT a new row)
+      if (isNotNil(id) || id !== -1) {
+        done = await this.selectRowById(id);
+        if (done) return true;
+        console.warn('[app-table] Save: Cannot reselect row by row.id: ', id);
+      }
+
+      // Try by data
+      if (data) {
+        done = await this.selectRowByData(data);
+        if (done) return true;
+        console.warn('[app-table] Save: Cannot reselect row by data: ', data);
+      }
+
+      return false;
+    } catch (err) {
+      // Log, but continue
+      console.error((err && err.message) || err);
+      return false;
+    }
+  }
+
+  /**
+   * return the selected row if unique in selection
+   */
+  protected get singleSelectedRow(): TableElement<T> {
+    return this.selection.selected?.length === 1 ? this.selection.selected[0] : undefined;
+  }
+
+  protected async canDeleteRows(rows: TableElement<T>[], opts?: { interactive?: boolean }): Promise<boolean> {
+    // Check using emitter
+    if (this.onBeforeDeleteRows.observed) {
+      try {
+        const canDelete = await emitPromiseEvent(this.onBeforeDeleteRows, 'canDelete', {
+          detail: { rows },
+        });
+        if (!canDelete) return false;
+      } catch (err) {
+        if (err === 'CANCELLED') return false; // User cancel
+        console.error('Error while checking if can delete rows', err);
+        throw err;
+      }
+    }
+
+    // Ask user confirmation
+    if (this.confirmBeforeDelete && (!opts || opts.interactive !== false)) {
+      return this.askDeleteConfirmation(null, rows);
+    }
+    return true;
+  }
+
+  protected async canCancelRows(rows?: TableElement<T>[], opts?: { interactive?: boolean }): Promise<boolean> {
+    // Get dirty rows
+    rows = rows || this.dataSource.getRows().filter((row) => row.validator?.dirty);
+
+    if (isEmptyArray(rows)) return true; // No dirty: OK
+
+    // Check using emitter
+    if (this.onBeforeCancelRows.observed) {
+      try {
+        const isCancel = await emitPromiseEvent(this.onBeforeCancelRows, 'canCancel', {
+          detail: { rows },
+        });
+        if (!isCancel) return false;
+      } catch (err) {
+        if (err === 'CANCELLED') return false; // User cancel
+        console.error('Error while checking if can cancel rows', err);
+        throw err;
+      }
+    }
+
+    // Ask user confirmation
+    if (this.confirmBeforeCancel && (!opts || opts.interactive !== false)) {
+      return this.askCancelConfirmation(null, rows);
+    }
+    return true;
+  }
+
+  protected async saveBeforeAction(saveAction: SaveActionType): Promise<boolean> {
+    if (!this.dirty) {
+      // Continue without save
+      return true;
+    }
+
+    let save: boolean;
+    switch (saveAction) {
+      case 'delete':
+        save = this.saveBeforeDelete;
+        break;
+      case 'filter':
+        save = this.saveBeforeFilter;
+        break;
+      case 'sort':
+        save = this.saveBeforeSort;
+        break;
+      default:
+        save = true;
+    }
+
+    // Default behavior
+    let confirmed = true;
+
+    if (save) {
+      if (this.onBeforeSave.observed) {
+        // Ask confirmation
+        try {
+          const res = await emitPromiseEvent(this.onBeforeSave, 'beforeSave', {
+            detail: { action: saveAction, valid: this.valid },
+          });
+          confirmed = res.confirmed;
+          save = res.save;
+        } catch (err) {
+          if (err === 'CANCELLED') return false; // User cancel
+          console.error('Error while checking if can delete rows', err);
+          throw err;
+        }
+      }
+    }
+
+    if (confirmed) {
+      if (save) {
+        // User confirmed save
+        const saved = await this.save();
+        this.markAsDirty(); // Restore dirty flag
+        return saved;
+      }
+      return true; // No save but continue action
+    }
+
+    return false; // User cancel the action
+  }
+
+  /**
+   * Open a row detail view. By default, will to open row detail page.
+   * Can be overridden by subclasses, BUT prefer to subscribe on onOpenRow
+   *
+   * @param id
+   * @param row
+   * @protected
+   */
+  protected async openRow(id: ID, row: TableElement<T>): Promise<boolean> {
+    if (this.allowRowDetail) {
+      if (this.debug && this.dirty) {
+        console.warn('[table] Opening row details, but table has unsaved changes!');
+      }
+
+      if (this.onOpenRow.observed) {
+        // Clear selection (because next route can change the current table content)
+        this.selection.clear();
+        this.onOpenRow.emit(row);
+        return true;
+      }
+
+      // No ID defined: unable to open details
+      if (isNil(id)) {
+        console.warn('[table] Opening row details, but data has no id!');
+        return false;
+      }
+
+      // Clear selection (because next route can change the current table content)
+      this.selection.clear();
+
+      return this.navController.navigateForward(`${this.router.url}/${id}`, {
+        queryParams: {},
+      });
+    }
+    return false;
+  }
+
+  protected async openNewRowDetail(event?: any): Promise<boolean> {
+    if (!this.allowRowDetail) return false;
+
+    if (this.onNewRow.observed) {
+      this.onNewRow.emit(event);
+      return true;
+    }
+
+    // Clear selection (because next route can change the current table content)
+    this.selection.clear();
+
+    return this.navController.navigateForward(`${this.router.url}/new`);
+  }
+
+  // can be overridden to add more required columns
+  protected getRequiredColumns() {
+    return DEFAULT_REQUIRED_COLUMNS;
+  }
+
+  protected getUserColumns(): string[] {
+    return this.getPageSettings(SETTINGS_DISPLAY_COLUMNS);
+  }
+
+  protected getSortedColumn(): MatSortable {
+    const data = this.getPageSettings(SETTINGS_SORTED_COLUMN);
+    const parts = data && data.split(':');
+    if (parts && parts.length === 2 && this.columns.includes(parts[0])) {
+      return { id: parts[0], start: parts[1] === 'desc' ? 'desc' : 'asc', disableClear: false };
+    }
+    if (this.defaultSortBy) {
+      return { id: this.defaultSortBy, start: this.defaultSortDirection || 'asc', disableClear: false };
+    }
+    return { id: 'id', start: 'asc', disableClear: false };
+  }
+
+  protected getPageSize(): number {
+    const pageSize = this.getPageSettings<number>(SETTINGS_PAGE_SIZE);
+    return pageSize || this.defaultPageSize;
+  }
+
+  protected getDisplayColumns(): string[] {
+    let userColumns = this.getUserColumns();
+
+    // No user override
+    if (!userColumns) {
+      // Return default, without columns to hide
+      return this.columns.filter((column) => !this.excludesColumns.includes(column));
+    }
+
+    // Get fixed start columns
+    const fixedStartColumns = this.columns.filter((c) => RESERVED_START_COLUMNS.includes(c));
+
+    // Remove end columns
+    const fixedEndColumns = this.columns.filter((c) => RESERVED_END_COLUMNS.includes(c));
+
+    // Remove fixed columns from user columns
+    userColumns = userColumns.filter((c) => !fixedStartColumns.includes(c) && !fixedEndColumns.includes(c) && this.columns.includes(c));
+
+    // Add required columns if missing
+    userColumns.push(
+      ...this.getRequiredColumns().filter((c) => !fixedStartColumns.includes(c) && !fixedEndColumns.includes(c) && !userColumns.includes(c))
+    );
+
+    return (
+      fixedStartColumns
+        .concat(userColumns)
+        .concat(fixedEndColumns)
+        // Remove columns to hide
+        .filter((column) => !this.excludesColumns.includes(column))
+    );
+  }
+
+  /**
+   * Recompute display columns
+   *
+   * @protected
+   */
+  protected updateColumns() {
+    this.displayedColumns = this.getDisplayColumns();
+    if (!this.loading) this.markForCheck();
+  }
+
+  protected registerSubscription(sub: Subscription) {
+    this._subscription.add(sub);
+  }
+
+  protected unregisterSubscription(sub: Subscription) {
+    this._subscription.remove(sub);
+  }
+
+  protected registerAutocompleteField<E = any, EF = any>(
+    fieldName: string,
+    options?: MatAutocompleteFieldAddOptions<E, EF>
+  ): MatAutocompleteFieldConfig<E, EF> {
+    return this._autocompleteConfigHolder.add(fieldName, options);
+  }
+
+  protected getI18nColumnName(columnName: string) {
+    return (this.i18nColumnPrefix || '') + changeCaseToUnderscore(columnName).toUpperCase();
+  }
+
+  protected generateTableId() {
+    // noinspection JSNonASCIINames
+    const meta = this.constructor['ɵcmp'];
+    // Get a component unique name - See https://stackoverflow.com/questions/60114682/how-to-access-components-unique-encapsulation-id-in-angular-9
+    const componentId = (meta && (meta.selectors?.[0] || meta.id)) || this.constructor.name;
+    const id =
+      this.location
+        .path(true)
+        .replace(/[?].*$/g, '')
+        .replace(/\/\d+/g, '_id') +
+      '_' +
+      componentId;
+    //if (this.debug) console.debug('[table] id = ' + id);
+    return id;
+  }
+
+  protected async addRowToTable(
+    insertAt?: number,
+    opts?: { focusColumn?: string; editing?: boolean; emitEvent?: boolean }
+  ): Promise<TableElement<T> | undefined> {
+    // Try to finish edited row first
+    if (!this.confirmEditCreate()) {
+      console.warn('[table] Cannot add new row, because the previous edited row cannot be confirmed');
+      return undefined;
+    }
+
+    const editing = this.inlineEdition && opts?.editing !== false; // true by default, if inlineEdition
+
+    const row = await this._dataSource.createNew(insertAt, { editing });
+    if (!row) return undefined;
+
+    if (row.editing) {
+      // Update focused column
+      this.focusFirstColumn = true;
+      this.focusColumn = opts?.focusColumn || this.firstUserColumn;
+
+      // Emit start editing event
+      this.editedRow = row;
+      this.onStartEditingRow.emit(row);
+    }
+
+    this.totalRowCount++;
+    this.visibleRowCount++;
+
+    this.markAsDirty({ emitEvent: false /*markForCheck() is called just after*/ });
+
+    // Emit event
+    if (!opts || opts.emitEvent !== false) this.markForCheck();
+
+    return row;
+  }
+
+  protected registerCellValueChanges(name: string, formPath?: string, emitInitialValue?: boolean): Observable<any> {
+    formPath = formPath || name;
+    emitInitialValue = emitInitialValue || false;
+    let def = this._cellValueChangesDefs[name];
+    if (def && (def.formPath !== formPath || def.emitInitialValue !== emitInitialValue)) {
+      throw Error("Already register a cell value change for this name, with different 'formPath' or 'emitInitialValue'. Please use same arguments.");
+    }
+
+    // Not exists: register new definition
+    if (!def) {
+      if (this.debug) console.debug(`[table] New listener {${name}} for value changes on path ${formPath}`);
+      def = {
+        subject: new Subject<any>(),
+        subscription: null,
+        formPath,
+        emitInitialValue,
+      };
+      this._cellValueChangesDefs[name] = def;
+
+      // Start the listener, when editing starts
+      this.registerSubscription(this.onStartEditingRow.subscribe((row) => this.startCellValueChanges(name, row)));
+    }
+
+    return def.subject;
+  }
+
+  protected setShowColumn(columnName: string, show: boolean, opts?: { emitEvent?: boolean }) {
+    if (!this.excludesColumns.includes(columnName) !== show) {
+      if (!show) {
+        this.excludesColumns.push(columnName);
+      } else {
+        const index = this.excludesColumns.findIndex((value) => value === columnName);
+        if (index >= 0) this.excludesColumns.splice(index, 1);
+      }
+
+      // Recompute display columns
+      if (this.displayedColumns && (!opts || opts.emitEvent !== false)) {
+        this.updateColumns();
+      }
+    }
+  }
+
+  protected getShowColumn(columnName: string): boolean {
+    return !this.excludesColumns.includes(columnName);
+  }
+
+  protected startsWithUpperCase(input: string, search: string): boolean {
+    return input && input.toUpperCase().startsWith(search);
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected detectChanges() {
+    this.cd.detectChanges();
+  }
+
+  protected async askDeleteConfirmation(event?: Event, rows?: TableElement<T>[]): Promise<boolean> {
+    if (this.undoableDeletion) {
+      // Special message, for undoable deletion
+      return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.DELETE_ROW' : 'CONFIRM.DELETE_ROWS', this.alertCtrl, this.translate, event);
+    }
+    // Immediate deletion action
+    return Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event);
+  }
+
+  protected async askCancelConfirmation(event?: Event, rows?: TableElement<T>[]): Promise<boolean> {
+    return Alerts.askConfirmation(rows?.length === 1 ? 'CONFIRM.CANCEL_ROW' : 'CONFIRM.CANCEL_ROWS', this.alertCtrl, this.translate, event);
+  }
+
+  protected async askRestoreConfirmation(event?: Event): Promise<boolean> {
+    return Alerts.askActionConfirmation(this.alertCtrl, this.translate, false, event);
+  }
+
+  protected async showToast(opts: ShowToastOptions) {
+    if (!this.toastController) throw new Error("Missing toastController in component's constructor");
+    return Toasts.show(this.toastController, this.translate, opts);
+  }
+
+  protected resetError(opts?: { emitEvent?: boolean }) {
+    this.setError(undefined, opts);
+  }
+
+  protected getRowError(row?: TableElement<T>, opts?: FormErrorTranslateOptions): string {
+    row = row || this.editedRow;
+    if (!row || !this.formErrorAdapter) return undefined;
+
+    return this.formErrorAdapter.translateFormErrors(row.validator, {
+      ...this.errorTranslateOptions,
+      ...opts,
+    });
+  }
+
+  protected setError(value: string, opts?: { emitEvent?: boolean }) {
+    if (this.errorSubject.value !== value) {
+      this.errorSubject.next(value);
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  /**
+   * Compare data equality (default by id, using EntityUtils.equals())
+   * Can be overridden to add additional properties to compare
+   *
+   * @param d1
+   * @param d2
+   * @protected
+   */
+  protected equals(d1: T, d2: T): boolean {
+    return EntityUtils.equals(d1, d2, 'id');
+  }
+
+  protected markRowAsDirty(row?: TableElement<T>, opts?: { onlySelf?: boolean; emitEVent?: boolean }) {
+    row = row || this.editedRow;
+    if (row) row.validator?.markAsDirty(opts);
+    this.markAsDirty(opts);
+  }
+
+  protected getPageSettings<T = any>(propertyName?: string): T {
+    return this.settings.getPageSettings(this.settingsId, propertyName);
+  }
+
+  protected async savePageSettings(value: any, propertyName?: string) {
+    await this.settings.savePageSetting(this.settingsId, value, propertyName);
+  }
+
+  protected emitRefresh(value?: any) {
+    // Emit onRefresh if not closed (can happen if component is destroyed to early)
+    if (!!this.onRefresh && !this.onRefresh.closed) {
+      this.onRefresh.emit(value);
+    }
+  }
+
+  /**
+   * Initialize the permanent selection model
+   *
+   * @protected
+   */
+  protected initPermanentSelection() {
+    if (this.permanentSelection) throw new Error('initPermanentSelection() already called!');
+
+    this.permanentSelection = new SelectionModel<T>(true, []);
+
+    // Listen sort change
+    this.registerSubscription(
+      this.onSort.subscribe(() => (this.permanentSelectionChangedPrevented = true)) // prevent selection change on sort
+    );
+
+    // Listen datasource update
+    this.registerSubscription(
+      this.dataSource.rowsSubject
+        // restore the 'adding' selection (for example after a page or sort change)
+        .subscribe((rows) => {
+          this.permanentSelectionChangedPrevented = true;
+          try {
+            const permanentSelectionIds = (this.permanentSelection.selected || []).map(EntityUtils.getId);
+            this.selection.setSelection(...rows.filter((row) => permanentSelectionIds.includes(AppTableUtils.getEntityId(row))));
+            this.markForCheck();
+          } finally {
+            this.permanentSelectionChangedPrevented = false;
+          }
+        })
+    );
+
+    // Listen selection change
+    this.registerSubscription(
+      this.selection.changed.pipe(filter(() => !this.permanentSelectionChangedPrevented)).subscribe((selectionChange) => {
+        // add to selection
+        if (selectionChange.added.length) {
+          this.permanentSelection.setSelection(
+            ...(this.permanentSelection.selected || [])
+              // Add new elements
+              .concat(...AppTableUtils.getEntities(selectionChange.added).filter(EntityUtils.hasId))
+              // Avoid duplicated entities (Mantis #55351)
+              .filter(EntityUtils.arrayDistinctFilterFn)
+          );
+        }
+        // remove from selection
+        if (selectionChange.removed.length) {
+          const removedIds = AppTableUtils.getEntityIds(selectionChange.removed);
+          this.permanentSelection.setSelection(
+            ...(this.permanentSelection.selected || []).filter((entity) => EntityUtils.hasId(entity) && !removedIds.includes(entity.id))
+          );
+        }
+        this.markForCheck();
+      })
+    );
+  }
+
+  /* -- private method -- */
+
+  private async listenSortAndPaginationEvents() {
+    if (!this.table) {
+      // DEBUG only -- alert user that table not found in template
+      if (this.debug) {
+        setTimeout(
+          () =>
+            !this.table &&
+            console.warn(`[table] Missing <mat-table> in the HTML template (after waiting 500ms)! Component: ${this.constructor.name}`),
+          500
+        );
+      }
+
+      // Make sure to wait the table
+      await waitFor(() => !!this.table, { stop: this.destroySubject, stopError: false /*avoid error when destorying the table*/ });
+    }
+
+    this.registerSubscription(
+      merge(
+        // Listen sort events
+        (this.sort &&
+          this.sort.sortChange.pipe(
+            filter(() => !this.sort.disabled),
+            mergeMap(async () => this.saveBeforeAction('sort')),
+            filter((res) => res === true),
+            // Save sort in settings
+            tap(() => {
+              const value = [this.sort.active, this.sort.direction || 'asc'].join(':');
+              this.savePageSettings(value, SETTINGS_SORTED_COLUMN);
+            })
+          )) ||
+          EMPTY,
+
+        // Listen paginator events
+        (this.paginator &&
+          this.paginator.page.pipe(
+            mergeMap((_) => this.saveBeforeAction('sort')),
+            filter((saved) => saved === true),
+            // Save page size in settings
+            tap(() => this.savePageSettings(this.paginator.pageSize, SETTINGS_PAGE_SIZE))
+          )) ||
+          EMPTY
+      )
+        // Refresh on any sort or paginator events
+        .subscribe((value) => {
+          this.onSort.emit(value);
+          this.emitRefresh(value);
+        })
+    );
+
+    // If the user changes the sort order, reset back to the first page.
+    if (this.sort && this.paginator) {
+      this.registerSubscription(this.sort.sortChange.pipe(filter(() => !this.sort.disabled)).subscribe(() => (this.paginator.pageIndex = 0)));
+    }
+  }
+
+  private async editRowById(event: Event | undefined, id: number, opts?: { focusColumn?: string }) {
+    if (id < 0) return;
+    if (id >= this.visibleRowCount) {
+      this.addRow(event, undefined, { ...opts, editing: true });
+    } else {
+      const row = await this.dataSource.getRow(id);
+      this.editRow(event, row, opts);
+    }
+  }
+
+  private setLoading(value: boolean, opts?: { emitEvent?: boolean }) {
+    if (!this.loadingSubject.closed && this.loadingSubject.value !== value) {
+      this.loadingSubject.next(value);
+
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  private deleteNewRow(event: Event | undefined, row: TableElement<T>) {
+    // Make sure row will be cancelled, and NOT deleted
+    if (row.id !== -1) throw new Error('Row must have id = -1');
+    event?.stopPropagation();
+
+    this.selection.clear();
+    this.editedRow = undefined; // unselect row
+    this._dataSource.cancelOrDelete(row);
+    this.resetError();
+
+    this.onCancelOrDeleteRow.next(row);
+    this.totalRowCount--;
+    this.visibleRowCount--;
+  }
+
+  private deleteExistingRow(event: Event | null, row: TableElement<T>, opts?: { interactive?: boolean }) {
+    // Make sure row will be cancelled, and NOT deleted
+    if (row.id === -1) throw new Error('Row must have an id');
+
+    if (event?.defaultPrevented) return 0; // SKip
+    event?.preventDefault();
+
+    this.deleteRow(null, row, opts);
+  }
+
+  private cancelExistingRow(event: Event | undefined, row: TableElement<T>, opts?: { interactive?: boolean; keepEditing?: boolean }) {
+    // Make sure row will be cancelled, and NOT deleted
+    if (row.id === -1 || !row.editing) throw new Error('Row cannot be canceling, but only deleting');
+
+    const confirmed = !opts || opts.interactive !== false;
+
+    // Ask user confirmation, if cancel
+    if (!confirmed && row.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observed)) {
+      event?.stopPropagation();
+      this.canCancelRows([row], opts).then((confirm) => {
+        // If confirmed, loop
+        if (confirm) this.cancelExistingRow(event, row, { interactive: false });
+      });
+      return;
+    }
+
+    const keepEditing = row.editing && (!opts || opts.keepEditing !== false);
+    this.editedRow = undefined; // unselect row
+    this._dataSource.cancelOrDelete(row);
+    this.onCancelOrDeleteRow.next(row);
+
+    // Mark row as pristine
+    this.checkIfRowPristine(row);
+
+    // Restore editing state
+    if (keepEditing) {
+      this.editRow(undefined, row);
+    }
+  }
+
+  private async checkIfRowPristine(row: TableElement<T>, opts?: { emitEvent?: boolean; onlySelf?: boolean }) {
+    // Mark row as pristine
+    const markRowAsPristine = this.dataSource?.config.restoreOriginalDataOnCancel === true;
+    if (markRowAsPristine) {
+      row.validator?.markAsPristine();
+
+      // Check if table is now pristine
+      if (!opts || opts.onlySelf !== true) {
+        await this.checkIfPristine(opts);
+      }
+    }
+  }
+
+  private async checkIfPristine(opts?: { emitEvent?: boolean }) {
+    if (!this.dirty) return; // Already pristine
+
+    const rows = this._dataSource.getRows();
+    const pristine = (rows || []).findIndex((row) => row.dirty) === -1;
+    if (pristine) this.markAsPristine(opts);
+  }
+
+  private applyFilter(filter: F, opts: { emitEvent?: boolean }) {
+    if (this.debug) console.debug('[table] Applying filter', filter);
+    this._filter = filter;
+    if (opts && opts.emitEvent) {
+      if (this.paginator && this.paginator.pageIndex > 0) {
+        this.paginator.pageIndex = 0;
+      }
+      this.emitRefresh();
+    }
+  }
+
+  private listenDataSourceLoading(dataSource: EntitiesTableDataSource<T, F, ID>) {
+    if (!dataSource) throw new Error('[table] dataSource not set !');
+
+    // Cleaning previous subscription on datasource
+    if (isNotNil(this._dataSourceLoadingSubscription)) {
+      if (this.debug) console.debug('[table] Many call to listenDatasource(): Cleaning previous subscriptions...');
+      this._dataSourceLoadingSubscription.unsubscribe();
+      this.unregisterSubscription(this._dataSourceLoadingSubscription);
+    }
+
+    // Propage loading to table
+    this._dataSourceLoadingSubscription = this._dataSource.loadingSubject
+      .pipe(
+        filter(isNotNil), // filter out 'undefined'
+        distinctUntilChanged(),
+
+        // If changed to True: propagate as soon as possible
+        tap((loading) => loading && this.setLoading(true)),
+
+        // If changed to False: wait 250ms before propagate (to make sure the spinner has been displayed)
+        debounceTime(250),
+        tap((loading) => !loading && this.setLoading(false))
+      )
+      .subscribe();
+    this.registerSubscription(this._dataSourceLoadingSubscription);
+  }
+
+  private startCellValueChanges(name: string, row: TableElement<T>) {
+    const def = this._cellValueChangesDefs[name];
+    if (!def) {
+      console.warn('[table] Listener with name {' + name + '} not registered! Please call registerCellValueChanges() before;');
+      return;
+    }
+    // Stop previous subscription
+    if (def.subscription) {
+      def.subscription.unsubscribe();
+      def.subscription = null;
+    } else {
+      if (this.debug) console.debug(`[table] Start values changes on row path {${def.formPath}}`);
+    }
+
+    // Listen value changes, and redirect to event emitter
+    const control = row.validator && AppFormUtils.getControlFromPath(row.validator, def.formPath);
+    if (!control) {
+      console.warn(`[table] Could not listen cell changes: no validator or invalid form path {${def.formPath}}`);
+    } else {
+      def.subscription = control.valueChanges
+        .pipe(
+          // don't emit if control is disabled
+          filter(() => control.enabled)
+        )
+        .subscribe((value) => def.subject.next(value));
+
+      // Emit the actual value
+      if (def.emitInitialValue !== false) {
+        def.subject.next(control.value);
+      }
+    }
+  }
+
+  private stopCellValueChanges(name: string, destroy?: boolean) {
+    const def = this._cellValueChangesDefs[name];
+    if (!def) return;
+    if (def.subscription) {
+      if (this.debug) console.debug('[table] Stop value changes on row path {' + def.formPath + '}');
+      def.subscription.unsubscribe();
+      def.subscription = null;
+    }
+    if (destroy && def.subject) {
+      def.subject.complete();
+      def.subject.unsubscribe();
+    }
+  }
+}