@taon-dev/ui 21.0.25 → 21.0.27

package/ts-source/websql-code/taon-datatable/taon-datatable.component.ts

@@ -14,6 +14,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, inject, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -25,6 +26,7 @@ import { Translation } from '@taon-dev/i18n/websql';
 import { getDefaultModel } from 'ng2-rest/websql';
 import { BehaviorSubject, Observable, Subject, catchError, debounceTime, distinctUntilChanged, finalize, from, map, of, startWith, switchMap, tap, } from 'rxjs';
 import { Symbols as TaonSymbols, TaonBaseCrudController, TaonBaseEntity, TaonPaginationSort, TaonPaginationQuery, ClassHelpers, Taon, } from 'taon/websql';
+import { TaonStor } from 'taon-storage/websql';
 import { _, json5 } from 'tnp-core/websql';
 const t = Translation.for('src/lib/taon-datatable/taon-datatable.component.ts', { "src/lib/taon-datatable/taon-datatable.component.html": { "en-US": async () => (await import('./i18n/taon-datatable.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-datatable.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-datatable.component.html.de-DE.i18n.data')).default }, "src/lib/taon-datatable/taon-datatable.component.ts": { "en-US": async () => (await import('./i18n/taon-datatable.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-datatable.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-datatable.component.ts.de-DE.i18n.data')).default } } as any);
 const defaultColumns: MtxGridColumn[] = [
@@ -38,6 +40,17 @@ const defaultColumns: MtxGridColumn[] = [
     },
 ];
 type SearchMode = 'simple' | 'advanced';
