how can i implement my pagination in my table

      <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-25% rounded-none text-center">
              Name
            </th>
            <th class="text-white w-custom-25% rounded-none text-center">
              Description
            </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 filteredCountries;
              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-25% 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-25% 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">
                <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>
      <nav aria-label="Page navigation example">
        <ul class="flex justify-center items-center -space-x-px h-10 text-base">
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
              <span class="sr-only">Previous</span>
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
          </li>
          <li>
            <a href="#" aria-current="page" class="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
              <span class="sr-only">Next</span>
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
              </svg>
            </a>
          </li>
        </ul>
      </nav>