From 291affddfd4cf8d8ff0e9324acca2ee75385879b Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 27 Jan 2026 12:28:59 +0000
Subject: [PATCH 1/2] Migrate language widget to signals and adopt @if/@for
 template syntax

Migrate all three language widget components (display, record-view, edit)
from decorator-based @Input/@Output to Angular signal APIs (input, output,
computed, signal). Update S3 widget template and CLAUDE.md coding conventions
to require built-in control flow (@if, @for) over structural directives.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/CLAUDE.md                            |   5 +
 .../language/language.component.html          |  34 +--
 .../language/language.component.spec.ts       |  85 ++++----
 .../language/language.component.ts            | 200 +++++++++---------
 .../record-edit-fields/s3/s3.component.html   |  38 ++--
 .../language/language.component.html          |   6 +-
 .../language/language.component.spec.ts       |  55 +++--
 .../language/language.component.ts            |  79 ++++---
 .../language/language.component.html          |   8 +-
 .../language/language.component.spec.ts       |  81 ++++---
 .../language/language.component.ts            |  78 ++++---
 11 files changed, 346 insertions(+), 323 deletions(-)

diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
index dead28afa..86ae600ea 100644
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -140,6 +140,11 @@ Database configurations are defined in `src/app/consts/databases.ts`.
 
 ## 📝 Code Conventions
 
+### Template Syntax
+- **Use built-in control flow** (`@if`, `@for`, `@switch`) instead of structural directives (`*ngIf`, `*ngFor`, `*ngSwitch`) in all new code
+- Example: `@if (condition) { ... }` instead of `<div *ngIf="condition">...</div>`
+- Example: `@for (item of items; track item.id) { ... }` instead of `<div *ngFor="let item of items">...</div>`
+
 ### Naming Conventions
 - **Files**: `kebab-case.component.ts`
 - **Classes**: `PascalCase` (e.g., `DbTableSettingsComponent`)
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html
index 7a6570ebb..7f25a437e 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html
@@ -1,22 +1,32 @@
 <mat-form-field class="language-form-field" appearance="outline">
-    <mat-label>{{normalizedLabel}}</mat-label>
+    <mat-label>{{normalizedLabel()}}</mat-label>
     <div class="language-input-container">
-        <span *ngIf="selectedLanguageFlag && showFlag" class="language-flag-prefix">{{selectedLanguageFlag}}</span>
+        @if (selectedLanguageFlag() && showFlag()) {
+            <span class="language-flag-prefix">{{selectedLanguageFlag()}}</span>
+        }
         <input type="text" matInput
-            [required]="required" [disabled]="disabled" [readonly]="readonly"
-            attr.data-testid="record-{{label}}-language"
+            [required]="required()" [disabled]="disabled()" [readonly]="readonly()"
+            attr.data-testid="record-{{label()}}-language"
             [formControl]="languageControl"
             [matAutocomplete]="auto"
             class="language-input">
     </div>
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-        <mat-option *ngFor="let language of filteredLanguages | async"
-            [value]="language"
-            (onSelectionChange)="language && onLanguageSelected(language)">
-            <span *ngIf="language.flag && showFlag" class="language-flag">{{language.flag}}</span>
-            <span class="language-name">{{language.label}}</span>
-            <span *ngIf="language.nativeName && language.label !== language.nativeName" class="language-native">{{language.nativeName}}</span>
-            <span *ngIf="language.value" class="language-code">({{language.value}})</span>
-        </mat-option>
+        @for (language of filteredLanguages | async; track language.value) {
+            <mat-option
+                [value]="language"
+                (onSelectionChange)="language && onLanguageSelected(language)">
+                @if (language.flag && showFlag()) {
+                    <span class="language-flag">{{language.flag}}</span>
+                }
+                <span class="language-name">{{language.label}}</span>
+                @if (language.nativeName && language.label !== language.nativeName) {
+                    <span class="language-native">{{language.nativeName}}</span>
+                }
+                @if (language.value) {
+                    <span class="language-code">({{language.value}})</span>
+                }
+            </mat-option>
+        }
     </mat-autocomplete>
 </mat-form-field>
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts
index 649add210..caa590924 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts
@@ -1,50 +1,45 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LanguageEditComponent } from './language.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideHttpClient } from '@angular/common/http';
+import { LanguageEditComponent } from './language.component';
 
 describe('LanguageEditComponent', () => {
-  let component: LanguageEditComponent;
-  let fixture: ComponentFixture<LanguageEditComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        LanguageEditComponent,
-        BrowserAnimationsModule
-      ],
-      providers: [provideHttpClient()]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LanguageEditComponent);
-    component = fixture.componentInstance;
-    component.widgetStructure = { widget_params: {} } as any;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should load languages on init', () => {
-    component.ngOnInit();
-    expect(component.languages.length).toBeGreaterThan(0);
-  });
-
-  it('should set initial value when value is provided', () => {
-    component.value = 'en';
-    component.ngOnInit();
-    expect(component.selectedLanguageFlag).toBeTruthy();
-  });
-
-  it('should parse widget params for show_flag', () => {
-    component.widgetStructure = {
-      widget_params: { show_flag: false }
-    } as any;
-    component.ngOnInit();
-    expect(component.showFlag).toBe(false);
-  });
+	let component: LanguageEditComponent;
+	let fixture: ComponentFixture<LanguageEditComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [LanguageEditComponent, BrowserAnimationsModule],
+			providers: [provideHttpClient()],
+		}).compileComponents();
+	});
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(LanguageEditComponent);
+		component = fixture.componentInstance;
+		fixture.componentRef.setInput('widgetStructure', { widget_params: {} });
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should load languages on init', () => {
+		expect(component.languages.length).toBeGreaterThan(0);
+	});
+
+	it('should set initial value when value is provided', () => {
+		fixture.componentRef.setInput('value', 'en');
+		component.ngOnInit();
+		expect(component.selectedLanguageFlag()).toBeTruthy();
+	});
+
+	it('should parse widget params for show_flag', () => {
+		fixture.componentRef.setInput('widgetStructure', {
+			widget_params: { show_flag: false },
+		});
+		fixture.detectChanges();
+		expect(component.showFlag()).toBe(false);
+	});
 });
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts
index 59a71d0e5..65ee3dc33 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts
@@ -1,116 +1,126 @@
-import { LANGUAGES, getLanguageFlag, } from '../../../../consts/languages';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
-import { map, startWith } from 'rxjs/operators';
-
-import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
 import { CommonModule } from '@angular/common';
