teso_business/src/app/pages/admin/Coupons/Active/active-coupons.component.html

<div class="xl:col-span-2 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
    <div class="overflow-x-auto mx-6 py-10">
        <table class="w-full bg-transparent" mat-table matSort [dataSource]="couponsDataSource" [trackBy]="trackByFn"
            #couponsTable>
            <!-- Transaction ID -->
            <ng-container matColumnDef="product">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Product
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap">
                        {{transaction.name}}
                    </span>
                </td>
            </ng-container>

            <!-- Request Name -->
            <ng-container matColumnDef="quantity">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Quantity Left
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap" style="display: flex;justify-content: center;">
                        {{transaction.quantity}}
                    </span>
                </td>
            </ng-container>
            <ng-container matColumnDef="type">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Coupon Type
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap">
                        {{transaction.type}}
                    </span>
                </td>
            </ng-container>
            <ng-container matColumnDef="condition">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Condition
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap">
                        {{transaction.condition}}
                    </span>
                </td>
            </ng-container>

            <ng-container matColumnDef="range">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Range
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap" style="display: flex;justify-content: center;font-weight: bold;">
                        {{transaction.range}}
                    </span>
                </td>
            </ng-container>
            <ng-container matColumnDef="claimed">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Number Claimed
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap" style="display: flex;justify-content: center;">
                        {{transaction.claimed}}
                    </span>
                </td>
            </ng-container>
            <ng-container matColumnDef="status">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Status
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap">
                        Active
                    </span>
                </td>
            </ng-container>
            <ng-container matColumnDef="expiration">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Expiration
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <span class="pr-6 whitespace-wrap">
                        {{transaction.expiration | date}}
                    </span>
                </td>
            </ng-container>
            <!-- Amount -->
            <ng-container matColumnDef="actions">
                <th mat-header-cell mat-sort-header *matHeaderCellDef>
                    Actions
                </th>
                <td mat-cell *matCellDef="let transaction">
                    <div style="display: flex;">
                        <button class=" sm:inline-flex" mat-flat-button style="background-color: #96260a;color:white;">Cancel
                        </button>

                    </div>
                </td>
            </ng-container>
            <!-- Footer -->
            <ng-container matColumnDef="recentOrdersTableFooter">
                <td class="py-6 px-0 border-0" mat-footer-cell *matFooterCellDef colspan="6">
                    <mat-paginator style="position:sticky;bottom: 0;width: 100%;" [pageSize]="20"
                        [pageSizeOptions]="[10, 20, 25,50, 100]" [showFirstLastButtons]="true"></mat-paginator>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="couponsTableColumns"></tr>
            <tr class="coupons-row h-14" mat-row *matRowDef="let row; columns: couponsTableColumns;"></tr>
            <tr class="h-16 border-0" mat-footer-row *matFooterRowDef="['recentOrdersTableFooter']"></tr>
        </table>
    </div>
</div>