+type TablePaginationPersistence = 'none' | 'query-params' | 'local-storage' | 'session-storage';
+type TableFilterPersistence = 'none' | 'query-params';
+interface TablePaginationState {
+    pageNumber: number;
+    pageSize: number;
+}
+interface TablePaginationStorage {
+    (): TablePaginationState;
+    ready(): Promise<void>;
+    set(value: TablePaginationState): Promise<void>;
+}
 @Component({
     selector: 'taon-datatable',
     standalone: true,
@@ -61,6 +74,8 @@ export class TaonDatatableComponent implements OnInit {
     readonly t = t.for(this);
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
+    private readonly route = inject(ActivatedRoute);
+    private readonly router = inject(Router);
     @Input()
     pageNumber = 1;
     @Input()
@@ -85,6 +100,14 @@ export class TaonDatatableComponent implements OnInit {
     @Input()
     searchMode: SearchMode = 'advanced';
     @Input()
+    filtersTemplate?: TemplateRef<unknown>;
+    @Input()
+    storeTablePagination: TablePaginationPersistence = 'none';
+    @Input()
+    storeTableFilters: TableFilterPersistence = 'none';
+    @Input()
+    tableId?: string;
+    @Input()
     callQueryMethod?: string;
     private _data?: any[];
     @Input()
@@ -119,6 +142,7 @@ export class TaonDatatableComponent implements OnInit {
     private readonly searchChange$ = new Subject<string>();
     readonly data$: Observable<any[]> = this.reload$.pipe(switchMap(() => this.loadData()));
     expandedRows = new Set<any>();
+    private paginationStorage?: TablePaginationStorage;
     get entity(): typeof TaonBaseEntity | undefined {
         return this.entityCrudController?.entityClassResolveFn();
     }
@@ -143,10 +167,17 @@ export class TaonDatatableComponent implements OnInit {
         this.showPaginator = _.isBoolean(this.showPaginator)
             ? this.showPaginator
             : Boolean(this.entity) || this.offlineMode;
+        if (this.storeTableFilters === 'query-params') {
+            this.columnFilters = this.readQueryFilters();
+        }
+        void this.restorePagination().then(() => this.subscribeToData());
+    }
+    private subscribeToData(): void {
         this.searchChange$
             .pipe(debounceTime(400), distinctUntilChanged(), tap(search => {
             this.searchValue = search;
             this.pageNumber = 1;
+            this.persistPagination();
             this.reload();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
@@ -162,10 +193,12 @@ export class TaonDatatableComponent implements OnInit {
         this.searchValue = '';
         this.columnFilters = {};
         this.pageNumber = 1;
+        this.persistCurrentTableState();
         this.reload();
     }
     applyAdvancedFilters(): void {
         this.pageNumber = 1;
+        this.persistCurrentTableState();
         this.reload();
     }
     toggleAdvancedSearch(): void {
@@ -174,8 +207,147 @@ export class TaonDatatableComponent implements OnInit {
     getNextPage(event: PageEvent): void {
         this.pageNumber = event.pageIndex + 1;
         this.pageSize = event.pageSize;
+        this.persistPagination();
         this.reload();
     }
+    private get tableIdentity(): string {
+        const explicitId = this.tableId?.trim();
+        if (explicitId) {
+            return explicitId;
+        }
+        const routePath = this.route.pathFromRoot
+            .map(route => route.snapshot.url.map(segment => segment.path).join('/'))
+            .filter(Boolean)
+            .join('/');
+        const entityName = this.entity ? ClassHelpers.getName(this.entity) : 'table';
+        return `${entityName}-${routePath || 'root'}`;
+    }
+    private get queryParamPrefix(): string {
+        return `dt.${encodeURIComponent(this.tableIdentity)}`;
+    }
+    private async restorePagination(): Promise<void> {
+        const prefix = this.queryParamPrefix;
+        if (this.storeTablePagination === 'query-params') {
+            const pageNumber = Number(this.route.snapshot.queryParamMap.get(`${prefix}.page`));
+            const pageSize = Number(this.route.snapshot.queryParamMap.get(`${prefix}.pageSize`));
+            if (Number.isSafeInteger(pageNumber) && pageNumber > 0) {
+                this.pageNumber = pageNumber;
+            }
+            if (Number.isSafeInteger(pageSize) && pageSize > 0) {
+                this.pageSize = pageSize;
+            }
+            return;
+        }
+        if (this.storeTablePagination !== 'local-storage' &&
+            this.storeTablePagination !== 'session-storage') {
+            return;
+        }
+        const options = {
+            keyOrPath: `datatable-${this.tableIdentity}-pagination`,
+            defaultValue: {
+                pageNumber: this.pageNumber,
+                pageSize: this.pageSize,
+            },
+        };
+        this.paginationStorage =
+            this.storeTablePagination === 'local-storage'
+                ? TaonStor.inLocalstorage(options, TaonDatatableComponent)
+                : TaonStor.inSessionStorage(options, TaonDatatableComponent);
+        try {
+            await this.paginationStorage.ready();
+            const state = this.paginationStorage();
+            if (Number.isSafeInteger(state.pageNumber) && state.pageNumber > 0) {
+                this.pageNumber = state.pageNumber;
+            }
+            if (Number.isSafeInteger(state.pageSize) && state.pageSize > 0) {
+                this.pageSize = state.pageSize;
+            }
+        }
+        catch (error) {
+            console.error('[taon-datatable] Unable to restore pagination state', error);
+        }
+    }
+    private persistPagination(): void {
+        const state = {
+            pageNumber: this.pageNumber,
+            pageSize: this.pageSize,
+        };
+        if (this.storeTablePagination === 'query-params') {
+            this.updateQueryParams({
+                [`${this.queryParamPrefix}.page`]: String(state.pageNumber),
+                [`${this.queryParamPrefix}.pageSize`]: String(state.pageSize),
+            });
+        }
+        else if (this.paginationStorage) {
+            void this.paginationStorage.set(state).catch(error => {
+                console.error('[taon-datatable] Unable to persist pagination state', error);
+            });
+        }
+    }
+    private readQueryFilters(): Record<string, string> {
+        const filterPrefix = `${this.queryParamPrefix}.filter.`;
+        const filters: Record<string, string> = {};
+        for (const key of this.route.snapshot.queryParamMap.keys) {
+            if (!key.startsWith(filterPrefix)) {
+                continue;
+            }
+            try {
+                const field = decodeURIComponent(key.slice(filterPrefix.length));
+                const value = this.route.snapshot.queryParamMap.get(key);
+                if (field && value !== null) {
+                    filters[field] = value;
+                }
+            }
+            catch (error) {
+                console.error('[taon-datatable] Invalid filter query parameter', error);
+            }
+        }
+        return filters;
+    }
+    private persistFilters(): void {
+        if (this.storeTableFilters !== 'query-params') {
+            return;
+        }
+        this.updateQueryParams(this.filterQueryUpdates());
+    }
+    private persistCurrentTableState(): void {
+        if (this.storeTablePagination === 'query-params' &&
+            this.storeTableFilters === 'query-params') {
+            this.updateQueryParams({
+                [`${this.queryParamPrefix}.page`]: String(this.pageNumber),
+                [`${this.queryParamPrefix}.pageSize`]: String(this.pageSize),
+                ...this.filterQueryUpdates(),
+            });
+            return;
+        }
+        this.persistPagination();
+        this.persistFilters();
+    }
+    private filterQueryUpdates(): Record<string, string | null> {
+        const filterPrefix = `${this.queryParamPrefix}.filter.`;
+        const updates: Record<string, string | null> = {};
+        for (const key of this.route.snapshot.queryParamMap.keys) {
+            if (key.startsWith(filterPrefix)) {
+                updates[key] = null;
+            }
+        }
+        for (const [field, value] of Object.entries(this.cleanFilters(this.columnFilters))) {
+            updates[`${filterPrefix}${encodeURIComponent(field)}`] = value;
+        }
+        return updates;
+    }
+    private updateQueryParams(queryParams: Record<string, string | null>): void {
+        void this.router
+            .navigate([], {
+            relativeTo: this.route,
+            queryParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .catch(error => {
+            console.error('[taon-datatable] Unable to update table query parameters', error);
+        });
+    }
     sortChanged(event: any): void {
         const field = event?.active ?? event?.field;
         const direction = event?.direction ?? '';

package/ts-source/websql-code-prod/build-info._auto-generated_.ts

@@ -15,4 +15,4 @@ export const APP_ID = 'com.domain.example.ui';
 export const BUILD_BASE_HREF = '';
 export const PROJECT_NPM_NAME = '@taon-dev/ui';
 export const CURRENT_PACKAGE_TAON_VERSION = 'v21';
-export const CURRENT_PACKAGE_VERSION = '21.0.25';
+export const CURRENT_PACKAGE_VERSION = '21.0.27';

package/ts-source/websql-code-prod/index._auto-generated_.ts

@@ -14,6 +14,7 @@ export * from './build-info._auto-generated_';
 export * from './my-organization-proj';
 export * from './start-cli';
 export * from './directives/taon-horizontal-wheel-scrolling.directive';
+export * from './taon-admin-layout/taon-admin-content-footer.service';
 export * from './taon-admin-layout/taon-admin-layout.component';
 export * from './taon-admin-layout/taon-admin-layout.models';
 export * from './taon-admin-layout/taon-admin-menu-context';

package/ts-source/websql-code-prod/taon-admin-layout/taon-admin-content-footer.service.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}

package/ts-source/websql-code-prod/taon-admin-layout/taon-admin-content-footer.service.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:watch:lib
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Injectable, TemplateRef, signal } from '@angular/core';
+@Injectable({ providedIn: 'root' })
+export class TaonAdminContentFooterService {
+    readonly currentTemplate = signal<TemplateRef<unknown> | undefined>(undefined);
+    setTemplate(template?: TemplateRef<unknown>): void {
+        this.currentTemplate.set(template);
+    }
+}

package/ts-source/websql-code-prod/taon-admin-layout/taon-admin-layout.component.html

@@ -228,7 +228,10 @@
       
 
       <footer class="admin-content-footer">
-        <ng-content select="[contentFooter]" />
+        <ng-container
+          [ngTemplateOutlet]="
+            taonAdminContentFooterService.currentTemplate()
+          " />
       </footer>
     </main>
   </div>

package/ts-source/websql-code-prod/taon-admin-layout/taon-admin-layout.component.ts

@@ -19,6 +19,7 @@ import { NavigationEnd, Route, Router, RouterLink, RouterOutlet, Routes, } from
 import { Translation } from '@taon-dev/i18n/websql-prod';
 import { filter, Subscription } from 'rxjs';
 import { Taon__NS____FILE_RELATIVE_PATH, Taon__NS__asset, Taon__NS__assetsFrom, Taon__NS__assetsListFrom, Taon__NS__createContext, Taon__NS__createContextTemplate, Taon__NS__error, Taon__NS__getResponseValue, Taon__NS__isBrowser, Taon__NS__isElectron, Taon__NS__isNode, Taon__NS__isWebSQL, Taon__NS__LANG_IMPORT_MAP, Taon__NS__removeLoader, Taon__NS__Response, Taon__NS__ResponseHtml, Taon__NS__StartParams } from 'taon/websql-prod';
+import { TaonAdminContentFooterService } from './taon-admin-content-footer.service';
 import { resolveTaonAdminMenuItem, TaonAdminRoute, } from './taon-admin-layout.models';
 import { TaonAdminMenuContext } from './taon-admin-menu-context';
 import { TaonAdminPageTabsComponent } from './taon-admin-page-tabs.component';
@@ -43,6 +44,7 @@ export class TaonAdminLayoutComponent implements OnInit, AfterViewInit, OnDestro
     protected readonly t = t.for(this);
     protected readonly menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
         new TaonAdminMenuContext();
+    protected readonly taonAdminContentFooterService = inject(TaonAdminContentFooterService);
     private _routes: Routes = [];
     @Input({ required: true })
     set routes(routes: Routes) {

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.de-DE.i18n.data.ts

@@ -36,17 +36,17 @@ export default {
         },
         {
             "gettextString": "Clear",
-            "lineNumber": 101,
+            "lineNumber": 108,
             "translation": "Klar"
         },
         {
             "gettextString": "Apply filters",
-            "lineNumber": 111,
+            "lineNumber": 118,
             "translation": "Filter anwenden"
         },
         {
             "gettextString": "Loading...",
-            "lineNumber": 128,
+            "lineNumber": 135,
             "translation": "Lade..."
         }
     ]

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.de-DE.po

@@ -12,14 +12,14 @@ msgstr "Filter"
 msgid "Add"
 msgstr "Hinzufügen"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:101
+#: src/lib/taon-datatable/taon-datatable.component.html:108
 msgid "Clear"
 msgstr "Klar"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:111
+#: src/lib/taon-datatable/taon-datatable.component.html:118
 msgid "Apply filters"
 msgstr "Filter anwenden"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:128
+#: src/lib/taon-datatable/taon-datatable.component.html:135
 msgid "Loading..."
 msgstr "Lade..."

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.en-US.i18n.data.ts

@@ -36,17 +36,17 @@ export default {
         },
         {
             "gettextString": "Clear",
-            "lineNumber": 101,
+            "lineNumber": 108,
             "translation": "Clear"
         },
         {
             "gettextString": "Apply filters",
-            "lineNumber": 111,
+            "lineNumber": 118,
             "translation": "Apply filters"
         },
         {
             "gettextString": "Loading...",
-            "lineNumber": 128,
+            "lineNumber": 135,
             "translation": "Loading..."
         }
     ]

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.en-US.po

@@ -12,14 +12,14 @@ msgstr "Filters"
 msgid "Add"
 msgstr "Add"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:101
+#: src/lib/taon-datatable/taon-datatable.component.html:108
 msgid "Clear"
 msgstr "Clear"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:111
+#: src/lib/taon-datatable/taon-datatable.component.html:118
 msgid "Apply filters"
 msgstr "Apply filters"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:128
+#: src/lib/taon-datatable/taon-datatable.component.html:135
 msgid "Loading..."
 msgstr "Loading..."

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.pl-PL.i18n.data.ts

@@ -36,17 +36,17 @@ export default {
         },
         {
             "gettextString": "Clear",
-            "lineNumber": 101,
+            "lineNumber": 108,
             "translation": "Jasne"
         },
         {
             "gettextString": "Apply filters",
-            "lineNumber": 111,
+            "lineNumber": 118,
             "translation": "Wykorzystanie filtrów"
         },
         {
             "gettextString": "Loading...",
-            "lineNumber": 128,
+            "lineNumber": 135,
             "translation": "Ładowanie..."
         }
     ]

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.html.pl-PL.po

@@ -12,14 +12,14 @@ msgstr "Filtry"
 msgid "Add"
 msgstr "Dodać"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:101
+#: src/lib/taon-datatable/taon-datatable.component.html:108
 msgid "Clear"
 msgstr "Jasne"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:111
+#: src/lib/taon-datatable/taon-datatable.component.html:118
 msgid "Apply filters"
 msgstr "Wykorzystanie filtrów"
 
-#: src/lib/taon-datatable/taon-datatable.component.html:128
+#: src/lib/taon-datatable/taon-datatable.component.html:135
 msgid "Loading..."
 msgstr "Ładowanie..."

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.de-DE.i18n.data.ts

@@ -24,17 +24,17 @@ export default {
     "tags": [
         {
             "gettextString": "ID",
-            "lineNumber": 59,
+            "lineNumber": 61,
             "translation": "Ausweis"
         },
         {
             "gettextString": "NAME",
-            "lineNumber": 63,
+            "lineNumber": 65,
             "translation": "Name"
         },
         {
             "gettextString": "No records found",
-            "lineNumber": 110
+            "lineNumber": 135
         }
     ]
 };

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.de-DE.po

@@ -4,14 +4,14 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:59
+#: src/lib/taon-datatable/taon-datatable.component.ts:61
 msgid "ID"
 msgstr "Ausweis"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:63
+#: src/lib/taon-datatable/taon-datatable.component.ts:65
 msgid "NAME"
 msgstr "Name"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:110
+#: src/lib/taon-datatable/taon-datatable.component.ts:135
 msgid "No records found"
 msgstr ""

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.en-US.i18n.data.ts

@@ -24,17 +24,17 @@ export default {
     "tags": [
         {
             "gettextString": "ID",
-            "lineNumber": 59,
+            "lineNumber": 61,
             "translation": "ID"
         },
         {
             "gettextString": "NAME",
-            "lineNumber": 63,
+            "lineNumber": 65,
             "translation": "NAME"
         },
         {
             "gettextString": "No records found",
-            "lineNumber": 110
+            "lineNumber": 135
         }
     ]
 };

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.en-US.po

@@ -4,14 +4,14 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:59
+#: src/lib/taon-datatable/taon-datatable.component.ts:61
 msgid "ID"
 msgstr "ID"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:63
+#: src/lib/taon-datatable/taon-datatable.component.ts:65
 msgid "NAME"
 msgstr "NAME"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:110
+#: src/lib/taon-datatable/taon-datatable.component.ts:135
 msgid "No records found"
 msgstr ""

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.pl-PL.i18n.data.ts

@@ -24,17 +24,17 @@ export default {
     "tags": [
         {
             "gettextString": "ID",
-            "lineNumber": 59,
+            "lineNumber": 61,
             "translation": "Posiadanie dowodu"
         },
         {
             "gettextString": "NAME",
-            "lineNumber": 63,
+            "lineNumber": 65,
             "translation": "Nazwa"
         },
         {
             "gettextString": "No records found",
-            "lineNumber": 110,
+            "lineNumber": 135,
             "translation": "Nie znalezionie nic"
         }
     ]

package/ts-source/websql-code-prod/taon-datatable/i18n/taon-datatable.component.ts.pl-PL.po

@@ -4,14 +4,14 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:59
+#: src/lib/taon-datatable/taon-datatable.component.ts:61
 msgid "ID"
 msgstr "Posiadanie dowodu"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:63
+#: src/lib/taon-datatable/taon-datatable.component.ts:65
 msgid "NAME"
 msgstr "Nazwa"
 
-#: src/lib/taon-datatable/taon-datatable.component.ts:110
+#: src/lib/taon-datatable/taon-datatable.component.ts:135
 msgid "No records found"
 msgstr "Nie znalezionie nic"

package/ts-source/websql-code-prod/taon-datatable/taon-datatable.component.html

@@ -87,20 +87,27 @@
   @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {
     <div
       class="grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      @for (column of filterableColumns; track column.field) {
-        <mat-form-field
-          appearance="outline"
-          subscriptSizing="dynamic"
-          class="w-full">
-          <mat-label>
-            {{ column.header }}
-          </mat-label>
-
-          <input
-            matInput
-            [(ngModel)]="columnFilters[$any(column.field)]"
-            (keyup.enter)="applyAdvancedFilters()" />
-        </mat-form-field>
+      @if (filtersTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="filtersTemplate"
+          [ngTemplateOutletContext]="{ filters: columnFilters }">
+        </ng-container>
+      } @else {
+        @for (column of filterableColumns; track column.field) {
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="w-full">
+            <mat-label>
+              {{ column.header }}
+            </mat-label>
+
+            <input
+              matInput
+              [(ngModel)]="columnFilters[$any(column.field)]"
+              (keyup.enter)="applyAdvancedFilters()" />
+          </mat-form-field>
+        }
       }
 
       <div