-import { FormControl } from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, computed, input, OnInit, output, signal } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { Observable } from 'rxjs';
-import { ReactiveFormsModule } from '@angular/forms';
+import { map, startWith } from 'rxjs/operators';
+import { TableField, TableForeignKey, WidgetStructure } from 'src/app/models/table';
+import { getLanguageFlag, LANGUAGES } from '../../../../consts/languages';
+import { normalizeFieldName } from '../../../../lib/normalize';
+
+interface LanguageOption {
+	value: string | null;
+	label: string;
+	flag: string;
+	nativeName?: string;
+}
 
 @Component({
-  selector: 'app-edit-language',
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule],
-  templateUrl: './language.component.html',
-  styleUrls: ['./language.component.css'],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+	selector: 'app-edit-language',
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule],
+	templateUrl: './language.component.html',
+	styleUrls: ['./language.component.css'],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class LanguageEditComponent extends BaseEditFieldComponent {
-  @Input() value: string;
+export class LanguageEditComponent implements OnInit {
+	readonly key = input<string>();
+	readonly label = input<string>();
+	readonly required = input<boolean>(false);
+	readonly readonly = input<boolean>(false);
+	readonly structure = input<TableField>();
+	readonly disabled = input<boolean>(false);
+	readonly widgetStructure = input<WidgetStructure>();
+	readonly relations = input<TableForeignKey>();
+	readonly value = input<string>();
+
+	readonly onFieldChange = output<any>();
 
-  public languages: {value: string | null, label: string, flag: string, nativeName?: string}[] = [];
-  public languageControl = new FormControl<{value: string | null, label: string, flag: string, nativeName?: string} | string>('');
-  public filteredLanguages: Observable<{value: string | null, label: string, flag: string, nativeName?: string}[]>;
-  public showFlag: boolean = true;
-  public selectedLanguageFlag: string = '';
+	readonly normalizedLabel = computed(() => normalizeFieldName(this.label() || ''));
 
-  originalOrder = () => { return 0; }
+	readonly showFlag = computed(() => {
+		const ws = this.widgetStructure();
+		if (!ws?.widget_params) return true;
+		try {
+			const params = typeof ws.widget_params === 'string' ? JSON.parse(ws.widget_params) : ws.widget_params;
+			return params.show_flag !== undefined ? params.show_flag : true;
+		} catch {
+			return true;
+		}
+	});
 
-  ngOnInit(): void {
-    super.ngOnInit();
-    this.parseWidgetParams();
-    this.loadLanguages();
-    this.setupAutocomplete();
-    this.setInitialValue();
-  }
+	public languages: LanguageOption[] = [];
+	public languageControl = new FormControl<LanguageOption | string>('');
+	public filteredLanguages: Observable<LanguageOption[]>;
+	public selectedLanguageFlag = signal('');
 
-  private parseWidgetParams(): void {
-    if (this.widgetStructure?.widget_params) {
-      try {
-        const params = typeof this.widgetStructure.widget_params === 'string'
-          ? JSON.parse(this.widgetStructure.widget_params)
-          : this.widgetStructure.widget_params;
+	originalOrder = () => {
+		return 0;
+	};
 
-        if (params.show_flag !== undefined) {
-          this.showFlag = params.show_flag;
-        }
-      } catch (e) {
-        console.error('Error parsing language widget params:', e);
-      }
-    }
-  }
+	ngOnInit(): void {
+		this.loadLanguages();
+		this.setupAutocomplete();
+		this.setInitialValue();
+	}
 
-  private setupAutocomplete(): void {
-    this.filteredLanguages = this.languageControl.valueChanges.pipe(
-      startWith(''),
-      map(value => {
-        // Update flag when value changes
-        if (typeof value === 'object' && value !== null) {
-          this.selectedLanguageFlag = value.flag;
-        } else if (typeof value === 'string') {
-          // Clear flag if user is typing
-          this.selectedLanguageFlag = '';
-        }
-        return this._filter(typeof value === 'string' ? value : (value?.label || ''));
-      })
-    );
-  }
+	displayFn(language: any): string {
+		if (!language) return '';
+		return typeof language === 'string' ? language : language.label;
+	}
 
-  private setInitialValue(): void {
-    if (this.value) {
-      const language = this.languages.find(l => l.value && l.value.toLowerCase() === this.value.toLowerCase());
-      if (language) {
-        this.languageControl.setValue(language);
-        this.selectedLanguageFlag = language.flag;
-      }
-    }
-  }
+	onLanguageSelected(selectedLanguage: LanguageOption): void {
+		this.selectedLanguageFlag.set(selectedLanguage.flag);
+		this.onFieldChange.emit(selectedLanguage.value);
+	}
 
-  private _filter(value: string): {value: string | null, label: string, flag: string, nativeName?: string}[] {
-    const filterValue = value.toLowerCase();
-    return this.languages.filter(language =>
-      language.label?.toLowerCase().includes(filterValue) ||
-      (language.value?.toLowerCase().includes(filterValue)) ||
-      (language.nativeName?.toLowerCase().includes(filterValue))
-    );
-  }
+	private setupAutocomplete(): void {
+		this.filteredLanguages = this.languageControl.valueChanges.pipe(
+			startWith(''),
+			map((value) => {
+				if (typeof value === 'object' && value !== null) {
+					this.selectedLanguageFlag.set(value.flag);
+				} else if (typeof value === 'string') {
+					this.selectedLanguageFlag.set('');
+				}
+				return this._filter(typeof value === 'string' ? value : value?.label || '');
+			}),
+		);
+	}
 
-  onLanguageSelected(selectedLanguage: {value: string | null, label: string, flag: string, nativeName?: string}): void {
-    this.value = selectedLanguage.value;
-    this.selectedLanguageFlag = selectedLanguage.flag;
-    this.onFieldChange.emit(this.value);
-  }
+	private setInitialValue(): void {
+		const val = this.value();
+		if (val) {
+			const language = this.languages.find((l) => l.value && l.value.toLowerCase() === val.toLowerCase());
+			if (language) {
+				this.languageControl.setValue(language);
+				this.selectedLanguageFlag.set(language.flag);
+			}
+		}
+	}
 
-  displayFn(language: any): string {
-    if (!language) return '';
-    // Only return the language label, flag is shown separately
-    return typeof language === 'string' ? language : language.label;
-  }
+	private _filter(value: string): LanguageOption[] {
+		const filterValue = value.toLowerCase();
+		return this.languages.filter(
+			(language) =>
+				language.label?.toLowerCase().includes(filterValue) ||
+				language.value?.toLowerCase().includes(filterValue) ||
+				language.nativeName?.toLowerCase().includes(filterValue),
+		);
+	}
 
-  private loadLanguages(): void {
-    this.languages = LANGUAGES.map(language => ({
-      value: language.code,
-      label: language.name,
-      flag: getLanguageFlag(language),
-      nativeName: language.nativeName
-    })).toSorted((a, b) => a.label.localeCompare(b.label));
+	private loadLanguages(): void {
+		this.languages = LANGUAGES.map((language) => ({
+			value: language.code,
+			label: language.name,
+			flag: getLanguageFlag(language),
+			nativeName: language.nativeName,
+		})).toSorted((a, b) => a.label.localeCompare(b.label));
 
-    if (this.widgetStructure?.widget_params?.allow_null || this.structure?.allow_null) {
-      this.languages = [{ value: null, label: '', flag: '' }, ...this.languages];
-    }
-  }
+		const ws = this.widgetStructure();
+		if (ws?.widget_params?.allow_null || this.structure()?.allow_null) {
+			this.languages = [{ value: null, label: '', flag: '' }, ...this.languages];
+		}
+	}
 }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.html b/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.html
index fbf37ce73..c61abb7f4 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/s3/s3.component.html
@@ -15,23 +15,29 @@
       <mat-icon>upload</mat-icon>
       Upload
     </button>
-    <button mat-stroked-button type="button"
-            *ngIf="previewUrl()"
-            (click)="openFile()">
-      <mat-icon>open_in_new</mat-icon>
-      Open
-    </button>
+    @if (previewUrl()) {
+      <button mat-stroked-button type="button"
+              (click)="openFile()">
+        <mat-icon>open_in_new</mat-icon>
+        Open
+      </button>
+    }
   </div>
 
-  <div class="s3-widget__preview" *ngIf="internalValue() || value()">
-    <mat-spinner *ngIf="isLoading()" diameter="40"></mat-spinner>
-    <img *ngIf="isImage() && previewUrl() && !isLoading()"
-         [src]="previewUrl()"
-         class="s3-widget__thumbnail"
-         alt="Preview">
-    <div *ngIf="!isImage() && previewUrl() && !isLoading()" class="s3-widget__file-icon">
-      <mat-icon>insert_drive_file</mat-icon>
-      <span class="s3-widget__filename">{{(internalValue() || value()) | slice:-30}}</span>
+  @if (internalValue() || value()) {
+    <div class="s3-widget__preview">
+      @if (isLoading()) {
+        <mat-spinner diameter="40"></mat-spinner>
+      } @else if (isImage() && previewUrl()) {
+        <img [src]="previewUrl()"
+             class="s3-widget__thumbnail"
+             alt="Preview">
+      } @else if (previewUrl()) {
+        <div class="s3-widget__file-icon">
+          <mat-icon>insert_drive_file</mat-icon>
+          <span class="s3-widget__filename">{{(internalValue() || value()) | slice:-30}}</span>
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html
index 0615634dd..c09ca8c93 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.html
@@ -1,4 +1,6 @@
 <span class="field-value">
-  <span *ngIf="showFlag && languageFlag" class="language-flag">{{ languageFlag }}</span>
-  <span class="field-view-value">{{ languageName }}</span>
+  @if (showFlag() && languageFlag()) {
+    <span class="language-flag">{{ languageFlag() }}</span>
+  }
+  <span class="field-view-value">{{ languageName() }}</span>
 </span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts
index 08ef242f0..00f7346b2 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts
@@ -1,38 +1,37 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LanguageRecordViewComponent } from './language.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideHttpClient } from '@angular/common/http';
+import { LanguageRecordViewComponent } from './language.component';
 
 describe('LanguageRecordViewComponent', () => {
-  let component: LanguageRecordViewComponent;
-  let fixture: ComponentFixture<LanguageRecordViewComponent>;
+	let component: LanguageRecordViewComponent;
+	let fixture: ComponentFixture<LanguageRecordViewComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LanguageRecordViewComponent, BrowserAnimationsModule],
-      providers: [provideHttpClient()]
-    }).compileComponents();
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [LanguageRecordViewComponent, BrowserAnimationsModule],
+			providers: [provideHttpClient()],
+		}).compileComponents();
 
-    fixture = TestBed.createComponent(LanguageRecordViewComponent);
-    component = fixture.componentInstance;
-    component.value = 'en';
-    fixture.detectChanges();
-  });
+		fixture = TestBed.createComponent(LanguageRecordViewComponent);
+		component = fixture.componentInstance;
+		fixture.componentRef.setInput('value', 'en');
+		fixture.detectChanges();
+	});
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
 
-  it('should display language name from code', () => {
-    component.value = 'en';
-    component.ngOnInit();
-    expect(component.languageName).toBe('English');
-  });
+	it('should display language name from code', () => {
+		fixture.componentRef.setInput('value', 'en');
+		fixture.detectChanges();
+		expect(component.languageName()).toBe('English');
+	});
 
-  it('should display em dash when value is empty', () => {
-    component.value = null;
-    component.ngOnInit();
-    expect(component.languageName).toBe('—');
-  });
+	it('should display em dash when value is empty', () => {
+		fixture.componentRef.setInput('value', null);
+		fixture.detectChanges();
+		expect(component.languageName()).toBe('—');
+	});
 });
diff --git a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts
index 656ae30cc..2a15ed68e 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts
@@ -1,51 +1,48 @@
-import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages';
-import { Component, Injectable, OnInit } from '@angular/core';
-
-import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
 import { CommonModule } from '@angular/common';
+import { Component, computed, input, output } from '@angular/core';
+import { TableField, WidgetStructure } from 'src/app/models/table';
+import { getLanguageFlag, LANGUAGES } from '../../../../consts/languages';
 
-@Injectable()
 @Component({
-  selector: 'app-language-record-view',
-  templateUrl: './language.component.html',
-  styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './language.component.css'],
-  imports: [CommonModule]
+	selector: 'app-language-record-view',
+	templateUrl: './language.component.html',
+	styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './language.component.css'],
+	imports: [CommonModule],
 })
-export class LanguageRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit {
-  static type = 'language';
+export class LanguageRecordViewComponent {
+	static type = 'language';
 
-  public languageName: string = '';
-  public languageFlag: string = '';
-  public showFlag: boolean = true;
+	readonly key = input<string>();
+	readonly value = input<any>();
+	readonly structure = input<TableField>();
+	readonly widgetStructure = input<WidgetStructure>();
+	readonly rowData = input<Record<string, unknown>>();
+	readonly primaryKeys = input<Record<string, unknown>>();
 
-  ngOnInit(): void {
-    this.parseWidgetParams();
+	readonly onCopyToClipboard = output<string>();
 
-    if (this.value) {
-      const language = LANGUAGES.find(l => l.code.toLowerCase() === this.value.toLowerCase());
-      this.languageName = language ? language.name : this.value;
-      if (language) {
-        this.languageFlag = getLanguageFlag(language);
-      }
-    } else {
-      this.languageName = '—';
-      this.languageFlag = '';
-    }
-  }
+	readonly showFlag = computed(() => {
+		const ws = this.widgetStructure();
+		if (!ws?.widget_params) return true;
+		try {
+			const params = typeof ws.widget_params === 'string' ? JSON.parse(ws.widget_params) : ws.widget_params;
+			return params.show_flag !== undefined ? params.show_flag : true;
+		} catch {
+			return true;
+		}
+	});
 
-  private parseWidgetParams(): void {
-    if (this.widgetStructure?.widget_params) {
-      try {
-        const params = typeof this.widgetStructure.widget_params === 'string'
-          ? JSON.parse(this.widgetStructure.widget_params)
-          : this.widgetStructure.widget_params;
+	readonly languageName = computed(() => {
+		const val = this.value();
+		if (!val) return '—';
+		const language = LANGUAGES.find((l) => l.code.toLowerCase() === val.toLowerCase());
+		return language ? language.name : val;
+	});
 
-        if (params.show_flag !== undefined) {
-          this.showFlag = params.show_flag;
-        }
-      } catch (e) {
-        console.error('Error parsing language widget params:', e);
-      }
-    }
-  }
+	readonly languageFlag = computed(() => {
+		const val = this.value();
+		if (!val) return '';
+		const language = LANGUAGES.find((l) => l.code.toLowerCase() === val.toLowerCase());
+		return language ? getLanguageFlag(language) : '';
+	});
 }
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html
index 85f344d1e..4da896023 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.html
@@ -1,12 +1,14 @@
 <div class="field-display">
   <span class="field-value">
-    <span *ngIf="showFlag && languageFlag" class="language-flag">{{ languageFlag }}</span>
-    <span>{{ languageName }}</span>
+    @if (showFlag() && languageFlag()) {
+      <span class="language-flag">{{ languageFlag() }}</span>
+    }
+    <span>{{ languageName() }}</span>
   </span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"
-      [cdkCopyToClipboard]="languageName"
+      [cdkCopyToClipboard]="languageName()"
       (cdkCopyToClipboardCopied)="onCopyToClipboard.emit('Field value was copied to clipboard.')"
       (click)="$event.stopPropagation()">
       <mat-icon>content_copy</mat-icon>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts
index f6d5f0e89..9a5d4d5ad 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts
@@ -1,46 +1,45 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LanguageDisplayComponent } from './language.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideHttpClient } from '@angular/common/http';
+import { LanguageDisplayComponent } from './language.component';
 
 describe('LanguageDisplayComponent', () => {
-  let component: LanguageDisplayComponent;
-  let fixture: ComponentFixture<LanguageDisplayComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [LanguageDisplayComponent, BrowserAnimationsModule],
-      providers: [provideHttpClient()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(LanguageDisplayComponent);
-    component = fixture.componentInstance;
-    component.value = 'en';
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display language name from code', () => {
-    component.value = 'fr';
-    component.ngOnInit();
-    expect(component.languageName).toBe('French');
-  });
-
-  it('should display em dash when value is empty', () => {
-    component.value = null;
-    component.ngOnInit();
-    expect(component.languageName).toBe('—');
-  });
-
-  it('should respect show_flag widget parameter', () => {
-    component.widgetStructure = {
-      widget_params: { show_flag: false }
-    } as any;
-    component.ngOnInit();
-    expect(component.showFlag).toBe(false);
-  });
+	let component: LanguageDisplayComponent;
+	let fixture: ComponentFixture<LanguageDisplayComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [LanguageDisplayComponent, BrowserAnimationsModule],
+			providers: [provideHttpClient()],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(LanguageDisplayComponent);
+		component = fixture.componentInstance;
+		fixture.componentRef.setInput('value', 'en');
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should display language name from code', () => {
+		fixture.componentRef.setInput('value', 'fr');
+		fixture.detectChanges();
+		expect(component.languageName()).toBe('French');
+	});
+
+	it('should display em dash when value is empty', () => {
+		fixture.componentRef.setInput('value', null);
+		fixture.detectChanges();
+		expect(component.languageName()).toBe('—');
+	});
+
+	it('should respect show_flag widget parameter', () => {
+		fixture.componentRef.setInput('widgetStructure', {
+			widget_params: { show_flag: false },
+		});
+		fixture.detectChanges();
+		expect(component.showFlag()).toBe(false);
+	});
 });
