<ng-container *ngIf="!items || (items && items.length); else: emptyPlaceholder">
    <table class="table">
        <thead>
            <tr>
                <th *ngIf="isRowSelectedFn">
                    <vdr-select-toggle
                        size="small"
                        [selected]="allSelected"
                        (selectedChange)="allSelectChange.emit()"
                    ></vdr-select-toggle>
                </th>
                <th *ngFor="let header of columns?.toArray()" class="left" [class.expand]="header.expand">
                    <ng-container *ngTemplateOutlet="header.template"></ng-container>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr
                *ngFor="
                    let item of (items
                        | paginate
                            : {
                                  itemsPerPage: itemsPerPage,
                                  currentPage: currentPage,
                                  totalItems: totalItems
                              })
                "
            >
                <td *ngIf="isRowSelectedFn">
                    <vdr-select-toggle
                        size="small"
                        [selected]="isRowSelectedFn(item)"
                        (selectedChange)="rowSelectChange.emit(item)"
                    ></vdr-select-toggle>
                </td>
                <ng-container *ngTemplateOutlet="rowTemplate; context: { item: item }"></ng-container>
            </tr>
        </tbody>
    </table>
    <div class="table-footer">
        <vdr-items-per-page-controls
            *ngIf="totalItems"
            [itemsPerPage]="itemsPerPage"
            (itemsPerPageChange)="itemsPerPageChange.emit($event)"
        ></vdr-items-per-page-controls>

        <vdr-pagination-controls
            *ngIf="totalItems"
            [currentPage]="currentPage"
            [itemsPerPage]="itemsPerPage"
            [totalItems]="totalItems"
            (pageChange)="pageChange.emit($event)"
        ></vdr-pagination-controls>
    </div>
</ng-container>
<ng-template #emptyPlaceholder>
    <div class="empty-state">
        <clr-icon shape="bubble-exclamation" size="64"></clr-icon>
        <div class="empty-label">{{ emptyStateLabel || ('common.no-results' | translate) }}</div>
    </div>
</ng-template>
