add table footer

      <table
        class="table table-borderless text-custom-fs-16px border-b border-custom-gray2"
      >
        <thead class="bg-custom-orange">
          <tr>
            <th class="text-white w-custom-5% rounded-none text-center">
              <input
                type="checkbox"
                [(ngModel)]="selectAll"
                (change)="toggleSelectAll()"
              />
            </th>
            <th class="text-white w-custom-5% rounded-none text-center">No.</th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Code
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Name
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Description
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Population
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Area
            </th>
            <th class="text-white w-custom-10% rounded-none text-center">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngIf="isObjectEmpty(countries)">
            <td colspan="6" class="text-center">{{ EMPTY_LIST }}</td>
          </tr>
          <ng-container
            *ngFor="
              let country of getCountriesForCurrentPage();
              let counter = index;
              let isOdd = odd
            "
          >
            <tr
              *ngIf="!isInputRowVisible || !country.selected"
              [class.even:bg-custom-white-bg]="isOdd"
              [class.odd:bg-white]="!isOdd"
              class="border-t border-b"
            >
              <td class="w-custom-5% rounded-none text-center">
                <input
                  type="checkbox"
                  [(ngModel)]="country.selected"
                  (change)="anySelected(country)"
                />
              </td>

              <td class="w-custom-5% rounded-none text-center">
                {{ counter + 1 }}
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <ng-container *ngIf="country.selected">
                  <input
                    type="text"
                    [(ngModel)]="country.code"
                    maxlength="10"
                    required
                  />
                </ng-container>
                <ng-container *ngIf="!country.selected">
                  {{ country.code }}
                </ng-container>
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <ng-container *ngIf="country.selected">
                  <input
                    type="text"
                    [(ngModel)]="country.name"
                    maxlength="100"
                    required
                  />
                </ng-container>
                <ng-container *ngIf="!country.selected">
                  {{ country.name }}
                </ng-container>
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <ng-container *ngIf="country.selected">
                  <input
                    type="text"
                    [(ngModel)]="country.description"
                    maxlength="180"
                    required
                  />
                </ng-container>
                <ng-container *ngIf="!country.selected">
                  {{ country.description }}
                </ng-container>
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <ng-container *ngIf="country.selected">
                  <input
                  type="number"
                    [(ngModel)]="country.population"
                    maxlength="180"
                    required
                  />
                </ng-container>
                <ng-container *ngIf="!country.selected">
                  {{ country.population }}
                </ng-container>
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <ng-container *ngIf="country.selected">
                  <input
                  type="number"
                    [(ngModel)]="country.area"
                    maxlength="180"
                    required
                  />
                </ng-container>
                <ng-container *ngIf="!country.selected">
                  {{ country.area }}
                </ng-container>
              </td>
              <td class="w-custom-10% rounded-none text-center">
                <button
                  (click)="openModal(2, country)"
                  type="button"
                  class="bg-custom-gray text-custom-blue border-none w-custom-w-60px h-custom-h-30px mr-1 hover:bg-custom-gray focus:bg-custom-gray rounded"
                >
                  <i class="material-icons align-top">edit</i>
                </button>
                <button
                  (click)="openConfirmationDialogBox(3, country)"
                  type="button"
                  class="bg-custom-red-del text-custom-white border-none w-custom-w-60px h-custom-h-30px hover:bg-custom-red-del focus:bg-custom-red-del rounded"
                >
                  <i class="material-icons align-top">delete_forever</i>
                </button>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>