diff --git a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts
index ae7d5e2cf..2d09732cd 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts
@@ -1,54 +1,52 @@
-import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages';
-import { Component, OnInit } from '@angular/core';
-
-import { BaseTableDisplayFieldComponent } from '../base-table-display-field/base-table-display-field.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
+import { Component, computed, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { TableField, WidgetStructure } from 'src/app/models/table';
+import { getLanguageFlag, LANGUAGES } from '../../../../consts/languages';
 
 @Component({
-  selector: 'app-language-display',
-  templateUrl: './language.component.html',
-  styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './language.component.css'],
-  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+	selector: 'app-language-display',
+	templateUrl: './language.component.html',
+	styleUrls: ['../base-table-display-field/base-table-display-field.component.css', './language.component.css'],
+	imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule],
 })
-export class LanguageDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit {
-  static type = 'language';
+export class LanguageDisplayComponent {
+	static type = 'language';
 
-  public languageName: string = '';
-  public languageFlag: string = '';
-  public showFlag: boolean = true;
+	readonly key = input<string>();
+	readonly value = input<any>();
+	readonly structure = input<TableField>();
+	readonly widgetStructure = input<WidgetStructure>();
+	readonly rowData = input<Record<string, unknown>>();
+	readonly primaryKeys = input<{ column_name: string }[]>();
 
-  ngOnInit(): void {
-    this.parseWidgetParams();
+	readonly onCopyToClipboard = output<string>();
 
-    if (this.value) {
-      const language = LANGUAGES.find(l => l.code.toLowerCase() === this.value.toLowerCase());
-      this.languageName = language ? language.name : this.value;
-      if (language) {
-        this.languageFlag = getLanguageFlag(language);
-      }
-    } else {
-      this.languageName = '—';
-      this.languageFlag = '';
-    }
-  }
+	readonly showFlag = computed(() => {
+		const ws = this.widgetStructure();
+		if (!ws?.widget_params) return true;
+		try {
+			const params = typeof ws.widget_params === 'string' ? JSON.parse(ws.widget_params) : ws.widget_params;
+			return params.show_flag !== undefined ? params.show_flag : true;
+		} catch {
+			return true;
+		}
+	});
 
-  private parseWidgetParams(): void {
-    if (this.widgetStructure?.widget_params) {
-      try {
-        const params = typeof this.widgetStructure.widget_params === 'string'
-          ? JSON.parse(this.widgetStructure.widget_params)
-          : this.widgetStructure.widget_params;
+	readonly languageName = computed(() => {
+		const val = this.value();
+		if (!val) return '—';
+		const language = LANGUAGES.find((l) => l.code.toLowerCase() === val.toLowerCase());
+		return language ? language.name : val;
+	});
 
-        if (params.show_flag !== undefined) {
-          this.showFlag = params.show_flag;
-        }
-      } catch (e) {
-        console.error('Error parsing language widget params:', e);
-      }
-    }
-  }
+	readonly languageFlag = computed(() => {
+		const val = this.value();
+		if (!val) return '';
+		const language = LANGUAGES.find((l) => l.code.toLowerCase() === val.toLowerCase());
+		return language ? getLanguageFlag(language) : '';
+	});
 }

From 5382bb7c4721c0e1cabd503f86085ef791b3f2b4 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 27 Jan 2026 12:35:12 +0000
Subject: [PATCH 2/2] s3 widget fix

---
 frontend/package.json                         |   2 +-
 .../db-table-filters-dialog.component.ts      | 557 +++++++--------
 .../db-table-row-view.component.ts            | 645 +++++++++---------
 .../db-table-view/db-table-view.component.ts  | 339 ++++-----
 .../db-table-row-edit.component.ts            |   2 +
 frontend/src/main.ts                          |   2 +
 frontend/yarn.lock                            |  10 +-
 7 files changed, 808 insertions(+), 749 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2cb9d381d..8c4996130 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,7 +49,7 @@
 		"lodash-es": "^4.17.21",
 		"mermaid": "^11.12.1",
 		"monaco-editor": "0.55.1",
-		"ng-dynamic-component": "^10.7.0",
+		"ng-dynamic-component": "^10.8.0",
 		"ngx-cookie-service": "^19.0.0",
 		"ngx-markdown": "^19.1.1",
 		"ngx-stripe": "^19.0.0",
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
index 62ecfd772..8c922838b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
@@ -1,286 +1,299 @@
-import { Component, OnInit, AfterViewInit, Inject, KeyValueDiffers, KeyValueDiffer } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { AfterViewInit, Component, Inject, KeyValueDiffer, KeyValueDiffers, OnInit } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { TablesService } from 'src/app/services/tables.service';
-import { TableField, TableForeignKey, Widget } from 'src/app/models/table';
-import { ConnectionsService } from 'src/app/services/connections.service';
-import { UIwidgets } from 'src/app/consts/record-edit-types';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import JsonURL from '@jsonurl/jsonurl';
+import { Angulartics2OnModule } from 'angulartics2';
+import JSON5 from 'json5';
+import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 import { filterTypes } from 'src/app/consts/filter-types';
-import { ActivatedRoute } from '@angular/router';
+import { UIwidgets } from 'src/app/consts/record-edit-types';
 import { getComparatorsFromUrl, getFiltersFromUrl } from 'src/app/lib/parse-filter-params';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
-import JSON5 from 'json5';
-import { map, startWith } from 'rxjs/operators';
-import { Observable, } from 'rxjs';
-import { FormControl } from '@angular/forms';
-import JsonURL from "@jsonurl/jsonurl";
-import { DynamicModule } from 'ng-dynamic-component';
-import { RouterModule } from '@angular/router';
-import { MatDialogModule } from '@angular/material/dialog';
+import { TableField, TableForeignKey, Widget } from 'src/app/models/table';
+import { ConnectionsService } from 'src/app/services/connections.service';
+import { TablesService } from 'src/app/services/tables.service';
 import { ContentLoaderComponent } from '../../../ui-components/content-loader/content-loader.component';
-import { Angulartics2OnModule } from 'angulartics2';
 
 @Component({
-  selector: 'app-db-table-filters-dialog',
-  templateUrl: './db-table-filters-dialog.component.html',
-  styleUrls: ['./db-table-filters-dialog.component.css'],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FormsModule,
-    MatAutocompleteModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatIconModule,
-    MatSelectModule,
-    DynamicModule,
-    RouterModule,
-    MatDialogModule,
-    Angulartics2OnModule,
-    ContentLoaderComponent
-  ]
+	selector: 'app-db-table-filters-dialog',
+	templateUrl: './db-table-filters-dialog.component.html',
+	styleUrls: ['./db-table-filters-dialog.component.css'],
+	imports: [
+		CommonModule,
+		ReactiveFormsModule,
+		FormsModule,
+		MatAutocompleteModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatButtonModule,
+		MatIconModule,
+		MatSelectModule,
+		DynamicModule,
+		SignalComponentIoModule,
+		RouterModule,
+		MatDialogModule,
+		Angulartics2OnModule,
+		ContentLoaderComponent,
+	],
 })
 export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {
-
-  public tableFilters = [];
-  public fieldSearchControl = new FormControl('');
-
-  public fields: string[];
-  public foundFields: Observable<string[]>;
-
-  public tableRowFields: Object;
-  public tableRowStructure: Object;
-  public tableRowFieldsShown: Record<string, string> = {};
-  public tableRowFieldsComparator: Object = {};
-  public tableForeignKeys: {[key: string]: TableForeignKey};
-  public tableFiltersCount: number;
-  public differ: KeyValueDiffer<string, any>;
-  public tableTypes: Object;
-  public tableWidgets: object;
-  public tableWidgetsList: string[] = [];
-  public UIwidgets = UIwidgets;
-  public autofocusField: string | null = null;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private _connections: ConnectionsService,
-    private _tables: TablesService,
-    public route: ActivatedRoute,
-    private differs:  KeyValueDiffers
-  ) {
-    this.differ = this.differs.find({}).create();
-  }
-
-  ngOnInit(): void {
-    this._tables.cast.subscribe();
-    this.tableForeignKeys = {...this.data.structure.foreignKeys};
-    this.tableRowFields = Object.assign({}, ...this.data.structure.structure.map((field: TableField) => ({[field.column_name]: undefined})));
-    this.tableTypes = getTableTypes(this.data.structure.structure, this.data.structure.foreignKeysList);
-    this.fields = this.data.structure.structure
-      .filter((field: TableField) => this.getInputType(field.column_name) !== 'file')
-      .map((field: TableField) => field.column_name);
-    // this.foundFields = [...this.fields];
-    this.tableRowStructure = Object.assign({}, ...this.data.structure.structure.map((field: TableField) => {
-      return {[field.column_name]: field};
-    }));
-
-    // Set autofocus field if provided
-    if (this.data.autofocusField) {
-      this.autofocusField = this.data.autofocusField;
-    }
-
-    const queryParams = this.route.snapshot.queryParams;
-
-    // If saved_filter is present in queryParams, show empty form without applying filters
-    if (queryParams.saved_filter) {
-      // Show empty form without filters
-      this.tableFilters = [];
-      this.tableRowFieldsShown = {};
-      this.tableRowFieldsComparator = {};
-    } else {
-      // Original behavior - parse and apply filters from URL
-      let filters = {};
-      if (queryParams.filters) filters = JsonURL.parse(queryParams.filters);
-      // const filters = JsonURL.parse(queryParams.filters || '{}');
-      const filtersValues = getFiltersFromUrl(filters);
-
-      console.log('Parsed filters from URL:', filtersValues);
-
-      if (Object.keys(filtersValues).length) {
-        this.tableFilters = Object.keys(filtersValues).map(key => key);
-        this.tableRowFieldsShown = filtersValues;
-        this.tableRowFieldsComparator = getComparatorsFromUrl(filters);
-      } else {
-        const fieldsToSearch = this.data.structure.structure.filter((field: TableField) => field.isSearched);
-        if (fieldsToSearch.length) {
-          this.tableFilters = fieldsToSearch.map((field:TableField) => field.column_name);
-          this.tableRowFieldsShown = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: undefined})));
-          this.tableRowFieldsComparator = Object.assign({}, ...fieldsToSearch.map((field: TableField) => ({[field.column_name]: 'eq'})));
-        }
-      }
-    }
-
-    if (this.data.structure.widgets && this.data.structure.widgets.length) {
-      this.setWidgets(this.data.structure.widgets);
-    }
-
-    // If autofocusField is provided, ensure it's in the filters list
-    if (this.autofocusField && this.tableFilters && !this.tableFilters.includes(this.autofocusField)) {
-      this.tableFilters.push(this.autofocusField);
-      if (!this.tableRowFieldsShown[this.autofocusField]) {
-        this.tableRowFieldsShown[this.autofocusField] = undefined;
-      }
-      if (!this.tableRowFieldsComparator[this.autofocusField]) {
-        this.tableRowFieldsComparator[this.autofocusField] = 'eq';
-      }
-    }
-
-    this.foundFields = this.fieldSearchControl.valueChanges.pipe(
-      startWith(''),
-      map(value => this._filter(value || '')),
-    );
-
-  }
-
-  ngAfterViewInit(): void {
-    // Set focus on the autofocus field after view is initialized
-    if (this.autofocusField) {
-      setTimeout(() => {
-        this.focusOnField(this.autofocusField);
-      }, 200);
-    }
-  }
-
-  focusOnField(fieldName: string) {
-    // Try multiple selectors to find the input field
-    const selectors = [
-      `input[name*="${fieldName}"]`,
-      `textarea[name*="${fieldName}"]`,
-      `[data-field="${fieldName}"] input`,
-      `[data-field="${fieldName}"] textarea`,
-      `mat-form-field:has([name*="${fieldName}"]) input`,
-      `mat-form-field:has([name*="${fieldName}"]) textarea`
-    ];
-
-    for (const selector of selectors) {
-      try {
-        const element = document.querySelector(selector) as HTMLElement;
-        if (element) {
-          element.focus();
-          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          return;
-        }
-      } catch (e) {
-        // Continue to next selector if this one fails
-      }
-    }
-
-    // Fallback: try to find by key attribute in ndc-dynamic components
-    const allInputs = document.querySelectorAll('input, textarea');
-    for (let i = 0; i < allInputs.length; i++) {
-      const input = allInputs[i] as HTMLElement;
-      const formField = input.closest('mat-form-field');
-      if (formField) {
-        const label = formField.querySelector('mat-label');
-        if (label && label.textContent && label.textContent.trim() === fieldName) {
-          input.focus();
-          input.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          return;
-        }
-      }
-    }
-  }
-
-  private _filter(value: string): string[] {
-    return this.fields.filter((field: string) => field.toLowerCase().includes(value.toLowerCase()));
-  }
-
-  ngDoCheck() {
-    const change = this.differ.diff(this);
-    if (change) {
-      this.tableFiltersCount = Object.keys(this.tableRowFieldsShown).length;
-    }
-  }
-
-  get inputs() {
-    return filterTypes[this._connections.currentConnection.type]
-  }
-
-  setWidgets(widgets: Widget[]) {
-    this.tableWidgetsList = widgets.map((widget: Widget) => widget.field_name);
-    this.tableWidgets = Object.assign({}, ...widgets
-      .map((widget: Widget) => {
-        let params;
-        if (widget.widget_params !== '// No settings required') {
-          params = JSON5.parse(widget.widget_params);
-        } else {
-          params = '';
-        };
-        return {
-          [widget.field_name]: {...widget, widget_params: params}
-        }
-      })
-    );
-  }
-
-  trackByFn(_index: number, item: any) {
-    return item.key; // or item.id
-  }
-
-  isWidget(columnName: string) {
-    return this.tableWidgetsList.includes(columnName);
-  }
-
-  updateField = (updatedValue: any, field: string) => {
-    this.tableRowFieldsShown[field] = updatedValue;
-  }
-
-  addFilter(e) {
-    const key = e.option.value;
-    this.tableRowFieldsShown = {...this.tableRowFieldsShown, [key]: this.tableRowFields[key]};
-    this.tableRowFieldsComparator = {...this.tableRowFieldsComparator, [key]: this.tableRowFieldsComparator[key] || 'eq'};
-    this.fieldSearchControl.setValue('');
-  }
-
-  updateComparator(event, fieldName: string) {
-    if (event === 'empty') this.tableRowFieldsShown[fieldName] = '';
-  }
-
-  resetFilters() {
-    this.tableFilters = [];
-    this.tableRowFieldsShown = {};
-  }
-
-  getInputType(field: string) {
-    let widgetType;
-    if (this.isWidget(field)) {
-      widgetType = this.UIwidgets[this.tableWidgets[field].widget_type]?.type;
-    } else {
-      widgetType = this.inputs[this.tableTypes[field]]?.type;
-    };
-    return widgetType;
-  }
-
-  getComparatorType(typeOfComponent) {
-    if (typeOfComponent === 'text') {
-      return 'text'
-    } else if (typeOfComponent === 'number' || typeOfComponent === 'datetime') {
-      return 'number'
-    } else {
-      return 'nonComparable'
-    }
-  }
-
-  removeFilter(field) {
-    delete this.tableRowFieldsShown[field];
-    delete this.tableRowFieldsComparator[field];
-  }
+	public tableFilters = [];
+	public fieldSearchControl = new FormControl('');
+
+	public fields: string[];
+	public foundFields: Observable<string[]>;
+
+	public tableRowFields: Object;
+	public tableRowStructure: Object;
+	public tableRowFieldsShown: Record<string, string> = {};
+	public tableRowFieldsComparator: Object = {};
+	public tableForeignKeys: { [key: string]: TableForeignKey };
+	public tableFiltersCount: number;
+	public differ: KeyValueDiffer<string, any>;
+	public tableTypes: Object;
+	public tableWidgets: object;
+	public tableWidgetsList: string[] = [];
+	public UIwidgets = UIwidgets;
+	public autofocusField: string | null = null;
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public data: any,
+		private _connections: ConnectionsService,
+		private _tables: TablesService,
+		public route: ActivatedRoute,
+		private differs: KeyValueDiffers,
+	) {
+		this.differ = this.differs.find({}).create();
+	}
+
+	ngOnInit(): void {
+		this._tables.cast.subscribe();
+		this.tableForeignKeys = { ...this.data.structure.foreignKeys };
+		this.tableRowFields = Object.assign(
+			{},
+			...this.data.structure.structure.map((field: TableField) => ({ [field.column_name]: undefined })),
+		);
+		this.tableTypes = getTableTypes(this.data.structure.structure, this.data.structure.foreignKeysList);
+		this.fields = this.data.structure.structure
+			.filter((field: TableField) => this.getInputType(field.column_name) !== 'file')
+			.map((field: TableField) => field.column_name);
+		// this.foundFields = [...this.fields];
+		this.tableRowStructure = Object.assign(
+			{},
+			...this.data.structure.structure.map((field: TableField) => {
+				return { [field.column_name]: field };
+			}),
+		);
+
+		// Set autofocus field if provided
+		if (this.data.autofocusField) {
+			this.autofocusField = this.data.autofocusField;
+		}
+
+		const queryParams = this.route.snapshot.queryParams;
+
+		// If saved_filter is present in queryParams, show empty form without applying filters
+		if (queryParams.saved_filter) {
+			// Show empty form without filters
+			this.tableFilters = [];
+			this.tableRowFieldsShown = {};
+			this.tableRowFieldsComparator = {};
+		} else {
+			// Original behavior - parse and apply filters from URL
+			let filters = {};
+			if (queryParams.filters) filters = JsonURL.parse(queryParams.filters);
+			// const filters = JsonURL.parse(queryParams.filters || '{}');
+			const filtersValues = getFiltersFromUrl(filters);
+
+			console.log('Parsed filters from URL:', filtersValues);
+
+			if (Object.keys(filtersValues).length) {
+				this.tableFilters = Object.keys(filtersValues).map((key) => key);
+				this.tableRowFieldsShown = filtersValues;
+				this.tableRowFieldsComparator = getComparatorsFromUrl(filters);
+			} else {
+				const fieldsToSearch = this.data.structure.structure.filter((field: TableField) => field.isSearched);
+				if (fieldsToSearch.length) {
+					this.tableFilters = fieldsToSearch.map((field: TableField) => field.column_name);
+					this.tableRowFieldsShown = Object.assign(
+						{},
+						...fieldsToSearch.map((field: TableField) => ({ [field.column_name]: undefined })),
+					);
+					this.tableRowFieldsComparator = Object.assign(
+						{},
+						...fieldsToSearch.map((field: TableField) => ({ [field.column_name]: 'eq' })),
+					);
+				}
+			}
+		}
+
+		if (this.data.structure.widgets && this.data.structure.widgets.length) {
+			this.setWidgets(this.data.structure.widgets);
+		}
+
+		// If autofocusField is provided, ensure it's in the filters list
+		if (this.autofocusField && this.tableFilters && !this.tableFilters.includes(this.autofocusField)) {
+			this.tableFilters.push(this.autofocusField);
+			if (!this.tableRowFieldsShown[this.autofocusField]) {
+				this.tableRowFieldsShown[this.autofocusField] = undefined;
+			}
+			if (!this.tableRowFieldsComparator[this.autofocusField]) {
+				this.tableRowFieldsComparator[this.autofocusField] = 'eq';
+			}
+		}
+
+		this.foundFields = this.fieldSearchControl.valueChanges.pipe(
+			startWith(''),
+			map((value) => this._filter(value || '')),
+		);
+	}
+
+	ngAfterViewInit(): void {
+		// Set focus on the autofocus field after view is initialized
+		if (this.autofocusField) {
+			setTimeout(() => {
+				this.focusOnField(this.autofocusField);
+			}, 200);
+		}
+	}
+
+	focusOnField(fieldName: string) {
+		// Try multiple selectors to find the input field
+		const selectors = [
+			`input[name*="${fieldName}"]`,
+			`textarea[name*="${fieldName}"]`,
+			`[data-field="${fieldName}"] input`,
+			`[data-field="${fieldName}"] textarea`,
+			`mat-form-field:has([name*="${fieldName}"]) input`,
+			`mat-form-field:has([name*="${fieldName}"]) textarea`,
+		];
+
+		for (const selector of selectors) {
+			try {
+				const element = document.querySelector(selector) as HTMLElement;
+				if (element) {
+					element.focus();
+					element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+					return;
+				}
+			} catch (e) {
+				// Continue to next selector if this one fails
+			}
+		}
+
+		// Fallback: try to find by key attribute in ndc-dynamic components
+		const allInputs = document.querySelectorAll('input, textarea');
+		for (let i = 0; i < allInputs.length; i++) {
+			const input = allInputs[i] as HTMLElement;
+			const formField = input.closest('mat-form-field');
+			if (formField) {
+				const label = formField.querySelector('mat-label');
+				if (label && label.textContent && label.textContent.trim() === fieldName) {
+					input.focus();
+					input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+					return;
+				}
+			}
+		}
+	}
+
+	private _filter(value: string): string[] {
+		return this.fields.filter((field: string) => field.toLowerCase().includes(value.toLowerCase()));
+	}
+
+	ngDoCheck() {
+		const change = this.differ.diff(this);
+		if (change) {
+			this.tableFiltersCount = Object.keys(this.tableRowFieldsShown).length;
+		}
+	}
+
+	get inputs() {
+		return filterTypes[this._connections.currentConnection.type];
+	}
+
+	setWidgets(widgets: Widget[]) {
+		this.tableWidgetsList = widgets.map((widget: Widget) => widget.field_name);
+		this.tableWidgets = Object.assign(
+			{},
+			...widgets.map((widget: Widget) => {
+				let params;
+				if (widget.widget_params !== '// No settings required') {
+					params = JSON5.parse(widget.widget_params);
+				} else {
+					params = '';
+				}
+				return {
+					[widget.field_name]: { ...widget, widget_params: params },
+				};
+			}),
+		);
+	}
+
+	trackByFn(_index: number, item: any) {
+		return item.key; // or item.id
+	}
+
+	isWidget(columnName: string) {
+		return this.tableWidgetsList.includes(columnName);
+	}
+
+	updateField = (updatedValue: any, field: string) => {
+		this.tableRowFieldsShown[field] = updatedValue;
+	};
+
+	addFilter(e) {
+		const key = e.option.value;
+		this.tableRowFieldsShown = { ...this.tableRowFieldsShown, [key]: this.tableRowFields[key] };
+		this.tableRowFieldsComparator = {
+			...this.tableRowFieldsComparator,
+			[key]: this.tableRowFieldsComparator[key] || 'eq',
+		};
+		this.fieldSearchControl.setValue('');
+	}
+
+	updateComparator(event, fieldName: string) {
+		if (event === 'empty') this.tableRowFieldsShown[fieldName] = '';
+	}
+
+	resetFilters() {
+		this.tableFilters = [];
+		this.tableRowFieldsShown = {};
+	}
+
+	getInputType(field: string) {
+		let widgetType;
+		if (this.isWidget(field)) {
+			widgetType = this.UIwidgets[this.tableWidgets[field].widget_type]?.type;
+		} else {
+			widgetType = this.inputs[this.tableTypes[field]]?.type;
+		}
+		return widgetType;
+	}
+
+	getComparatorType(typeOfComponent) {
+		if (typeOfComponent === 'text') {
+			return 'text';
+		} else if (typeOfComponent === 'number' || typeOfComponent === 'datetime') {
+			return 'number';
+		} else {
+			return 'nonComparable';
+		}
+	}
+
+	removeFilter(field) {
+		delete this.tableRowFieldsShown[field];
+		delete this.tableRowFieldsComparator[field];
+	}
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
index 3e729f0ba..d89a69f08 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.ts
@@ -1,329 +1,348 @@
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { TableField, TableRow, Widget } from 'src/app/models/table';
-import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
-import { normalizeFieldName, normalizeTableName } from 'src/app/lib/normalize';
-
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { ConnectionsService } from 'src/app/services/connections.service';
-import { DynamicModule } from 'ng-dynamic-component';
-import { ForeignKeyRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component';
-import JsonURL from "@jsonurl/jsonurl";
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import JsonURL from '@jsonurl/jsonurl';
+import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
+import { ForeignKeyRecordViewComponent } from 'src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component';
+import { recordViewFieldTypes, UIwidgets } from 'src/app/consts/record-view-types';
+import { formatFieldValue } from 'src/app/lib/format-field-value';
+import { normalizeFieldName, normalizeTableName } from 'src/app/lib/normalize';
+import { TableField, TableRow, Widget } from 'src/app/models/table';
+import { ConnectionsService } from 'src/app/services/connections.service';
 import { NotificationsService } from 'src/app/services/notifications.service';
-import { PlaceholderRecordViewComponent } from '../../../skeletons/placeholder-record-view/placeholder-record-view.component';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
-import { formatFieldValue } from 'src/app/lib/format-field-value';
+import { PlaceholderRecordViewComponent } from '../../../skeletons/placeholder-record-view/placeholder-record-view.component';
 
 @Component({
-  selector: 'app-db-table-row-view',
-  templateUrl: './db-table-row-view.component.html',
-  styleUrls: ['./db-table-row-view.component.css'],
-  imports: [
-    MatIconModule,
-    MatButtonModule,
-    ClipboardModule,
-    MatTooltipModule,
-    MatExpansionModule,
-    MatProgressSpinnerModule,
-    MatListModule,
-    RouterModule,
-    CommonModule,
-    PlaceholderRecordViewComponent,
-    ForeignKeyRecordViewComponent,
-    DynamicModule
-  ]
+	selector: 'app-db-table-row-view',
+	templateUrl: './db-table-row-view.component.html',
+	styleUrls: ['./db-table-row-view.component.css'],
+	imports: [
+		MatIconModule,
+		MatButtonModule,
+		ClipboardModule,
+		MatTooltipModule,
+		MatExpansionModule,
+		MatProgressSpinnerModule,
+		MatListModule,
+		RouterModule,
+		CommonModule,
+		PlaceholderRecordViewComponent,
+		ForeignKeyRecordViewComponent,
+		DynamicModule,
+		SignalComponentIoModule,
+	],
 })
 export class DbTableRowViewComponent implements OnInit, OnDestroy {
-  @Input() activeFilters: object;
-
-  public selectedRowCast: any;
-  public selectedRow: TableRow;
-  public columns: {
-    title: string;
-    normalizedTitle: string;
-  }[] = [];
-  public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
-  public referencedTablesURLParams: any;
-  public referencedRecords: {} = {};
-  public recordViewComponents;
-  public widgetsMap: { [key: string]: any } = {};
-  public UIwidgets = UIwidgets;
-
-  constructor(
-    private _tables: TablesService,
-    private _tableState: TableStateService,
-    private _notifications: NotificationsService,
-    private _connections: ConnectionsService,
-    private route: ActivatedRoute,
-  ) { }
-
-  ngOnInit(): void {
-    // this.connectionID = this._connections.connectionID;
-
-    const connectionType = this._connections.currentConnection.type;
-    this.recordViewComponents = recordViewFieldTypes[connectionType];
-
-    this.selectedRowCast = this._tableState.cast.subscribe((row) => {
-      this.selectedRow = row;
-
-      console.log('Selected row:', this.selectedRow);
-
-      if (row?.columnsOrder) {
-        const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
-
-        this.columns = columnsOrder.map(column => {
-          return {
-            title: column,
-            normalizedTitle: row.widgets[column]?.name || normalizeFieldName(column)
-          }
-        })
-
-        if (row.relatedRecords?.referenced_by?.length) {
-          this.referencedRecords = {};
-
-          this.referencedTables = row.relatedRecords.referenced_by
-            .map((table: any) => { return {...table, displayTableName: table.display_name || normalizeTableName(table.table_name)}});
-
-          this.referencedTablesURLParams = row.relatedRecords.referenced_by
-            .map((table: any) => {
-              const params = {[table.column_name]: {
-                eq: row.record[row.relatedRecords.referenced_on_column_name]
-              }};
-              return {
-                filters: JsonURL.stringify(params),
-                page_index: 0
-            }});
-
-          row.relatedRecords.referenced_by.forEach((table: any) => {
-            const filters = {[table.column_name]: {
-              eq: row.record[row.relatedRecords.referenced_on_column_name]
-            }};
-
-            this._tables.fetchTable({
-              connectionID: row.connectionID,
-              tableName: table.table_name,
-              requstedPage: 1,
-              chunkSize: 30,
-              filters
-            }).subscribe((res) => {
-              let identityColumn = res.identity_column;
-              let fieldsOrder = [];
-
-              const foreignKeyMap = {};
-              for (const fk of res.foreignKeys) {
-                foreignKeyMap[fk.column_name] = fk.referenced_column_name;
-              }
-
-              const tableWidgetsNameMap = res.widgets.reduce((acc, widget: Widget) => {
-                acc[widget.field_name] = widget.name;
-                return acc;
-              }, {});
-
-              // Format each row
-              const formattedRows = res.rows.map(row => {
-                const formattedRow = {};
-
-                for (const key in row) {
-                  if (foreignKeyMap[key] && typeof row[key] === 'object' && row[key] !== null) {
-                    const preferredKey = Object.keys(row[key]).find(k => k !== foreignKeyMap[key]);
-                    formattedRow[key] = preferredKey ? row[key][preferredKey] : row[key][foreignKeyMap[key]];
-                  } else {
-                    formattedRow[key] = formatFieldValue(row[key], res.structure.find((field: TableField) => field.column_name === key)?.data_type || 'text');
-                  }
-                }
-                return formattedRow;
-              })
-
-              if (res.identity_column && res.list_fields.length) {
-                identityColumn = {
-                  isSet: true,
-                  fieldName: res.identity_column,
-                  displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
-                };
-                fieldsOrder = res.list_fields
-                .filter((field: string) => field !== res.identity_column)
-                .slice(0, 3)
-                .map((field: string) => {
-                  return {
-                    fieldName: field,
-                    displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
-                  };
-                });
-              }
-
-              if (res.identity_column && !res.list_fields.length) {
-                identityColumn = {
-                  isSet: true,
-                  fieldName: res.identity_column,
-                  displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
-                };
-                fieldsOrder = res.structure
-                  .filter((field: TableField) => field.column_name !== res.identity_column)
-                  .slice(0, 3)
-                  .map((field: TableField) => {
-                    return {
-                      fieldName: field.column_name,
-                      displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
-                    };
-                  });
-              }
-
-              if (!res.identity_column && res.list_fields.length) {
-                identityColumn = {
-                  isSet: false,
-                  fieldName: res.list_fields[0],
-                  displayName: tableWidgetsNameMap[res.list_fields[0]] || normalizeFieldName(res.list_fields[0])
-                };
-                fieldsOrder = res.list_fields
-                  .slice(1, 4)
-                  .map((field: string) => {
-                    return {
-                      fieldName: field,
-                      displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
-                    };
-                  });
-              }
-
-              if (!res.identity_column && !res.list_fields.length) {
-                identityColumn = {
-                  isSet: false,
-                  fieldName: res.structure[0].column_name,
-                  displayName: tableWidgetsNameMap[res.structure[0].column_name] || normalizeFieldName(res.structure[0].column_name)
-                };
-                console.log(identityColumn);
-                fieldsOrder = res.structure
-                .slice(1, 4)
-                .map((field: TableField) => {
-                  return {
-                    fieldName: field.column_name,
-                    displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
-                  };
-                });
-              }
-
-              const tableRecords = {
-                rows: formattedRows,
-                links: res.rows.map(row => {
-                  return res.primaryColumns.reduce((keys, column) => {
-                    if (res.foreignKeys.map(foreignKey => foreignKey.column_name).includes(column.column_name)) {
-                      const referencedColumnNameOfForeignKey = foreignKeyMap[column.column_name];
-                      keys[column.column_name] = row[column.column_name][referencedColumnNameOfForeignKey];
-                    } else {
-                      keys[column.column_name] = row[column.column_name];
-                    }
-                    return keys;
-                  }, {mode: 'view'})
-                }),
-                identityColumn,
-                fieldsOrder
-              }
-
-              this.referencedRecords[table.table_name] = tableRecords;
-            });
-          });
-        }
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.selectedRowCast.unsubscribe();
-  }
-
-  isForeignKey(columnName: string) {
-    return this.selectedRow.foreignKeysList.includes(columnName);
-  }
-
-  getForeignKeyValue(field: string) {
-    if (this.selectedRow && typeof this.selectedRow.record[field] === 'object') {
-      const identityColumnName = Object.keys(this.selectedRow.record[field]).find(key => key !== this.selectedRow.foreignKeys[field].referenced_column_name);
-      const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
-      if (identityColumnName) {
-        return this.selectedRow.record[field][identityColumnName];
-      }
-      if (referencedColumnName) {
-        return this.selectedRow.record[field][referencedColumnName];
-      }
-      return this.selectedRow.record[field] || '';
-    };
-    return this.selectedRow.record[field] || '';
-  }
-
-  getForeignKeyQueryParams(field: string) {
-    if (this.selectedRow) {
-      const referencedColumnName = this.selectedRow.foreignKeys[field]?.referenced_column_name;
-
-      if (typeof this.selectedRow.record[field] === 'object') {
-        return {[referencedColumnName]: this.selectedRow.record[field][referencedColumnName]}
-      } else {
-        return {[referencedColumnName]: this.selectedRow.record[field]};
-      }
-    };
-    return {};
-  }
-
-  isWidget(columnName: string) {
-    return this.selectedRow.widgetsList.includes(columnName);
-  }
-
-  getDedicatedPageLinkParams() {
-    if (this.selectedRow) {
-      const params = {};
-      for (const key in this.selectedRow.primaryKeys) {
-        if (Object.hasOwn(this.selectedRow.primaryKeys, key)) {
-          if (this.selectedRow.foreignKeysList.includes(key)) {
-            const referencedColumnName = this.selectedRow.foreignKeys[key].referenced_column_name;
-            params[key] = this.selectedRow.record[key][referencedColumnName];
-          }
-          else {
-            params[key] = this.selectedRow.primaryKeys[key];
-          }
-
-        }
-      }
-      return params;
-    };
-    return {};
-  }
-
-  getDedicatedPageLink() {
-    if (this.selectedRow) {
-      const paramsObj = this.getDedicatedPageLinkParams();
-      const params = new URLSearchParams();
-      for (const key in paramsObj) {
-        if (Object.hasOwn(paramsObj, key)) {
-          params.set(key, paramsObj[key]);
-        }
-      }
-      return `${location.origin}${this.selectedRow.link}?${params.toString()}`;
-    };
-    return '';
-  }
-
-  showCopyNotification(message: string) {
-    this._notifications.showSuccessSnackbar(message);
-  }
-
-  stashUrlParams() {
-    this._tableState.setBackUrlParams(this.route.snapshot.queryParams.page_index, this.route.snapshot.queryParams.page_size, this.route.snapshot.queryParams.sort_active, this.route.snapshot.queryParams.sort_direction);
-    if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
-      this._tableState.setBackUrlFilters(this.activeFilters);
-    } else {
-      this._tableState.setBackUrlFilters(null);
-    }
-
-    this._tableState.clearSelection();
-  }
-
-  handleClose() {
-    this._tableState.clearSelection();
-  }
+	@Input() activeFilters: object;
+
+	public selectedRowCast: any;
+	public selectedRow: TableRow;
+	public columns: {
+		title: string;
+		normalizedTitle: string;
+	}[] = [];
+	public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
+	public referencedTablesURLParams: any;
+	public referencedRecords: {} = {};
+	public recordViewComponents;
+	public widgetsMap: { [key: string]: any } = {};
+	public UIwidgets = UIwidgets;
+
+	constructor(
+		private _tables: TablesService,
+		private _tableState: TableStateService,
+		private _notifications: NotificationsService,
+		private _connections: ConnectionsService,
+		private route: ActivatedRoute,
+	) {}
+
+	ngOnInit(): void {
+		// this.connectionID = this._connections.connectionID;
+
+		const connectionType = this._connections.currentConnection.type;
+		this.recordViewComponents = recordViewFieldTypes[connectionType];
+
+		this.selectedRowCast = this._tableState.cast.subscribe((row) => {
+			this.selectedRow = row;
+
+			console.log('Selected row:', this.selectedRow);
+
+			if (row?.columnsOrder) {
+				const columnsOrder = this.selectedRow.columnsOrder.length
+					? this.selectedRow.columnsOrder
+					: Object.keys(this.selectedRow.record);
+
+				this.columns = columnsOrder.map((column) => {
+					return {
+						title: column,
+						normalizedTitle: row.widgets[column]?.name || normalizeFieldName(column),
+					};
+				});
+
+				if (row.relatedRecords?.referenced_by?.length) {
+					this.referencedRecords = {};
+
+					this.referencedTables = row.relatedRecords.referenced_by.map((table: any) => {
+						return { ...table, displayTableName: table.display_name || normalizeTableName(table.table_name) };
+					});
+
+					this.referencedTablesURLParams = row.relatedRecords.referenced_by.map((table: any) => {
+						const params = {
+							[table.column_name]: {
+								eq: row.record[row.relatedRecords.referenced_on_column_name],
+							},
+						};
+						return {
+							filters: JsonURL.stringify(params),
+							page_index: 0,
+						};
+					});
+
+					row.relatedRecords.referenced_by.forEach((table: any) => {
+						const filters = {
+							[table.column_name]: {
+								eq: row.record[row.relatedRecords.referenced_on_column_name],
+							},
+						};
+
+						this._tables
+							.fetchTable({
+								connectionID: row.connectionID,
+								tableName: table.table_name,
+								requstedPage: 1,
+								chunkSize: 30,
+								filters,
+							})
+							.subscribe((res) => {
+								let identityColumn = res.identity_column;
+								let fieldsOrder = [];
+
+								const foreignKeyMap = {};
+								for (const fk of res.foreignKeys) {
+									foreignKeyMap[fk.column_name] = fk.referenced_column_name;
+								}
+
+								const tableWidgetsNameMap = res.widgets.reduce((acc, widget: Widget) => {
+									acc[widget.field_name] = widget.name;
+									return acc;
+								}, {});
+
+								// Format each row
+								const formattedRows = res.rows.map((row) => {
+									const formattedRow = {};
+
+									for (const key in row) {
+										if (foreignKeyMap[key] && typeof row[key] === 'object' && row[key] !== null) {
+											const preferredKey = Object.keys(row[key]).find((k) => k !== foreignKeyMap[key]);
+											formattedRow[key] = preferredKey ? row[key][preferredKey] : row[key][foreignKeyMap[key]];
+										} else {
+											formattedRow[key] = formatFieldValue(
+												row[key],
+												res.structure.find((field: TableField) => field.column_name === key)?.data_type || 'text',
+											);
+										}
+									}
+									return formattedRow;
+								});
+
+								if (res.identity_column && res.list_fields.length) {
+									identityColumn = {
+										isSet: true,
+										fieldName: res.identity_column,
+										displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column),
+									};
+									fieldsOrder = res.list_fields
+										.filter((field: string) => field !== res.identity_column)
+										.slice(0, 3)
+										.map((field: string) => {
+											return {
+												fieldName: field,
+												displayName: tableWidgetsNameMap[field] || normalizeFieldName(field),
+											};
+										});
+								}
+
+								if (res.identity_column && !res.list_fields.length) {
+									identityColumn = {
+										isSet: true,
+										fieldName: res.identity_column,
+										displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column),
+									};
+									fieldsOrder = res.structure
+										.filter((field: TableField) => field.column_name !== res.identity_column)
+										.slice(0, 3)
+										.map((field: TableField) => {
+											return {
+												fieldName: field.column_name,
+												displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name),
+											};
+										});
+								}
+
+								if (!res.identity_column && res.list_fields.length) {
+									identityColumn = {
+										isSet: false,
+										fieldName: res.list_fields[0],
+										displayName: tableWidgetsNameMap[res.list_fields[0]] || normalizeFieldName(res.list_fields[0]),
+									};
+									fieldsOrder = res.list_fields.slice(1, 4).map((field: string) => {
+										return {
+											fieldName: field,
+											displayName: tableWidgetsNameMap[field] || normalizeFieldName(field),
+										};
+									});
+								}
+
+								if (!res.identity_column && !res.list_fields.length) {
+									identityColumn = {
+										isSet: false,
+										fieldName: res.structure[0].column_name,
+										displayName:
+											tableWidgetsNameMap[res.structure[0].column_name] ||
+											normalizeFieldName(res.structure[0].column_name),
+									};
+									console.log(identityColumn);
+									fieldsOrder = res.structure.slice(1, 4).map((field: TableField) => {
+										return {
+											fieldName: field.column_name,
+											displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name),
+										};
+									});
+								}
+
+								const tableRecords = {
+									rows: formattedRows,
+									links: res.rows.map((row) => {
+										return res.primaryColumns.reduce(
+											(keys, column) => {
+												if (res.foreignKeys.map((foreignKey) => foreignKey.column_name).includes(column.column_name)) {
+													const referencedColumnNameOfForeignKey = foreignKeyMap[column.column_name];
+													keys[column.column_name] = row[column.column_name][referencedColumnNameOfForeignKey];
+												} else {
+													keys[column.column_name] = row[column.column_name];
+												}
+												return keys;
+											},
+											{ mode: 'view' },
+										);
+									}),
+									identityColumn,
+									fieldsOrder,
+								};
+
+								this.referencedRecords[table.table_name] = tableRecords;
+							});
+					});
+				}
+			}
+		});
+	}
+
+	ngOnDestroy() {
+		this.selectedRowCast.unsubscribe();
+	}
+
+	isForeignKey(columnName: string) {
+		return this.selectedRow.foreignKeysList.includes(columnName);
+	}
+
+	getForeignKeyValue(field: string) {
+		if (this.selectedRow && typeof this.selectedRow.record[field] === 'object') {
+			const identityColumnName = Object.keys(this.selectedRow.record[field]).find(
+				(key) => key !== this.selectedRow.foreignKeys[field].referenced_column_name,
+			);
+			const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
+			if (identityColumnName) {
+				return this.selectedRow.record[field][identityColumnName];
+			}
+			if (referencedColumnName) {
+				return this.selectedRow.record[field][referencedColumnName];
+			}
+			return this.selectedRow.record[field] || '';
+		}
+		return this.selectedRow.record[field] || '';
+	}
+
+	getForeignKeyQueryParams(field: string) {
+		if (this.selectedRow) {
+			const referencedColumnName = this.selectedRow.foreignKeys[field]?.referenced_column_name;
+
+			if (typeof this.selectedRow.record[field] === 'object') {
+				return { [referencedColumnName]: this.selectedRow.record[field][referencedColumnName] };
+			} else {
+				return { [referencedColumnName]: this.selectedRow.record[field] };
+			}
+		}
+		return {};
+	}
+
+	isWidget(columnName: string) {
+		return this.selectedRow.widgetsList.includes(columnName);
+	}
+
+	getDedicatedPageLinkParams() {
+		if (this.selectedRow) {
+			const params = {};
+			for (const key in this.selectedRow.primaryKeys) {
+				if (Object.hasOwn(this.selectedRow.primaryKeys, key)) {
+					if (this.selectedRow.foreignKeysList.includes(key)) {
+						const referencedColumnName = this.selectedRow.foreignKeys[key].referenced_column_name;
+						params[key] = this.selectedRow.record[key][referencedColumnName];
+					} else {
+						params[key] = this.selectedRow.primaryKeys[key];
+					}
+				}
+			}
+			return params;
+		}
+		return {};
+	}
+
+	getDedicatedPageLink() {
+		if (this.selectedRow) {
+			const paramsObj = this.getDedicatedPageLinkParams();
+			const params = new URLSearchParams();
+			for (const key in paramsObj) {
+				if (Object.hasOwn(paramsObj, key)) {
+					params.set(key, paramsObj[key]);
+				}
+			}
+			return `${location.origin}${this.selectedRow.link}?${params.toString()}`;
+		}
+		return '';
+	}
+
+	showCopyNotification(message: string) {
+		this._notifications.showSuccessSnackbar(message);
+	}
+
+	stashUrlParams() {
+		this._tableState.setBackUrlParams(
+			this.route.snapshot.queryParams.page_index,
+			this.route.snapshot.queryParams.page_size,
+			this.route.snapshot.queryParams.sort_active,
+			this.route.snapshot.queryParams.sort_direction,
+		);
+		if (this.activeFilters && Object.keys(this.activeFilters).length > 0) {
+			this._tableState.setBackUrlFilters(this.activeFilters);
+		} else {
+			this._tableState.setBackUrlFilters(null);
+		}
+
+		this._tableState.clearSelection();
+	}
+
+	handleClose() {
+		this._tableState.clearSelection();
+	}
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
index 6aa95eb51..217f1462e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
@@ -1,14 +1,19 @@
-
-
-import { SelectionModel } from '@angular/cdk/collections';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { SelectionModel } from '@angular/cdk/collections';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import {
+	ChangeDetectorRef,
+	Component,
+	EventEmitter,
+	Input,
+	OnChanges,
+	OnInit,
+	Output,
+	SimpleChanges,
+	ViewChild,
+} from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { DynamicModule } from 'ng-dynamic-component';
-
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -24,18 +29,16 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-
-import { Angulartics2OnModule } from 'angulartics2';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import JsonURL from '@jsonurl/jsonurl';
+import { Angulartics2OnModule } from 'angulartics2';
 import JSON5 from 'json5';
