From 6c6a42b68b9c7c55ae48c74ce30ba75a9c7aec76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 1 Oct 2021 20:44:18 +0300
Subject: [PATCH] Refactor complete

---
 .../active-fields-listing.component.html      |  89 +++++++-------
 .../active-fields-listing.component.scss      |  28 ++---
 .../active-fields-listing.component.ts        |  80 ++++---------
 .../screens/audit/audit-screen.component.html |  34 +++---
 .../screens/audit/audit-screen.component.ts   |  36 ++----
 ...r-attributes-listing-screen.component.html |  63 +++++-----
 ...ier-attributes-listing-screen.component.ts |  33 +-----
 ...e-attributes-listing-screen.component.html | 109 ++++++++---------
 ...e-attributes-listing-screen.component.scss |   6 +-
 ...ile-attributes-listing-screen.component.ts |  75 +++---------
 .../user-listing-screen.component.html        |  67 +++++------
 .../user-listing-screen.component.scss        |   4 -
 .../user-listing-screen.component.ts          |  23 ++--
 ...t-dossier-deleted-documents.component.html |  72 ++++++-----
 ...t-dossier-deleted-documents.component.scss |   8 +-
 ...dit-dossier-deleted-documents.component.ts |  40 ++-----
 .../search-screen.component.html              | 112 +++++++++---------
 .../search-screen.component.scss              |  10 +-
 .../search-screen/search-screen.component.ts  |  29 ++---
 apps/red-ui/src/assets/i18n/en.json           |   2 +-
 20 files changed, 356 insertions(+), 564 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index fba752dd7..dd8dbc600 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -1,5 +1,4 @@
 <iqser-table
-    [actionsTemplate]="actionsTemplate"
     [bulkActions]="bulkActions"
     [itemMouseEnterFn]="itemMouseEnterFn"
     [itemMouseLeaveFn]="itemMouseLeaveFn"
@@ -54,54 +53,50 @@
     </ng-container>
 </ng-template>
 
