DataTableComponent

<vdr-data-table  [items]="items$ | async"  [itemsPerPage]="itemsPerPage$ | async"  [totalItems]="totalItems$ | async"  [currentPage]="currentPage$ | async"  (pageChange)="setPageNumber($event)"  (itemsPerPageChange)="setItemsPerPage($event)">  <!-- The header columns are defined first -->  <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>  <vdr-dt-column></vdr-dt-column>  <vdr-dt-column></vdr-dt-column>  <!-- Then we define how a row is rendered -->  <ng-template let-taxRate="item">    <td class="left align-middle">{{ taxRate.name }}</td>    <td class="left align-middle">{{ taxRate.category.name }}</td>    <td class="left align-middle">{{ taxRate.zone.name }}</td>    <td class="left align-middle">{{ taxRate.value }}%</td>    <td class="right align-middle">      <vdr-table-row-action        iconShape="edit"        [label]="'common.edit' | translate"        [linkTo]="['./', taxRate.id]"      ></vdr-table-row-action>    </td>    <td class="right align-middle">      <vdr-dropdown>        <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>          {{ 'common.actions' | translate }}          <clr-icon shape="caret down"></clr-icon>        </button>        <vdr-dropdown-menu vdrPosition="bottom-right">          <button              type="button"              class="delete-button"              (click)="deleteTaxRate(taxRate)"              [disabled]="!(['DeleteSettings', 'DeleteTaxRate'] | hasPermission)"              vdrDropdownItem          >              <clr-icon shape="trash" class="is-danger"></clr-icon>              {{ 'common.delete' | translate }}          </button>        </vdr-dropdown-menu>      </vdr-dropdown>    </td>  </ng-template></vdr-data-table>