+import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
 import { merge } from 'rxjs';
 import { tap } from 'rxjs/operators';
-
-import { tableDisplayTypes, UIwidgets } from '../../../consts/table-display-types';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
-import { normalizeTableName } from '../../../lib/normalize';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
-import { AccessLevel } from 'src/app/models/user';
 import {
 	CustomAction,
 	TableForeignKey,
@@ -45,19 +48,20 @@ import {
 	TableRow,
 	Widget,
 } from 'src/app/models/table';
+import { AccessLevel } from 'src/app/models/user';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { TableRowService } from 'src/app/services/table-row.service';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
-
+import { tableDisplayTypes, UIwidgets } from '../../../consts/table-display-types';
+import { normalizeTableName } from '../../../lib/normalize';
+import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
+import { ForeignKeyDisplayComponent } from '../../ui-components/table-display-fields/foreign-key/foreign-key.component';
 import { DbTableExportDialogComponent } from './db-table-export-dialog/db-table-export-dialog.component';
 import { DbTableFiltersDialogComponent } from './db-table-filters-dialog/db-table-filters-dialog.component';
 import { DbTableImportDialogComponent } from './db-table-import-dialog/db-table-import-dialog.component';
 import { SavedFiltersPanelComponent } from './saved-filters-panel/saved-filters-panel.component';
-import { ForeignKeyDisplayComponent } from '../../ui-components/table-display-fields/foreign-key/foreign-key.component';
-import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
-
 
 interface Column {
 	title: string;
@@ -100,6 +104,7 @@ export interface Folder {
 		Angulartics2OnModule,
 		PlaceholderTableDataComponent,
 		DynamicModule,
+		SignalComponentIoModule,
 		ForeignKeyDisplayComponent,
 		SavedFiltersPanelComponent,
 	],
@@ -160,7 +165,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 		if (value) this.tableData = value;
 	}
 
-@ViewChild(MatPaginator) paginator: MatPaginator;
+	@ViewChild(MatPaginator) paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
 
 	public defaultSort: { column: string; direction: 'asc' | 'desc' } | null = null;
@@ -175,7 +180,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 		private route: ActivatedRoute,
 		public router: Router,
 		public dialog: MatDialog,
-    	private cdr: ChangeDetectorRef,
+		private cdr: ChangeDetectorRef,
 	) {}
 
 	ngAfterViewInit() {
@@ -187,7 +192,14 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 
 		// Subscribe to loading state to initialize default sort after data is loaded
 		this.tableData.loading$.subscribe((loading: boolean) => {
-			console.log('loading$ changed:', loading, 'sort.active:', this.sort?.active, 'sort.direction:', this.sort?.direction);
+			console.log(
+				'loading$ changed:',
+				loading,
+				'sort.active:',
+				this.sort?.active,
+				'sort.direction:',
+				this.sort?.direction,
+			);
 
 			if (!loading && this.tableData.defaultSort !== undefined) {
 				// Update defaultSort reference whenever data loads
@@ -212,7 +224,12 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 					}
 				}
 
-				console.log('After loading complete - sort.active:', this.sort?.active, 'sort.direction:', this.sort?.direction);
+				console.log(
+					'After loading complete - sort.active:',
+					this.sort?.active,
+					'sort.direction:',
+					this.sort?.direction,
+				);
 			}
 		});
 