-<ng-template #actionsTemplate let-field="entity">
-    <div class="action-buttons">
-        <iqser-circle-button
-            (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
-            [removeTooltip]="true"
-            [tooltip]="'file-attributes-csv-import.action.remove' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
+<ng-template #tableItemTemplate let-field="entity">
+    <div>
+        <div class="cell">
+            <iqser-editable-input
+                (save)="field.name = $event"
+                [buttonsType]="circleButtonTypes.dark"
+                [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
+                [class]="'w-200'"
+                [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
+                [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
+                [value]="field.name"
+            ></iqser-editable-input>
+        </div>
 
-<ng-template #labelTemplate let-field="entity">
-    <div class="cell">
-        <iqser-editable-input
-            (save)="field.name = $event"
-            [buttonsType]="circleButtonTypes.dark"
-            [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
-            [class]="'w-200'"
-            [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
-            [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
-            [value]="field.name"
-        ></iqser-editable-input>
-    </div>
-</ng-template>
+        <div class="cell">
+            <div class="iqser-input-group">
+                <mat-form-field class="no-label">
+                    <mat-select [(ngModel)]="field.type">
+                        <mat-option *ngFor="let type of typeOptions" [value]="type">
+                            {{ translations[type] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        </div>
 
-<ng-template #typeTemplate let-field="entity">
-    <div class="cell">
-        <div class="iqser-input-group">
-            <mat-form-field class="no-label">
-                <mat-select [(ngModel)]="field.type">
-                    <mat-option *ngFor="let type of typeOptions" [value]="type">
-                        {{ translations[type] | translate }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
+        <div class="cell center">
+            <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
+        </div>
+
+        <div class="cell center">
+            <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
+        </div>
+
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
+                    [removeTooltip]="true"
+                    [tooltip]="'file-attributes-csv-import.action.remove' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
         </div>
     </div>
 </ng-template>
-
-<ng-template #readonlyTemplate let-field="entity">
-    <div class="cell center">
-        <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
-    </div>
-</ng-template>
-
-<ng-template #primaryTemplate let-field="entity">
-    <div class="cell center">
-        <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index d87b9c85d..053574610 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -30,19 +30,19 @@
 
     cdk-virtual-scroll-viewport {
         height: calc(100% - 80px) !important;
-
-        .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-            iqser-editable-input:not(.editing) {
-                padding-left: 12px;
-            }
-
-            iqser-editable-input::ng-deep .edit-button {
-                display: none;
-            }
-
-            &:hover iqser-editable-input::ng-deep .edit-button {
-                display: block;
-            }
-        }
+    }
+}
+
+.cell {
+    iqser-editable-input:not(.editing) {
+        padding-left: 12px;
+    }
+
+    iqser-editable-input::ng-deep .edit-button {
+        display: none;
+    }
+
+    &:hover iqser-editable-input::ng-deep .edit-button {
+        display: block;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index b267c26a1..faa19b678 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -1,16 +1,4 @@
-import {
-    Component,
-    EventEmitter,
-    forwardRef,
-    Injector,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { Component, EventEmitter, forwardRef, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { Field } from '../file-attributes-csv-import-dialog.component';
 import { FileAttributeConfigTypes } from '@redaction/red-ui-http';
 import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
@@ -23,16 +11,35 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => ActiveFieldsListingComponent) }]
 })
-export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges, OnInit {
+export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
-    tableColumnConfigs: TableColumnConfig<Field>[];
+    readonly tableColumnConfigs: TableColumnConfig<Field>[] = [
+        {
+            label: _('file-attributes-csv-import.table-col-names.name'),
+            class: 'name',
+            width: 'minmax(0, 350px)'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.type'),
+            width: '150px'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.read-only'),
+            class: 'flex-center',
+            leftIcon: 'red:read-only',
+            width: 'auto'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.primary'),
+            class: 'flex-center',
+            rightIcon: 'red:status-info',
+            rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
+            width: 'auto'
+        }
+    ];
     readonly typeOptions = Object.keys(FileAttributeConfigTypes);
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
-    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<never>;
-    @ViewChild('primaryTemplate', { static: true }) primaryTemplate: TemplateRef<never>;
     @Input() entities: Field[];
     @Output() readonly entitiesChange = new EventEmitter<Field[]>();
     @Output() readonly setHoveredColumn = new EventEmitter<string>();
@@ -42,10 +49,6 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         super(_injector);
     }
 
-    ngOnInit(): void {
-        this._configureTableColumns();
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.entities) {
             this.entitiesService.setEntities(this.entities);
@@ -80,35 +83,4 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
 
     itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn);
     itemMouseLeaveFn = () => this.setHoveredColumn.emit();
-
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('file-attributes-csv-import.table-col-names.name'),
-                class: 'name',
-                template: this.labelTemplate,
-                width: 'minmax(0, 350px)'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.type'),
-                template: this.typeTemplate,
-                width: '150px'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.read-only'),
-                class: 'flex-center',
-                leftIcon: 'red:read-only',
-                template: this.readonlyTemplate,
-                width: 'auto'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.primary'),
-                class: 'flex-center',
-                rightIcon: 'red:status-info',
-                rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
-                template: this.primaryTemplate,
-                width: 'auto'
-            }
-        ];
-    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 9311d73f9..0f97a58ed 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -97,24 +97,20 @@
     </div>
 </ng-template>
 
-<ng-template #messageTemplate let-log="entity">
-    <div class="cell">
-        {{ log.message }}
+<ng-template #tableItemTemplate let-log="entity">
+    <div>
+        <div class="cell">
+            {{ log.message }}
+        </div>
+
+        <div class="small-label cell">
+            {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
+        </div>
+
+        <div class="user-column cell">
+            <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
+        </div>
+
+        <div [translate]="translations[log.category]" class="cell"></div>
     </div>
 </ng-template>
-
-<ng-template #dateTemplate let-log="entity">
-    <div class="small-label cell">
-        {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
-    </div>
-</ng-template>
-
-<ng-template #userTemplate let-log="entity">
-    <div class="user-column cell">
-        <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #categoryTemplate let-log="entity">
-    <div [translate]="translations[log.category]" class="cell"></div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
index 635d4b141..ad2c4c828 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { AuditControllerService, AuditResponse, AuditSearchRequest, IAudit } from '@redaction/red-ui-http';
 import { Moment } from 'moment';
@@ -22,15 +22,16 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
     readonly ALL_USERS = _('audit-screen.all-users');
     readonly translations = auditCategoriesTranslations;
     readonly currentUser = this._userService.currentUser;
-    @ViewChild('messageTemplate', { static: true }) messageTemplate: TemplateRef<unknown>;
-    @ViewChild('dateTemplate', { static: true }) dateTemplate: TemplateRef<unknown>;
-    @ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<unknown>;
-    @ViewChild('categoryTemplate', { static: true }) categoryTemplate: TemplateRef<unknown>;
     filterForm: FormGroup;
     categories: string[] = [];
     userIds: Set<string>;
     logs: AuditResponse;
-    tableColumnConfigs: TableColumnConfig<Audit>[];
+    readonly tableColumnConfigs: TableColumnConfig<Audit>[] = [
+        { label: _('audit-screen.table-col-names.message') },
+        { label: _('audit-screen.table-col-names.date') },
+        { label: _('audit-screen.table-col-names.user'), class: 'user-column' },
+        { label: _('audit-screen.table-col-names.category') }
+    ];
     readonly tableHeaderLabel = _('audit-screen.table-header.title');
     private _previousFrom: Moment;
     private _previousTo: Moment;
@@ -69,32 +70,9 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._fetchData();
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('audit-screen.table-col-names.message'),
-                template: this.messageTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.date'),
-                template: this.dateTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.user'),
-                class: 'user-column',
-                template: this.userTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.category'),
-                template: this.categoryTemplate
-            }
-        ];
-    }
-
     private _updateDateFilters(value): boolean {
         if (applyIntervalConstraints(value, this._previousFrom, this._previousTo, this.filterForm, 'from', 'to')) {
             return true;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 9635022f1..def1dfab3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -22,7 +22,6 @@
         <div class="content-container">
             <iqser-table
                 (noDataAction)="openAddEditAttributeDialog(null)"
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [headerTemplate]="headerTemplate"
                 [itemSize]="50"
@@ -65,38 +64,36 @@
     </div>
 </ng-template>
 
-<ng-template #actionsTemplate let-attribute="entity">
-    <div *ngIf="currentUser.isAdmin" class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditAttributeDialog($event, attribute)"
-            [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
+<ng-template #tableItemTemplate let-attribute="entity">
+    <div>
+        <div class="cell">
+            {{ attribute.label }}
+        </div>
 
-        <iqser-circle-button
-            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-            [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
-
-<ng-template #labelTemplate let-attribute="entity">
-    <div class="cell">
-        {{ attribute.label }}
-    </div>
-</ng-template>
-
-<ng-template #placeholderTemplate let-attribute="entity">
-    <div class="cell small-label">
-        {{ attribute.placeholder }}
-    </div>
-</ng-template>
-
-<ng-template #typeTemplate let-attribute="entity">
-    <div class="cell small-label">
-        {{ translations[attribute.type] | translate }}
+        <div class="cell small-label">
+            {{ attribute.placeholder }}
+        </div>
+
+        <div class="cell small-label">
+            {{ translations[attribute.type] | translate }}
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditAttributeDialog($event, attribute)"
+                    [tooltip]="'dossier-attributes-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+                    [tooltip]="'dossier-attributes-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index 09cd2466f..d087bb15a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit } from '@angular/core';
 import {
     CircleButtonTypes,
     DefaultListingServices,
@@ -31,10 +31,11 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     readonly currentUser = this._userService.currentUser;
     readonly translations = dossierAttributeTypesTranslations;
     readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[];
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-    @ViewChild('placeholderTemplate', { static: true }) placeholderTemplate: TemplateRef<never>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
+    readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [
+        { label: _('dossier-attributes-listing.table-col-names.label'), sortByKey: 'label', width: '2fr' },
+        { label: _('dossier-attributes-listing.table-col-names.placeholder'), width: '2fr' },
+        { label: _('dossier-attributes-listing.table-col-names.type'), sortByKey: 'type' }
+    ];
 
     constructor(
         protected readonly _injector: Injector,
@@ -50,7 +51,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -75,27 +75,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('dossier-attributes-listing.table-col-names.label'),
-                sortByKey: 'label',
-                width: '2fr',
-                template: this.labelTemplate
-            },
-            {
-                label: _('dossier-attributes-listing.table-col-names.placeholder'),
-                width: '2fr',
-                template: this.placeholderTemplate
-            },
-            {
-                label: _('dossier-attributes-listing.table-col-names.type'),
-                sortByKey: 'type',
-                template: this.typeTemplate
-            }
-        ];
-    }
-
     private async _loadData() {
         this._loadingService.start();
         const attributes = await this._dossierAttributesService.getConfig();
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index ce9844247..61635162f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -21,7 +21,6 @@
 
         <div class="content-container">
             <iqser-table
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [headerTemplate]="headerTemplate"
                 [itemSize]="80"
@@ -75,64 +74,54 @@
     </div>
 </ng-template>
 
-<ng-template #actionsTemplate let-attribute="entity">
-    <div *ngIf="currentUser.isAdmin" class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditAttributeDialog($event, attribute)"
-            [tooltip]="'file-attributes-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
-        <iqser-circle-button
-            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-            [tooltip]="'file-attributes-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
-
-<ng-template #labelTemplate let-attribute="entity">
-    <div class="label cell">
-        <span>{{ attribute.label }}</span>
-    </div>
-</ng-template>
-
-<ng-template #typeTemplate let-attribute="entity">
-    <div [translate]="translations[attribute.type]" class="small-label cell"></div>
-</ng-template>
-
-<ng-template #readonlyTemplate let-attribute="entity">
-    <div class="center read-only cell">
-        <mat-icon
-            *ngIf="!attribute.editable"
-            [matTooltip]="'file-attributes-listing.read-only' | translate"
-            matTooltipPosition="above"
-            svgIcon="red:read-only"
-        ></mat-icon>
-    </div>
-</ng-template>
-
-<ng-template #csvColumnHeaderTemplate let-attribute="entity">
-    <div class="small-label cell">
-        {{ attribute.csvColumnHeader }}
-    </div>
-</ng-template>
-
-<ng-template #filterableTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
-    </div>
-</ng-template>
-
-<ng-template #displayedInFileListTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
-    </div>
-</ng-template>
-
-<ng-template #primaryAttributeTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+<ng-template #tableItemTemplate let-attribute="entity">
+    <div>
+        <div class="label cell">
+            <span>{{ attribute.label }}</span>
+        </div>
+
+        <div [translate]="translations[attribute.type]" class="small-label cell"></div>
+
+        <div class="center read-only cell">
+            <mat-icon
+                *ngIf="!attribute.editable"
+                [matTooltip]="'file-attributes-listing.read-only' | translate"
+                matTooltipPosition="above"
+                svgIcon="red:read-only"
+            ></mat-icon>
+        </div>
+
+        <div class="small-label cell">
+            {{ attribute.csvColumnHeader }}
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditAttributeDialog($event, attribute)"
+                    [tooltip]="'file-attributes-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+                    [tooltip]="'file-attributes-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 6b4d12879..14a44a51a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -1,10 +1,6 @@
 @use 'common-mixins';
 
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    &.center {
-        align-items: center;
-    }
-
+.cell {
     &.label span {
         @include common-mixins.line-clamp(1);
     }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index 70f0e6f2d..0a277efda 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -1,14 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    forwardRef,
-    Injector,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FileAttributesConfig, IFileAttributeConfig } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { ActivatedRoute } from '@angular/router';
@@ -42,14 +32,20 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     readonly currentUser = this._userService.currentUser;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[];
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<unknown>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<unknown>;
-    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<unknown>;
-    @ViewChild('csvColumnHeaderTemplate', { static: true }) csvColumnHeaderTemplate: TemplateRef<unknown>;
-    @ViewChild('filterableTemplate', { static: true }) filterableTemplate: TemplateRef<unknown>;
-    @ViewChild('displayedInFileListTemplate', { static: true }) displayedInFileListTemplate: TemplateRef<unknown>;
-    @ViewChild('primaryAttributeTemplate', { static: true }) primaryAttributeTemplate: TemplateRef<unknown>;
+    readonly tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[] = [
+        { label: _('file-attributes-listing.table-col-names.name'), sortByKey: 'searchKey', width: '2fr' },
+        { label: _('file-attributes-listing.table-col-names.type'), sortByKey: 'type' },
+        { label: _('file-attributes-listing.table-col-names.read-only'), sortByKey: 'editable', class: 'flex-center' },
+        { label: _('file-attributes-listing.table-col-names.csv-column') },
+        { label: _('file-attributes-listing.table-col-names.filterable'), class: 'flex-center' },
+        { label: _('file-attributes-listing.table-col-names.displayed-in-file-list'), class: 'flex-center' },
+        {
+            label: _('file-attributes-listing.table-col-names.primary'),
+            class: 'flex-center',
+            rightIcon: 'red:status-info',
+            rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip')
+        }
+    ];
     private _existingConfiguration: FileAttributesConfig;
     @ViewChild('fileInput') private _fileInput: ElementRef;
 
@@ -67,7 +63,6 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -123,46 +118,6 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('file-attributes-listing.table-col-names.name'),
-                sortByKey: 'searchKey',
-                width: '2fr',
-                template: this.labelTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.type'),
-                sortByKey: 'type',
-                template: this.typeTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.read-only'),
-                sortByKey: 'editable',
-                class: 'flex-center',
-                template: this.readonlyTemplate
-            },
-            { label: _('file-attributes-listing.table-col-names.csv-column'), template: this.csvColumnHeaderTemplate },
-            {
-                label: _('file-attributes-listing.table-col-names.filterable'),
-                class: 'flex-center',
-                template: this.filterableTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
-                class: 'flex-center',
-                template: this.displayedInFileListTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.primary'),
-                class: 'flex-center',
-                rightIcon: 'red:status-info',
-                rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip'),
-                template: this.primaryAttributeTemplate
-            }
-        ];
-    }
-
     private async _loadData() {
         this._loadingService.start();
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index a050c77b9..a2b46998f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -33,7 +33,6 @@
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <iqser-table
-                    [actionsTemplate]="actionsTemplate"
                     [bulkActions]="bulkActions"
                     [itemSize]="80"
                     [noMatchText]="'user-listing.no-match.title' | translate"
@@ -66,40 +65,36 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #nameTemplate let-user="entity">
-    <div class="cell">
-        <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #emailTemplate let-user="entity">
-    <div class="small-label cell">{{ user.email || '-' }}</div>
-</ng-template>
-
-<ng-template #activeTemplate let-user="entity">
-    <div class="center cell">
-        <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
-    </div>
-</ng-template>
-
-<ng-template #rolesTemplate let-user="entity">
-    <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
-</ng-template>
-
-<ng-template #actionsTemplate let-user="entity">
-    <div class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditUserDialog($event, user)"
-            [tooltip]="'user-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
-        <iqser-circle-button
-            (action)="openDeleteUsersDialog([user], $event)"
-            [disabled]="user.id === userService.currentUser.id"
-            [tooltip]="'user-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
+<ng-template #tableItemTemplate let-user="entity">
+    <div>
+        <div class="cell">
+            <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
+        </div>
+
+        <div class="small-label cell">{{ user.email || '-' }}</div>
+
+        <div class="center cell">
+            <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
+        </div>
+
+        <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
+
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditUserDialog($event, user)"
+                    [tooltip]="'user-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="openDeleteUsersDialog([user], $event)"
+                    [disabled]="user.id === userService.currentUser.id"
+                    [tooltip]="'user-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 5a09cdf01..097d651bc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -1,7 +1,3 @@
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell.center {
-    align-items: center;
-}
-
 .right-container {
     display: flex;
     width: 353px;
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index fa92bdd2f..ff0e8f244 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { UserService } from '@services/user.service';
 import { UserControllerService } from '@redaction/red-ui-http';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -32,13 +32,14 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     readonly currentUser = this.userService.currentUser;
     readonly canDeleteSelected$ = this._canDeleteSelected$;
     readonly tableHeaderLabel = _('user-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<User>[];
+    readonly tableColumnConfigs: TableColumnConfig<User>[] = [
+        { label: _('user-listing.table-col-names.name'), width: '2fr' },
+        { label: _('user-listing.table-col-names.email') },
+        { label: _('user-listing.table-col-names.active'), class: 'flex-center' },
+        { label: _('user-listing.table-col-names.roles') }
+    ];
     collapsedDetails = false;
     chartData: DoughnutChartConfig[] = [];
-    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
-    @ViewChild('emailTemplate', { static: true }) emailTemplate: TemplateRef<never>;
-    @ViewChild('activeTemplate', { static: true }) activeTemplate: TemplateRef<never>;
-    @ViewChild('rolesTemplate', { static: true }) rolesTemplate: TemplateRef<never>;
     @ViewChildren(InitialsAvatarComponent)
     private readonly _avatars: QueryList<InitialsAvatarComponent>;
 
@@ -60,7 +61,6 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -96,15 +96,6 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
         this.openDeleteUsersDialog(this.entitiesService.all.filter(u => this.isSelected(u)));
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            { label: _('user-listing.table-col-names.name'), template: this.nameTemplate, width: '2fr' },
-            { label: _('user-listing.table-col-names.email'), template: this.emailTemplate },
-            { label: _('user-listing.table-col-names.active'), class: 'flex-center', template: this.activeTemplate },
-            { label: _('user-listing.table-col-names.roles'), template: this.rolesTemplate }
-        ];
-    }
-
     private async _loadData() {
         this.entitiesService.setEntities(await this.userService.loadAllUsers());
         await this.userService.loadAllUsers();
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
index 019278fc4..81c1f8810 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
@@ -34,45 +34,41 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #filenameTemplate let-file="entity">
-    <div class="cell filename">
-        <span>{{ file.filename }}</span>
-    </div>
-</ng-template>
+<ng-template #tableItemTemplate let-file="entity">
+    <div>
+        <div class="cell filename">
+            <span>{{ file.filename }}</span>
+        </div>
 
-<ng-template #pagesTemplate let-file="entity">
-    <div class="cell stats-subtitle">
-        <div class="small-label">
-            <mat-icon svgIcon="red:pages"></mat-icon>
-            {{ file.numberOfPages }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #deletedDateTemplate let-file="entity">
-    <div class="cell">
-        <span class="small-label">{{ file.softDeleted | date: 'exactDate' }}</span>
-    </div>
-</ng-template>
-
-<ng-template #restoreDateTemplate let-file="entity">
-    <div class="cell">
-        <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
-        <div class="action-buttons">
-            <iqser-circle-button
-                (action)="restore([file])"
-                *ngIf="file.canRestore"
-                [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:put-back"
-            ></iqser-circle-button>
-
-            <iqser-circle-button
-                (action)="hardDelete([file])"
-                [tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:trash"
-            ></iqser-circle-button>
+        <div class="cell stats-subtitle">
+            <div class="small-label">
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ file.numberOfPages }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <span class="small-label">{{ file.softDeleted | date: 'exactDate' }}</span>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="restore([file])"
+                    *ngIf="file.canRestore"
+                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:put-back"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="hardDelete([file])"
+                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
         </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
index d7bf4a0af..305ab6377 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
@@ -9,8 +9,8 @@
 
 :host ::ng-deep iqser-table cdk-virtual-scroll-viewport {
     height: calc(100% - 81px) !important;
-
-    .cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span {
-        @include common-mixins.line-clamp(1);
-    }
+}
+
+.cell.filename span {
+    @include common-mixins.line-clamp(1);
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
index 920cff75e..f408458d9 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output } from '@angular/core';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { Dossier } from '@state/model/dossier';
 import {
@@ -42,14 +42,15 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     readonly changed = false;
     readonly canRestoreSelected$ = this._canRestoreSelected$;
     disabled: boolean;
-    tableColumnConfigs: TableColumnConfig<FileListItem>[];
+    readonly tableColumnConfigs: TableColumnConfig<FileListItem>[] = [
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'), width: '3fr' },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages') },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'), sortByKey: 'softDeleted', width: '2fr' },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'), sortByKey: 'softDeleted', width: '2fr' }
+    ];
     readonly tableHeaderLabel = _('edit-dossier-dialog.deleted-documents.table-header.label');
     readonly circleButtonTypes = CircleButtonTypes;
     readonly deleteRetentionHours = this._configService.values.DELETE_RETENTION_HOURS;
-    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
-    @ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<never>;
-    @ViewChild('deletedDateTemplate', { static: true }) deletedDateTemplate: TemplateRef<never>;
-    @ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
 
     constructor(
         protected readonly _injector: Injector,
@@ -89,7 +90,6 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         this._loadingService.start();
         const files = await this._filesService.getDeletedFilesFor(this.dossier.id).toPromise();
         this.entitiesService.setEntities(this._toListItems(files));
@@ -110,32 +110,6 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
 
     disabledFn = (file: FileListItem) => !file.canRestore;
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'),
-                template: this.filenameTemplate,
-                width: '3fr'
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages'),
-                template: this.pagesTemplate
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'),
-                template: this.deletedDateTemplate,
-                sortByKey: 'softDeleted',
-                width: '2fr'
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'),
-                template: this.restoreDateTemplate,
-                sortByKey: 'softDeleted',
-                width: '2fr'
-            }
-        ];
-    }
-
     private async _restore(files: FileListItem[]): Promise<void> {
         const fileIds = files.map(f => f.fileId);
         await this._fileManagementController.restoreFiles(fileIds, this.dossier.id).toPromise();
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index f8c54b661..01c25929a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -21,66 +21,64 @@
     </div>
 </section>
 
-<ng-template #filenameTemplate let-item="entity">
-    <div class="cell filename">
-        <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
-            <span
-                *ngIf="item.highlights.filename; else defaultFilename"
-                [innerHTML]="item.highlights.filename[0]"
-                class="highlights"
-            ></span>
-            <ng-template #defaultFilename>{{ item.filename }}</ng-template>
-        </div>
-
-        <ng-container *ngIf="item.highlights['sections.text'] as highlights">
-            <div *ngIf="highlights.length > 0" class="small-label">
-                <span [innerHTML]="highlights[0]" class="highlights"></span>
+<ng-template #tableItemTemplate let-item="entity">
+    <div>
+        <div class="cell filename">
+            <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
+                <span
+                    *ngIf="item.highlights.filename; else defaultFilename"
+                    [innerHTML]="item.highlights.filename[0]"
+                    class="highlights"
+                ></span>
+                <ng-template #defaultFilename>{{ item.filename }}</ng-template>
             </div>
-            <div *ngIf="highlights.length > 1" class="small-label">
-                <span [innerHTML]="highlights[1]" class="highlights"></span>
+
+            <ng-container *ngIf="item.highlights['sections.text'] as highlights">
+                <div *ngIf="highlights.length > 0" class="small-label">
+                    <span [innerHTML]="highlights[0]" class="highlights"></span>
+                </div>
+                <div *ngIf="highlights.length > 1" class="small-label">
+                    <span [innerHTML]="highlights[1]" class="highlights"></span>
+                </div>
+            </ng-container>
+
+            <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
+                <span>
+                    {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
+                        >&nbsp;<s>{{ term }}</s></span
+                    >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
+                    <span
+                        (click)="$event.stopPropagation(); updateNavigation(search$.getValue().query, term)"
+                        *ngFor="let term of unmatched"
+                        >&nbsp;<u>{{ term }}</u></span
+                    >
+                </span>
             </div>
-        </ng-container>
+        </div>
 
-        <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
-            <span>
-                {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
-                    >&nbsp;<s>{{ term }}</s></span
-                >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
-                <span (click)="$event.stopPropagation(); updateNavigation(search$.getValue().query, term)" *ngFor="let term of unmatched"
-                    >&nbsp;<u>{{ term }}</u></span
-                >
-            </span>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #statusTemplate let-item="entity">
-    <div class="cell">
-        <iqser-status-bar
-            [configs]="[
-                {
-                    color: item.status,
-                    label: fileStatusTranslations[item.status] | translate,
-                    length: 1,
-                    cssClass: 'all-caps-label'
-                }
-            ]"
-            [small]="true"
-        ></iqser-status-bar>
-    </div>
-</ng-template>
-
-<ng-template #dossierTemplate let-item="entity">
-    <div class="cell small-label">
-        {{ item.dossierName }}
-    </div>
-</ng-template>
-
-<ng-template #pagesTemplate let-item="entity">
-    <div class="cell small-label stats-subtitle">
-        <div>
-            <mat-icon svgIcon="red:pages"></mat-icon>
-            {{ item.numberOfPages }}
+        <div class="cell">
+            <iqser-status-bar
+                [configs]="[
+                    {
+                        color: item.status,
+                        label: fileStatusTranslations[item.status] | translate,
+                        length: 1,
+                        cssClass: 'all-caps-label'
+                    }
+                ]"
+                [small]="true"
+            ></iqser-status-bar>
+        </div>
+
+        <div class="cell small-label">
+            {{ item.dossierName }}
+        </div>
+
+        <div class="cell small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ item.numberOfPages }}
+            </div>
         </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
index da9d39c30..25f846e32 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
@@ -1,11 +1,9 @@
 @use 'common-mixins';
 
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    .highlights {
-        @include common-mixins.line-clamp(1);
+.cell .highlights::ng-deep {
+    @include common-mixins.line-clamp(1);
 
-        em {
-            background-color: #fffcc4;
-        }
+    em {
+        background-color: #fffcc4;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index 7ffcb6273..bba7db62b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnDestroy } from '@angular/core';
 import {
     DefaultListingServices,
     IListable,
@@ -40,17 +40,17 @@ interface SearchInput {
     styleUrls: ['./search-screen.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => SearchScreenComponent) }]
 })
-export class SearchScreenComponent extends ListingComponent<ListItem> implements OnDestroy, OnInit {
+export class SearchScreenComponent extends ListingComponent<ListItem> implements OnDestroy {
     readonly fileStatusTranslations = fileStatusTranslations;
     readonly searchPositions = SearchPositions;
 
-    @ViewChild('filenameTemplate', { static: true }) readonly filenameTemplate: TemplateRef<unknown>;
-    @ViewChild('statusTemplate', { static: true }) readonly statusTemplate: TemplateRef<unknown>;
-    @ViewChild('dossierTemplate', { static: true }) readonly dossierTemplate: TemplateRef<unknown>;
-    @ViewChild('pagesTemplate', { static: true }) readonly pagesTemplate: TemplateRef<unknown>;
-
     readonly tableHeaderLabel = _('search-screen.table-header');
-    tableColumnConfigs: TableColumnConfig<ListItem>[];
+    readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
+        { label: _('search-screen.cols.document'), width: '2fr' },
+        { label: _('search-screen.cols.status') },
+        { label: _('search-screen.cols.dossier') },
+        { label: _('search-screen.cols.pages'), width: 'auto' }
+    ];
     readonly search$ = new BehaviorSubject<SearchInput>(null);
     readonly searchResults$: Observable<ListItem[]> = this.search$.asObservable().pipe(
         switchMap(query => this._search(query)),
@@ -108,19 +108,6 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
         this._router.navigate([], { queryParams }).then();
     }
 
-    ngOnInit(): void {
-        this._configureTableColumns();
-    }
-
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            { label: _('search-screen.cols.document'), template: this.filenameTemplate, width: '2fr' },
-            { label: _('search-screen.cols.status'), template: this.statusTemplate },
-            { label: _('search-screen.cols.dossier'), template: this.dossierTemplate },
-            { label: _('search-screen.cols.pages'), template: this.pagesTemplate, width: 'auto' }
-        ];
-    }
-
     private _search(searchInput: SearchInput): Observable<SearchResult> {
         return this._searchControllerService.search({
             dossierIds: [...searchInput.dossierIds],
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index ebc96a5b5..3bc887fcb 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1375,7 +1375,7 @@
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
   "search": {
-    "entire-platform": "accross all dossiers",
+    "entire-platform": "across all dossiers",
     "placeholder": "Search documents...",
     "this-dossier": "in this dossier"
   },