Asymmetrik/ngx-starter

<section class="page-header mb-3">
    <div>
        <h1 skipTo>Cache Entries</h1>
        View and manage user cache entries.
    </div>
    <system-alert />
</section>

<section class="page-body anchored-page-body">
    <div class="table-header d-flex align-items-center">
        <div class="table-actions d-flex flex-wrap flex-grow-1">
            <div class="mb-3 me-5">
                <asy-search-input
                    placeholder="Search key and value..."
                    [search]="dataSource.searchEvent$.value"
                    (applySearch)="dataSource.search($event)"
                />
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
            <asy-text-column name="key" sortable />
            <ng-container cdkColumnDef="value">
                <th cdk-header-cell *cdkHeaderCellDef>Value</th>
                <td class="hide-overflow" cdk-cell style="max-width: 300px" *cdkCellDef="let entry">
                    {{ entry.value | json }}
                </td>
            </ng-container>
            <asy-ago-date-column name="ts" header="Created" sortable />
            <asy-actions-menu-column scope="cache-entry" stickyEnd>
                <ng-template
                    actions-menu-tmp
                    let-item="item"
                    let-menuId="menuId"
                    let-triggerId="triggerId"
                >
                    <div
                        class="dropdown-menu"
                        [attr.aria-labelledby]="triggerId"
                        cdkMenu
                        [id]="menuId"
                    >
                        <button
                            class="dropdown-item"
                            type="button"
                            cdkMenuItem
                            (cdkMenuItemTriggered)="viewCacheEntry(item)"
                        >
                            View
                        </button>
                        <button
                            class="dropdown-item"
                            type="button"
                            cdkMenuItem
                            (cdkMenuItemTriggered)="refreshCacheEntry(item)"
                        >
                            Refresh
                        </button>
                        <button
                            class="dropdown-item"
                            type="button"
                            cdkMenuItem
                            (cdkMenuItemTriggered)="confirmDeleteEntry(item)"
                        >
                            Delete
                        </button>
                    </div>
                </ng-template>
            </asy-actions-menu-column>
            <tr cdk-header-row *cdkHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr cdk-row *cdkRowDef="let team; columns: displayedColumns"></tr>
        </table>

        <asy-table-empty-state
            emptyText="No cache entries are available."
            filteredText="No cache entries matched your search."
            [dataSource]="dataSource"
            (clearFilters)="clearFilters()"
        />
    </div>

    <div class="table-footer d-flex align-items-center">
        <div class="table-footer-pager ms-auto">
            <asy-paginator [dataSource]="dataSource" />
        </div>
    </div>
</section>

<ng-template let-cacheEntry="item" #tableRow>
    <td>{{ cacheEntry.key }}</td>
    <td class="hide-overflow" style="max-width: 300px">
        {{ cacheEntry.value | json }}
    </td>
    <td>
        <span [attr.title]="cacheEntry.ts | utcDate">{{ cacheEntry.ts | agoDate: false }}</span>
    </td>
</ng-template>