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>

class DataTableComponent<T> implements AfterContentInit, OnChanges, OnInit, OnDestroy {    @Input() items: T[];    @Input() itemsPerPage: number;    @Input() currentPage: number;    @Input() totalItems: number;    @Input() emptyStateLabel: string;    @Input() selectionManager?: SelectionManager<T>;    @Output() pageChange = new EventEmitter<number>();    @Output() itemsPerPageChange = new EventEmitter<number>();    @Input() allSelected: boolean;    @Input() isRowSelectedFn: ((item: T) => boolean) | undefined;    @Output() allSelectChange = new EventEmitter<void>();    @Output() rowSelectChange = new EventEmitter<{ event: MouseEvent; item: T }>();    @ContentChildren(DataTableColumnComponent) columns: QueryList<DataTableColumnComponent>;    @ContentChildren(TemplateRef) templateRefs: QueryList<TemplateRef<any>>;    rowTemplate: TemplateRef<any>;    currentStart: number;    currentEnd: number;    disableSelect = false;    constructor(changeDetectorRef: ChangeDetectorRef)    ngOnInit() => ;    ngOnChanges(changes: SimpleChanges) => ;    ngOnDestroy() => ;    ngAfterContentInit() => void;    trackByFn(index: number, item: any) => ;    onToggleAllClick() => ;    onRowClick(item: T, event: MouseEvent) => ;}