@nauticana/sail 1.1.8 → 1.1.10

package/src/component/table/table_detail.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, output, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, linkedSignal, output, signal, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
@@ -19,11 +19,11 @@ import { OpCode } from "../../model/common";
         MatIconModule,
     ],
 })
-export class TableDetail extends BaseForm implements OnInit {
+export class TableDetail extends BaseForm {
     readonly tableNameInput = input('', { alias: 'tableName' });
-    readonly recordsInput   = input<any[]>([], { alias: 'records' });
+    readonly recordsInput   = input<Record<string, unknown>[]>([], { alias: 'records' });
     readonly parentTableName = input('');
-    readonly parentRecord = input<any>({});
+    readonly parentRecord = input<Record<string, unknown>>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
     /** Fires after any grid mutation (add/edit/delete/undelete/cancel) so a parent
@@ -32,19 +32,34 @@ export class TableDetail extends BaseForm implements OnInit {
 
     override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
 
-    records: any[] = [];
-    editingRecord: any = null;
-    originalRecord: any = null;
-    displayedColumns: string[] = [];
-    fkColumns: string[] = [];
+    // The parent owns the rows array (TableEdit saves it verbatim), so mutations
+    // happen in place; refresh() snapshots them for the template.
+    records: Record<string, unknown>[] = [];
+    readonly visibleRecords = signal<Record<string, unknown>[]>([]);
+
+    readonly editingRecord = signal<Record<string, unknown> | null>(null);
+    private originalRecord: Record<string, unknown> | null = null;
+
+    readonly displayedColumns = computed(() => {
+        this.visibleRecords();
+        return this.getDisplayedColumns(this.records);
+    });
+
+    readonly fkColumns = computed(() =>
+        this.getForeignKeyConfig(this.parentTableName())?.fk?.Columns?.map((col) => col.PascalName) ?? []);
 
     private readonly dialog = inject(MatDialog);
 
     constructor() {
         super();
-        // records is a writable array (push/splice in event handlers); keep it in sync with the input
-        // via effect rather than linkedSignal so mutations work on the consumer's array reference.
-        effect(() => { this.records = this.recordsInput(); });
+        effect(() => {
+            this.records = this.recordsInput() ?? [];
+            this.refresh();
+        });
+    }
+
+    private refresh() {
+        this.visibleRecords.set([...this.records]);
     }
 
     /**
@@ -64,21 +79,11 @@ export class TableDetail extends BaseForm implements OnInit {
     override canUpdate() { return !this.parentReadOnly() && super.canUpdate(); }
     override canDelete() { return !this.parentReadOnly() && super.canDelete(); }
 
-    ngOnInit(): void {
-        this.displayedColumns = this.getDisplayedColumns(this.records);
-        const fkCfg = this.getForeignKeyConfig(this.parentTableName());
-        if (fkCfg && fkCfg.fk && fkCfg.fk.Columns) {
-            for (const col of fkCfg.fk.Columns) {
-                this.fkColumns.push(col.PascalName);
-            }
-        }
-    }
-
     override isReadOnly(fieldName: string): boolean {
-        return (this.fkColumns.includes(fieldName) || super.isReadOnly(fieldName));
+        return (this.fkColumns().includes(fieldName) || super.isReadOnly(fieldName));
     }
 
-    openEditDialog(record: any, isNew: boolean, readOnlyColumns: string[]) {
+    openEditDialog(record: Record<string, unknown>, isNew: boolean, readOnlyColumns: string[]) {
         const dialogRef = this.dialog.open(TableForm, {
             width: this.dialogWidth,
             disableClose: true,
@@ -91,46 +96,59 @@ export class TableDetail extends BaseForm implements OnInit {
                 } else {
                     Object.assign(record, result);
                 }
+                this.refresh();
                 this.changed.emit();
             }
         });
     }
 
+    /** Finish an in-progress inline edit before starting another (its values are
+     * already in the row; leaving it un-finalized would drop them on save). */
+    private finalizeInlineEdit() {
+        if (this.editingRecord()) this.saveRow();
+    }
+
     addRecord() {
+        this.finalizeInlineEdit();
         const newRecord = this.emptyRecord();
         newRecord[this.config.opField] = OpCode.Insert;
         this.initializeForeignKeys(newRecord, this.parentTableName(), this.parentRecord());
 
-        if (this.displayedColumns.length > 6) {
-            this.openEditDialog(newRecord, true, this.fkColumns);
+        if (this.displayedColumns().length > 6) {
+            this.openEditDialog(newRecord, true, this.fkColumns());
         } else {
             this.records.push(newRecord);
-            this.isNew = true;
+            this.isNew.set(true);
             this.originalRecord = null;
-            this.editingRecord = newRecord;
+            this.editingRecord.set(newRecord);
+            this.refresh();
         }
     }
 
-    editRow(record: any) {
-        if (this.displayedColumns.length > 6) {
-            this.openEditDialog(record, false, this.fkColumns);
+    editRow(record: Record<string, unknown>) {
+        if (this.displayedColumns().length > 6) {
+            this.openEditDialog(record, false, this.fkColumns());
         } else {
-            this.editingRecord = record;
-            this.isNew = record[this.config.opField] === OpCode.Insert;
+            this.finalizeInlineEdit();
+            this.isNew.set(record[this.config.opField] === OpCode.Insert);
             this.originalRecord = {...record};
             this.formatRecordTimeStamp(record);
+            this.editingRecord.set(record);
+            this.refresh();
         }
     }
 
     saveRow() {
-        this.readyToSave(this.editingRecord);
-        this.editingRecord = null;
+        const editing = this.editingRecord();
+        if (editing) this.readyToSave(editing, this.originalRecord);
+        this.editingRecord.set(null);
         this.originalRecord = null;
-        this.isNew = false;
+        this.isNew.set(false);
+        this.refresh();
         this.changed.emit();
     }
 
-    cancelRow(record: any) {
+    cancelRow(record: Record<string, unknown>) {
         if (this.originalRecord) {
             Object.assign(record, this.originalRecord);
         } else {
@@ -139,13 +157,14 @@ export class TableDetail extends BaseForm implements OnInit {
                 this.records.splice(index, 1);
             }
         }
-        this.editingRecord = null;
+        this.editingRecord.set(null);
         this.originalRecord = null;
-        this.isNew = false;
+        this.isNew.set(false);
+        this.refresh();
         this.changed.emit();
     }
 
-    deleteRow(record: any) {
+    deleteRow(record: Record<string, unknown>) {
         if (record[this.config.opField] === OpCode.Insert) {
             const index = this.records.indexOf(record);
             if (index > -1) {
@@ -154,13 +173,15 @@ export class TableDetail extends BaseForm implements OnInit {
         } else {
             record[this.config.opField] = OpCode.Delete;
         }
+        this.refresh();
         this.changed.emit();
     }
 
-    unDeleteRow(record: any) {
+    unDeleteRow(record: Record<string, unknown>) {
         if (record[this.config.opField] === OpCode.Delete) {
             record[this.config.opField] = OpCode.Update;
         }
+        this.refresh();
         this.changed.emit();
     }
 }

package/src/component/table/table_edit.html

@@ -1,8 +1,8 @@
 <h1 class="mat-h1 table-edit-title">
     <span class="table-edit-title-text">
-        @if (title) {
-            {{ title }}
-        } @else if (isNew) {
+        @if (title()) {
+            {{ title() }}
+        } @else if (isNew()) {
             New {{ getCaption() }} Record
         } @else {
             {{ getCaption() }} Details
@@ -18,7 +18,7 @@
 
 <div class="edit-container">
     <div class="actions-bar">
-        @if (isReadOnlyMode) {
+        @if (isReadOnlyMode()) {
             @if (canUpdate()) {
                 <button matButton="elevated" class="primary" (click)="onEdit()">Edit</button>
             }
@@ -28,7 +28,7 @@
             @if (canDelete()) {
                 <button matButton class="warn" (click)="onDelete()">Delete</button>
             }
-            @for (action of getActions(true); track action.action) {
+            @for (action of recordActions(); track action.action) {
                 @if (canExecuteAction(action)) {
                     <button matButton="outlined" type="button"
                             [title]="action.caption"
@@ -44,20 +44,24 @@
         }
     </div>
 
-    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    @if (saveError()) {
+        <p class="table-edit-error" role="alert">{{ saveError() }}</p>
+    }
+
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord()" (recordChange)="editableRecord.set($event)" [isReadOnly]="isReadOnlyFn"></sail-record-form>
 
-    @if (tabCount > 0) {
+    @if (tabFields().length > 0) {
         <mat-tab-group>
-        @for (key of tabFields; track key) {
+        @for (key of tabFields(); track key) {
             @if (cacheService.canRead(getTableName(key))) {
                 <mat-tab [label]="key">
                     <div class="tab-content">
                         <sail-table-detail
-                           [records]="editableRecord[key]"
+                           [records]="childRecords(key)"
                            [tableName]="getTableName(key)"
                            [parentTableName]="tableName()"
-                           [parentRecord]="editableRecord"
-                           [parentReadOnly]="isReadOnlyMode">
+                           [parentRecord]="editableRecord()"
+                           [parentReadOnly]="isReadOnlyMode()">
                         </sail-table-detail>
                     </div>
                 </mat-tab>

package/src/component/table/table_edit.ts

@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, OnInit, signal, ViewEncapsulation } from "@angular/core";
 import { BaseForm } from "../abstract/base_form";
+import { errorDetail } from "../../util/errors";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { MatTabsModule } from "@angular/material/tabs";
 import { TableDetail } from "./table_detail";
@@ -8,6 +9,13 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 import { OpCode } from "../../model/common";
 
+interface TableEditDialogData {
+    record?: Record<string, unknown>;
+    tableName?: string;
+    apiName?: string;
+    isNew?: boolean;
+}
+
 @Component({
     selector: 'sail-table-edit',
     templateUrl: './table_edit.html',
@@ -22,70 +30,66 @@ import { OpCode } from "../../model/common";
     ]
 })
 export class TableEdit extends BaseForm implements OnInit {
-    readonly recordInput    = input<any>({}, { alias: 'record' });
+    readonly recordInput    = input<Record<string, unknown>>({}, { alias: 'record' });
     readonly tableNameInput = input('',      { alias: 'tableName' });
     readonly apiNameInput   = input('',      { alias: 'apiName' });
 
-    readonly record              = linkedSignal<any, any>({       source: () => this.recordInput(),    computation: (v, p) => v ?? p?.value ?? {} });
+    readonly record              = linkedSignal<Record<string, unknown>, Record<string, unknown>>({ source: () => this.recordInput(), computation: (v, p) => v ?? p?.value ?? {} });
     override readonly tableName  = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
     readonly apiName             = linkedSignal<string, string>({ source: () => this.apiNameInput(),   computation: (v, p) => v || p?.value || '' });
 
-    isReadOnlyMode = true;
+    readonly isReadOnlyMode = signal(true);
+    readonly saveError = signal('');
     private readonly dialogRef = inject(MatDialogRef<TableEdit>, {optional: true});
-    private readonly dialogData = inject<{record?: any; tableName?: string; apiName?: string; isNew?: boolean} | null>(MAT_DIALOG_DATA, {optional: true});
-    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly dialogData = inject<TableEditDialogData | null>(MAT_DIALOG_DATA, {optional: true});
+
+    /** Tabs are the table's child relations (rest_api_child metadata). */
+    protected readonly tabFields = computed(() =>
+        (this.cacheService.getTableDefinition(this.tableName())?.Children ?? []).map((child) => child.PascalName));
 
-    protected tabCount = 0;
-    protected tabFields: string[] = [];
     protected get isDialog(): boolean { return !!this.dialogRef; }
     /** Snapshot taken when the user enters edit mode; used for dirty-tracking on save. */
-    private originalSnapshot: any = null;
+    private originalSnapshot: Record<string, unknown> | null = null;
 
     ngOnInit(): void {
         if (this.dialogData) {
             this.record.set(this.dialogData.record ?? {});
             this.tableName.set(this.dialogData.tableName ?? '');
             this.apiName.set(this.dialogData.apiName ?? '');
-            this.isNew = this.dialogData.isNew ?? false;
-            this.isReadOnlyMode = !this.isNew;
+            this.isNew.set(this.dialogData.isNew ?? false);
+            this.isReadOnlyMode.set(!this.isNew());
         }
-        if (this.isNew) {
-            this.initializeNewRecord();
-            this.buildTabs();
+        if (this.isNew()) {
+            this.setEditableRecord(Object.assign(this.emptyRecord(), this.record()));
         } else {
             this.fetchFullRecord();
         }
     }
 
-    private initializeNewRecord() {
-        this.editableRecord = this.emptyRecord();
-        const rec = this.record();
-        if (rec) Object.assign(this.editableRecord, rec);
+    /** Single entry point: seeds an empty array for any child relation the record lacks. */
+    private setEditableRecord(record: Record<string, unknown>) {
+        for (const field of this.tabFields()) {
+            if (!this.isArray(record[field])) record[field] = [];
+        }
+        this.editableRecord.set(record);
     }
 
-    /**
-     * Tabs are the table's child relations (rest_api_child metadata), not just
-     * whatever array fields the backend happened to embed. Seed an empty array
-     * for any child the response omitted so its grid renders (and accepts new rows).
-     */
-    private buildTabs() {
-        const tableDef = this.cacheService.getTableDefinition(this.tableName());
-        this.tabFields = (tableDef?.Children ?? []).map((child) => child.PascalName);
-        for (const field of this.tabFields) {
-            if (!this.isArray(this.editableRecord[field])) this.editableRecord[field] = [];
-        }
-        this.tabCount = this.tabFields.length;
+    /** Child rows for a tab; buildTabs guarantees the array exists. */
+    childRecords(key: string): Record<string, unknown>[] {
+        const value = this.editableRecord()[key];
+        return Array.isArray(value) ? value as Record<string, unknown>[] : [];
     }
 
     /** Re-fetch the row from the backend after a server-side mutation (TableAction success, etc.). */
     protected override onActionSuccess(): void {
-        if (!this.isNew) this.fetchFullRecord();
+        if (!this.isNew()) this.fetchFullRecord();
     }
 
     private fetchFullRecord() {
         const rec = this.record();
-        this.editableRecord = {...rec};
-        this.formatRecordTimeStamp(this.editableRecord);
+        const provisional = {...rec};
+        this.formatRecordTimeStamp(provisional);
+        this.setEditableRecord(provisional);
 
         const filter = this.getKeyFilters(rec);
         if (!filter) {
@@ -93,73 +97,91 @@ export class TableEdit extends BaseForm implements OnInit {
             return;
         }
 
-        this.backendService.get<any>(this.apiName(), filter).subscribe({
+        this.backendService.get<Record<string, unknown> | Record<string, unknown>[]>(this.apiName(), filter).subscribe({
             next: (record) => {
                 if (!record) {
                     console.error('failed to read single record from the backend');
                     return;
                 }
-                this.editableRecord = Array.isArray(record) ? record[0] : record;
-                this.formatRecordTimeStamp(this.editableRecord);
-                this.buildTabs();
-                this.cdr.markForCheck();
+                const full = Array.isArray(record) ? record[0] : record;
+                this.formatRecordTimeStamp(full);
+                this.setEditableRecord(full);
             },
             error: (error) => {
                 console.error('failed to fetch full record details', error);
+                this.saveError.set(errorDetail(error, 'Failed to load record details.'));
             },
         });
     }
 
     override isReadOnly(fieldName: string): boolean {
-        if (this.isReadOnlyMode) return true;
+        if (this.isReadOnlyMode()) return true;
         return super.isReadOnly(fieldName);
     }
 
     onEdit() {
-        this.isReadOnlyMode = false;
-        this.isNew = false;
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.isReadOnlyMode.set(false);
+        this.isNew.set(false);
         // Snapshot scalar fields only; children arrays are dirty-tracked per row.
-        this.originalSnapshot = { ...this.editableRecord };
+        this.originalSnapshot = { ...this.editableRecord() };
     }
 
     onNew() {
-        this.isReadOnlyMode = false;
-        this.isNew = true;
-        this.editableRecord = this.emptyRecord();
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.isReadOnlyMode.set(false);
+        this.isNew.set(true);
+        this.originalSnapshot = null;
+        this.setEditableRecord(this.emptyRecord());
     }
 
     onSave() {
-        const result = {...this.editableRecord};
+        const wasNew = this.isNew();
+        const result = {...this.editableRecord()};
         this.readyToSave(result, this.originalSnapshot);
 
         if (this.dialogRef) {
             this.dialogRef.close(result);
-        } else {
-            this.backendService.post(this.apiName(), result).subscribe({
-                next: () => {
-                    this.isReadOnlyMode = true;
-                    this.isNew = false;
-                    this.isReadOnlyBound = this.isReadOnly.bind(this);
-                    this.cdr.markForCheck();
-                },
-                error: (err) => console.error('Save failed', err),
-            });
+            return;
         }
+        this.backendService.post(this.apiName(), result).subscribe({
+            next: () => {
+                this.saveError.set('');
+                this.isReadOnlyMode.set(true);
+                this.isNew.set(false);
+                if (wasNew) {
+                    // Sequence-keyed inserts have no client-side PK to refetch by;
+                    // demote op_code so a second Save can't re-insert a duplicate.
+                    const keys = this.getKeyFilters(result);
+                    const keysComplete = !!keys && Object.values(keys).every((v) => v !== '');
+                    if (keysComplete) {
+                        this.record.set(result);
+                        this.fetchFullRecord();
+                    } else {
+                        this.editableRecord.update((rec) => ({...rec, [this.config.opField]: OpCode.Readonly}));
+                    }
+                } else {
+                    this.fetchFullRecord();
+                }
+            },
+            error: (err) => {
+                console.error('Save failed', err);
+                this.saveError.set(errorDetail(err, 'Save failed.'));
+            },
+        });
     }
 
     onDelete() {
         if (confirm('Are you sure you want to delete this record?')) {
-            const result = {...this.editableRecord};
+            const result = {...this.editableRecord()};
             result[this.config.opField] = OpCode.Delete;
             this.backendService.post(this.apiName(), result).subscribe({
                 next: () => {
-                    this.isReadOnlyMode = true;
-                    this.isReadOnlyBound = this.isReadOnly.bind(this);
-                    this.cdr.markForCheck();
+                    this.saveError.set('');
+                    this.isReadOnlyMode.set(true);
+                },
+                error: (err) => {
+                    console.error('Delete failed', err);
+                    this.saveError.set(errorDetail(err, 'Delete failed.'));
                 },
-                error: (err) => console.error('Delete failed', err),
             });
         }
     }
@@ -169,9 +191,14 @@ export class TableEdit extends BaseForm implements OnInit {
             this.dialogRef.close();
             return;
         }
-        this.isReadOnlyMode = true;
-        this.editableRecord = {...this.record()};
-        this.isNew = false;
-        this.isReadOnlyBound = this.isReadOnly.bind(this);
+        this.saveError.set('');
+        this.isReadOnlyMode.set(true);
+        this.isNew.set(false);
+        // Refetch, not shallow-copy: the source row lacks the child-tab arrays.
+        if (Object.keys(this.record()).length > 0) {
+            this.fetchFullRecord();
+        } else {
+            this.setEditableRecord(this.emptyRecord());
+        }
     }
 }

package/src/component/table/table_list.html

@@ -4,7 +4,7 @@
     @if (canCreate()) {
         <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
-    @for (action of getActions(false); track action.action) {
+    @for (action of tableActions(); track action.action) {
         @if (canExecuteAction(action)) {
             <button matButton="outlined" type="button"
                     [title]="action.caption"
@@ -16,33 +16,56 @@
     }
 </div>
 
+@if (viewError()) {
+    <p class="table-list__error" role="alert">{{ viewError() }}</p>
+}
+
 <table>
     <thead>
         <tr>
-            @for (column of displayedColumns; track column) {
-                <th>{{ colCaption(column) }}</th>
+            @for (column of displayedColumns(); track column) {
+                <th scope="col">
+                    @if (column !== 'actions') {
+                        <button type="button" class="table-list__sort" (click)="onSortColumn(column)"
+                                [attr.aria-sort]="sortColumn() === column ? (sortAscending() ? 'ascending' : 'descending') : null">
+                            {{ colCaption(column) }}
+                            @if (sortColumn() === column) {
+                                <mat-icon>{{ sortAscending() ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>
+                            }
+                        </button>
+                    } @else {
+                        {{ colCaption(column) }}
+                    }
+                </th>
             }
         </tr>
     </thead>
-@if (records.length > 0) {
+@if (sortedRecords().length > 0) {
     <tbody>
-    @for (record of records; track trackByRecord($index, record)) {
+    @for (record of sortedRecords(); track trackByRecord($index, record)) {
         <tr>
-        @for (column of displayedColumns; track column) {
+        @for (column of displayedColumns(); track column) {
             <td>
             @if (isLinkColumn(column)) {
-                <a tabindex="0" role="button" (click)="editRecord(record)" (keydown.enter)="editRecord(record)">{{ displayValue(column, record[column]) }}</a>
+                <a tabindex="0" role="button" (click)="editRecord(record)"
+                   (keydown.enter)="editRecord(record)"
+                   (keydown.space)="$event.preventDefault(); editRecord(record)">{{ displayValue(column, record[column]) }}</a>
             } @else if (isBoolean(column)) {
-                <mat-checkbox [checked]="record[column] === true || record[column] === 'T'" disabled></mat-checkbox>
+                <mat-checkbox [checked]="record[column] === true || record[column] === 'T'" disabled [aria-label]="colCaption(column)"></mat-checkbox>
             } @else if (column !== 'actions') {
                 {{ displayValue(column, record[column]) }}
             } @else {
-                <button matIconButton type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
-                <button matIconButton type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
-                @for (action of getActions(true); track action.action) {
+                @if (canUpdate() || canRead()) {
+                    <button matIconButton type="button" (click)="editRecord(record)" title="Edit" aria-label="Edit"><mat-icon>edit</mat-icon></button>
+                }
+                @if (canDelete()) {
+                    <button matIconButton type="button" (click)="deleteRecord(record)" title="Delete" aria-label="Delete"><mat-icon>delete</mat-icon></button>
+                }
+                @for (action of recordActions(); track action.action) {
                     @if (canExecuteAction(action)) {
                         <button matIconButton type="button"
                                 [title]="action.caption"
+                                [attr.aria-label]="action.caption"
                                 (click)="executeAction(action, record)">
                             <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
                         </button>
@@ -57,6 +80,16 @@
 }
 </table>
 
-@if (records.length === 0 && displayedColumns.length > 0) {
+@if (total() > pageSizeOptions[0]) {
+    <mat-paginator [length]="total()"
+                   [pageIndex]="pageIndex()"
+                   [pageSize]="pageSize()"
+                   [pageSizeOptions]="pageSizeOptions"
+                   (page)="onPage($event)"
+                   aria-label="Select page">
+    </mat-paginator>
+}
+
+@if (records().length === 0 && displayedColumns().length > 0 && !viewError()) {
     <p class="empty-state">No records found.</p>
 }