Asymmetrik/ngx-starter

<section>
    <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 team members..."
                    [search]="dataSource.searchEvent$.value"
                    (applySearch)="dataSource.search($event)"
                />
            </div>

            <div class="mb-3 ms-auto">
                @if (isTeamAdmin()) {
                    <button class="btn btn-primary ms-auto" type="button" (click)="addMembers()">
                        <span class="fa-solid fa-plus"></span> Add New
                    </button>
                }
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
            <asy-text-column name="name" sortable />
            <asy-text-column name="username" sortable />
            <asy-ago-date-column name="lastLogin" header="Last Login" sortable />
            <ng-container cdkColumnDef="type">
                <th cdk-header-cell *cdkHeaderCellDef>
                    Type
                    <asy-header-filter list-filter [options]="typeFilterOptions" />
                </th>

                <td cdk-cell *cdkCellDef="let member">
                    @if (member.explicit) {
                        Explicit
                    } @else {
                        Implicit
                    }
                </td>
            </ng-container>
            <ng-container cdkColumnDef="role">
                <th cdk-header-cell *cdkHeaderCellDef>
                    Role
                    <asy-header-filter list-filter [options]="roleFilterOptions" />
                </th>
                <td cdk-cell *cdkCellDef="let member">
                    @if (isTeamAdmin()) {
                        <button
                            class="btn btn-text dropdown-toggle p-0"
                            id="member-{{ member._id }}-role-menu-btn"
                            type="button"
                            attr.aria-controls="member-{{ member._id }}-role-menu"
                            [cdkMenuTriggerFor]="roleMenu"
                        >
                            <span class="me-1">{{ member.roleDisplay }}</span>
                        </button>
                        <ng-template #roleMenu>
                            <div
                                class="dropdown-menu"
                                id="member-{{ member._id }}-role-menu"
                                attr.aria-labelledby="member-{{ member._id }}-role-menu-btn"
                                cdkMenu
                            >
                                @for (role of teamRoleOptions; track role) {
                                    <button
                                        class="dropdown-item"
                                        type="button"
                                        cdkMenuItem
                                        (cdkMenuItemTriggered)="updateRole(member, role.role)"
                                    >
                                        {{ role.label }}
                                    </button>
                                }
                            </div>
                        </ng-template>
                    } @else {
                        {{ member.roleDisplay }}
                    }
                </td>
            </ng-container>
            <ng-container cdkColumnDef="actions">
                <th cdk-header-cell *cdkHeaderCellDef></th>
                <td cdk-cell *cdkCellDef="let member">
                    @if (isTeamAdmin() && member.explicit) {
                        <button
                            class="btn btn-link p-0"
                            type="button"
                            container="body"
                            ngbTooltip="Remove Member"
                            placement="left"
                            (click)="removeMember(member)"
                        >
                            <span class="fa-solid fa-lg fa-trash"></span>
                        </button>
                    }
                </td>
            </ng-container>
            <tr cdk-header-row *cdkHeaderRowDef="columns; sticky: true"></tr>
            <tr cdk-row *cdkRowDef="let item; columns: columns"></tr>
        </table>

        <asy-table-empty-state
            emptyText="There are no members on this team."
            filteredText="No team members 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>