@@ -332,32 +349,36 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 		if (this.isDefaultSort(column)) {
 			// Remove default sort
 			this.defaultSort = null;
-			this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
-				ordering: null,
-				ordering_field: null,
-			}).subscribe({
-				next: () => {
-					console.log('Personal table view settings updated - default sort removed');
-				},
-				error: (error) => {
-					console.error('Error updating personal table view settings:', error);
-				}
-			});
+			this._tables
+				.updatePersonalTableViewSettings(this.connectionID, this.name, {
+					ordering: null,
+					ordering_field: null,
+				})
+				.subscribe({
+					next: () => {
+						console.log('Personal table view settings updated - default sort removed');
+					},
+					error: (error) => {
+						console.error('Error updating personal table view settings:', error);
+					},
+				});
 		} else {
 			// Set current sort as default
 			const direction = this.sort.active === column ? this.sort.direction : 'asc';
 			this.defaultSort = { column, direction: direction as 'asc' | 'desc' };
-			this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
-				ordering: this.sort.direction === 'asc' ? TableOrdering.Ascending : TableOrdering.Descending,
-				ordering_field: column,
-			}).subscribe({
-				next: () => {
-					console.log('Personal table view settings updated - default sort removed');
-				},
-				error: (error) => {
-					console.error('Error updating personal table view settings:', error);
-				}
-			});
+			this._tables
+				.updatePersonalTableViewSettings(this.connectionID, this.name, {
+					ordering: this.sort.direction === 'asc' ? TableOrdering.Ascending : TableOrdering.Descending,
+					ordering_field: column,
+				})
+				.subscribe({
+					next: () => {
+						console.log('Personal table view settings updated - default sort removed');
+					},
+					error: (error) => {
+						console.error('Error updating personal table view settings:', error);
+					},
+				});
 		}
 	}
 
@@ -683,120 +704,122 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 		this.applyFilter.emit($event);
 	}
 
-  get sortedColumns() {
-    if (!this.tableData || !this.tableData.columns) {
-      return [];
-    }
-    // Sort columns: visible (selected=true) first, then hidden (selected=false)
-    return [...this.tableData.columns].sort((a, b) => {
-      if (a.selected === b.selected) return 0;
-      return a.selected ? -1 : 1;
-    });
-  }
-
-onColumnVisibilityChange() {
-    this.tableData.changleColumnList(this.connectionID, this.name);
-    this.cdr.detectChanges();
-    this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
-      columns_view: this.tableData.displayedDataColumns
-    }).subscribe({
-      next: () => {
-        console.log('Personal table view settings updated with custom ordering');
-      },
-      error: (error) => {
-        console.error('Error updating personal table view settings:', error);
-      }
-    });
-  }
-
-  handleActiveFilterClick(filterKey: string) {
-    const dialogRef = this.dialog.open(DbTableFiltersDialogComponent, {
-      width: '56em',
-      data: {
-        connectionID: this.connectionID,
-        tableName: this.name,
-        displayTableName: this.displayName,
-        structure: {
-          structure: this.tableData.structure,
-          foreignKeys: this.tableData.foreignKeys,
-          foreignKeysList: this.tableData.foreignKeysList,
-          widgets: this.tableData.widgets || []
-        },
-        autofocusField: filterKey
-      }
-    });
-
-    dialogRef.afterClosed().subscribe(action => {
-      if (action === 'filter' && dialogRef.componentInstance) {
-        const filtersFromDialog = {...dialogRef.componentInstance.tableRowFieldsShown};
-        const comparators = dialogRef.componentInstance.tableRowFieldsComparator;
-        this.openFilters.emit({
-          structure: this.tableData.structure,
-          foreignKeysList: this.tableData.foreignKeysList,
-          foreignKeys: this.tableData.foreignKeys,
-          widgets: this.tableData.widgets,
-          filters: filtersFromDialog,
-          comparators: comparators
-        });
-      }
-    });
-  }
-
-  onColumnsMenuDrop(event: CdkDragDrop<string[]>) {
-    if (event.previousIndex === event.currentIndex) {
-      return;
-    }
-
-    // The drag indices are based on sortedColumns (visible first, then hidden)
-    // We need to map these to the actual indices in this.tableData.columns
-    const sorted = this.sortedColumns;
-    const draggedColumn = sorted[event.previousIndex];
-    const targetColumn = sorted[event.currentIndex];
-
-    // Find actual indices in the original columns array
-    const actualPreviousIndex = this.tableData.columns.findIndex(col => col.title === draggedColumn.title);
-    const actualCurrentIndex = this.tableData.columns.findIndex(col => col.title === targetColumn.title);
-
-    if (actualPreviousIndex === -1 || actualCurrentIndex === -1) {
-      return;
-    }
-
-    // Reorder columns array in the menu
-    moveItemInArray(this.tableData.columns, actualPreviousIndex, actualCurrentIndex);
-    
-    // Update dataColumns array
-    this.tableData.dataColumns = this.tableData.columns.map(column => column.title);
-    
-    // Update displayedDataColumns to match the new order (only visible columns)
-    const newDisplayedOrder = this.tableData.columns
-      .filter(col => col.selected)
-      .map(col => col.title);
-    
-    this.tableData.displayedDataColumns = newDisplayedOrder;
-    
-    // Update full displayed columns list - THIS UPDATES THE TABLE IMMEDIATELY
-    if (this.tableData.keyAttributes && this.tableData.keyAttributes.length) {
-      this.tableData.displayedColumns = ['select', ...newDisplayedOrder, 'actions'];
-    } else {
-      this.tableData.displayedColumns = [...newDisplayedOrder];
-    }
-    
-    // Force Angular to detect changes and re-render the table immediately
-    this.cdr.detectChanges();
-
-this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
-      list_fields: this.tableData.columns.map(col => col.title)
-    }).subscribe({
-      next: () => {
-        console.log('Personal table view settings updated with custom ordering');
-      },
-      error: (error) => {
-        console.error('Error updating personal table view settings:', error);
-      }
-    });
-
-    console.log('Columns reordered in menu - table updated:', newDisplayedOrder);
-  }
+	get sortedColumns() {
+		if (!this.tableData || !this.tableData.columns) {
+			return [];
+		}
+		// Sort columns: visible (selected=true) first, then hidden (selected=false)
+		return [...this.tableData.columns].sort((a, b) => {
+			if (a.selected === b.selected) return 0;
+			return a.selected ? -1 : 1;
+		});
+	}
+
+	onColumnVisibilityChange() {
+		this.tableData.changleColumnList(this.connectionID, this.name);
+		this.cdr.detectChanges();
+		this._tables
+			.updatePersonalTableViewSettings(this.connectionID, this.name, {
+				columns_view: this.tableData.displayedDataColumns,
+			})
+			.subscribe({
+				next: () => {
+					console.log('Personal table view settings updated with custom ordering');
+				},
+				error: (error) => {
+					console.error('Error updating personal table view settings:', error);
+				},
+			});
+	}
+
+	handleActiveFilterClick(filterKey: string) {
+		const dialogRef = this.dialog.open(DbTableFiltersDialogComponent, {
+			width: '56em',
+			data: {
+				connectionID: this.connectionID,
+				tableName: this.name,
+				displayTableName: this.displayName,
+				structure: {
+					structure: this.tableData.structure,
+					foreignKeys: this.tableData.foreignKeys,
+					foreignKeysList: this.tableData.foreignKeysList,
+					widgets: this.tableData.widgets || [],
+				},
+				autofocusField: filterKey,
+			},
+		});
+
+		dialogRef.afterClosed().subscribe((action) => {
+			if (action === 'filter' && dialogRef.componentInstance) {
+				const filtersFromDialog = { ...dialogRef.componentInstance.tableRowFieldsShown };
+				const comparators = dialogRef.componentInstance.tableRowFieldsComparator;
+				this.openFilters.emit({
+					structure: this.tableData.structure,
+					foreignKeysList: this.tableData.foreignKeysList,
+					foreignKeys: this.tableData.foreignKeys,
+					widgets: this.tableData.widgets,
+					filters: filtersFromDialog,
+					comparators: comparators,
+				});
+			}
+		});
+	}
+
+	onColumnsMenuDrop(event: CdkDragDrop<string[]>) {
+		if (event.previousIndex === event.currentIndex) {
+			return;
+		}
+
+		// The drag indices are based on sortedColumns (visible first, then hidden)
+		// We need to map these to the actual indices in this.tableData.columns
+		const sorted = this.sortedColumns;
+		const draggedColumn = sorted[event.previousIndex];
+		const targetColumn = sorted[event.currentIndex];
+
+		// Find actual indices in the original columns array
+		const actualPreviousIndex = this.tableData.columns.findIndex((col) => col.title === draggedColumn.title);
+		const actualCurrentIndex = this.tableData.columns.findIndex((col) => col.title === targetColumn.title);
+
+		if (actualPreviousIndex === -1 || actualCurrentIndex === -1) {
+			return;
+		}
+
+		// Reorder columns array in the menu
+		moveItemInArray(this.tableData.columns, actualPreviousIndex, actualCurrentIndex);
+
+		// Update dataColumns array
+		this.tableData.dataColumns = this.tableData.columns.map((column) => column.title);
+
+		// Update displayedDataColumns to match the new order (only visible columns)
+		const newDisplayedOrder = this.tableData.columns.filter((col) => col.selected).map((col) => col.title);
+
+		this.tableData.displayedDataColumns = newDisplayedOrder;
+
+		// Update full displayed columns list - THIS UPDATES THE TABLE IMMEDIATELY
+		if (this.tableData.keyAttributes && this.tableData.keyAttributes.length) {
+			this.tableData.displayedColumns = ['select', ...newDisplayedOrder, 'actions'];
+		} else {
+			this.tableData.displayedColumns = [...newDisplayedOrder];
+		}
+
+		// Force Angular to detect changes and re-render the table immediately
+		this.cdr.detectChanges();
+
+		this._tables
+			.updatePersonalTableViewSettings(this.connectionID, this.name, {
+				list_fields: this.tableData.columns.map((col) => col.title),
+			})
+			.subscribe({
+				next: () => {
+					console.log('Personal table view settings updated with custom ordering');
+				},
+				error: (error) => {
+					console.error('Error updating personal table view settings:', error);
+				},
+			});
+
+		console.log('Columns reordered in menu - table updated:', newDisplayedOrder);
+	}
 
 	exportData() {
 		const convertToCSVValue = (value: any): string => {
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
index cff2fac9e..5dea77264 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -16,6 +16,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import JsonURL from '@jsonurl/jsonurl';
 import JSON5 from 'json5';
 import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
 import { defaultTimestampValues, recordEditTypes, timestampTypes, UIwidgets } from 'src/app/consts/record-edit-types';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
 import { normalizeFieldName, normalizeTableName } from 'src/app/lib/normalize';
@@ -57,6 +58,7 @@ import { BreadcrumbsComponent } from '../ui-components/breadcrumbs/breadcrumbs.c
 		MatExpansionModule,
 		MatChipsModule,
 		DynamicModule,
+		SignalComponentIoModule,
 		AlertComponent,
 		PlaceholderRowEditComponent,
 		BannerComponent,
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index b7d358a21..81950ef16 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -11,6 +11,7 @@ import { provideCodeEditor } from '@ngstack/code-editor';
 import * as Sentry from '@sentry/angular';
 import { Angulartics2Module } from 'angulartics2';
 import { DynamicModule } from 'ng-dynamic-component';
+import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io';
 import { CookieService } from 'ngx-cookie-service';
 import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
 import { NgxStripeModule } from 'ngx-stripe';
@@ -90,6 +91,7 @@ bootstrapApplication(AppComponent, {
 			ReactiveFormsModule,
 			RouterModule,
 			DynamicModule,
+			SignalComponentIoModule,
 			Angulartics2Module.forRoot(),
 			ClipboardModule,
 			DragDropModule,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 40f4224be..843472ae7 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -10696,16 +10696,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ng-dynamic-component@npm:^10.7.0":
-  version: 10.7.0
-  resolution: "ng-dynamic-component@npm:10.7.0"
+"ng-dynamic-component@npm:^10.8.0":
+  version: 10.8.2
+  resolution: "ng-dynamic-component@npm:10.8.2"
   dependencies:
     tslib: ^2.0.0
   peerDependencies:
     "@angular/common": ">=14.1.3"
     "@angular/core": ">=14.1.3"
     rxjs: ">=6.0.0"
-  checksum: 863fb60ff14c5afc540b5791ff07b9a90897b3a9ab0cf29705a35bf9ef3cd23c208333172bfaba8b994760913b69145e5a7c8f633b998486a3c7cb0c5b35ae2c
+  checksum: 60e28a58f4f78d9c18ad17b8c05741ad377b64a5b93c22cd89def47075a1b83405e587b47f855a1c7b6398c73209cd4770a24092448da4e163e159a482a9930a
   languageName: node
   linkType: hard
 
@@ -12346,7 +12346,7 @@ __metadata:
     lodash-es: ^4.17.21
     mermaid: ^11.12.1
     monaco-editor: 0.55.1
-    ng-dynamic-component: ^10.7.0
+    ng-dynamic-component: ^10.8.0
     ngx-cookie-service: ^19.0.0
     ngx-markdown: ^19.1.1
     ngx-stripe: ^19.0.0