<div class="tableContainer tableContainer{{tableId}}" infiniteScroll [scrollWindow]="false"
  (scrolled)="onInfinityScrollDown()" (scrolledUp)="onInfinityScrollUp()" [nbSpinner]="processing"
  nbSpinnerStatus="success" nbSpinnerSize="giant" [ngClass]="{'colResizing': colDragResizing}">
  <button class="btnClearAllFilter" nbButton hero status="danger" size="small" (click)="clearAllFilters()"
    *ngIf="anyFiltered">
    <nb-icon icon="sync-outline" class="m-0"></nb-icon><span class="clearTooltip">Clear All Filters</span>
  </button>
  <table #table class="fancy w-100" (keydown)="keyHandler($event)" tabindex="0"
    (focus)="lastFocusedFilterInput && lastFocusedFilterInput.focus()">

    <colgroup>
      <col *ngIf="anyGroups" span="1" style="width: 60px;">
      <ng-container *ngFor="let column of visibleColumns">
        <col span="1" [style.width]="getColWidthSetting(column)">

      </ng-container>
    </colgroup>

    <thead *ngIf="settings.showHeader">
      <tr>
        <th *ngIf="anyGroups"></th>
        <th id="{{tableId}}col-{{i}}" *ngFor="let column of visibleColumns;let i=index">
          <div (click)="setSort(column)" title="{{column.title}}">
            {{column.title}}
            <nb-icon pack="eva" *ngIf="sortColumn && sortColumn.name ==column.name"
              [icon]="sortColumn.sortDirection === 'asc' ? 'chevron-down' : 'chevron-up'">
            </nb-icon>
          </div>

          <span #dragHandleRight *ngIf="settings.resizingColumn" cdkDragLockAxis="x" class="dragHandle right" cdkDrag
            (cdkDragStarted)="colResizeDragStart(column,$event)" (cdkDragMoved)="colResizeDragResize(column,$event)"
            (cdkDragEnded)="colResizeEnd(column,$event)"></span>
        </th>
      </tr>
      <tr *ngIf="settings.showFilters">
        <th *ngIf="anyGroups">
          <button nbButton ghost size="small" (click)="toggleExpandAll()"
            [nbTooltip]="anyExpanded ? 'Collapse All' : 'Expand All'">
            <nb-icon pack="eva" [icon]="anyExpanded ? 'arrowhead-up' : 'arrowhead-down'"></nb-icon>
          </button>
        </th>
        <th *ngFor="let column of visibleColumns">
          <ng-container [ngSwitch]="column.type">
            <ng-container *ngSwitchCase="'date'">
              <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title"
                [(ngModel)]="column.dateRange" [nbDatepicker]="filterDatePicker"
                (ngModelChange)="filteringDebounceTimer.resetTimer()" [initFocus]="column.initFocusFilterInput"
                (focus)="setFocusedFilterInput($event)">
              <nb-rangepicker #filterDatePicker>
              </nb-rangepicker>
            </ng-container>
            <ng-container *ngSwitchCase="'dateTime'">
              <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title"
                [(ngModel)]="column.dateRange" [nbDatepicker]="filterDatePicker"
                (ngModelChange)="filteringDebounceTimer.resetTimer()" [initFocus]="column.initFocusFilterInput"
                (focus)="setFocusedFilterInput($event)">
              <nb-rangepicker #filterDatePicker>
              </nb-rangepicker>
            </ng-container>
            <ng-container *ngSwitchCase="'checkall'">

              <div align="center">
                <nb-checkbox class="ftCheck" (checkedChange)="checkboxCheckAll(column.name, $event)"
                  [initFocus]="column.initFocusFilterInput"></nb-checkbox>
              </div>
            </ng-container>
            <ng-container *ngSwitchCase="'checkbox'">
              <nb-select fullWidth [ngModel]="checkboxGetFilter(column.filter)"
                (ngModelChange)="checkboxSetFilter(column.name, $event)" [initFocus]="column.initFocusFilterInput"
                (focus)="setFocusedFilterInput($event)">
                <nb-option [value]="0">All</nb-option>
                <nb-option [value]="1">Disabled</nb-option>
                <nb-option [value]="2">Enabled</nb-option>
              </nb-select>
            </ng-container>
            <ng-container *ngSwitchDefault>
              <input type="text" nbInput fullWidth size="tiny" [placeholder]="column.title" [(ngModel)]="column.filter"
                [initFocus]="column.initFocusFilterInput" (ngModelChange)="filteringDebounceTimer.resetTimer()"
                (focus)="setFocusedFilterInput($event)">
            </ng-container>
          </ng-container>

        </th>
      </tr>
    </thead>
    <tbody RightClickMenu [RightClickMenuItems]="settings.contextMenuItems" [RightClickValue]="this"
      [onContextMenuOpening]="onContextMenuOpening" cdkDropList (cdkDropListDropped)="drop($event)"
      [cdkDropListDisabled]="!settings.allowDragAndDrop" [id]="tableId + 'head'">

      <ng-container *ngFor="let row of visibleData">

        <!-- Collapsable group row -->
        <tr *ngIf="anyGroups&&row.isGroupHeader" (click)="showHideGroup(row.groupKey)" class="grouprow" cdkDrag
          cdkDragDisabled>
          <td [colSpan]="visibleColumnCount">
            <nb-icon pack="eva" [icon]="expandedGroups(row.groupKey) ? 'chevron-down' : 'chevron-up'"></nb-icon>
            <span [innerHTML]="row.groupKey"></span>
          </td>
        </tr>
        <tr *ngIf="!row.isGroupHeader" [id]="tableId + row.index" class="{{this.tableId}}Row-{{row.index}}" [ngClass]="{
            'selected': (selectedRows && selectedRows.has(row)),
            'focused': (firstSelectedRow && row.index == firstSelectedRow.index),
            'groupedItem': anyGroups
          }" (mousedown)="onRowSelect(row.index,$event)" cdkDrag cdkDragLockAxis="y" (dblclick)="triggerDoubleClick()">
          <td *ngIf="anyGroups"></td> <!-- Blank cell for the collapse arrow in the group row -->
          <ng-container *ngFor="let column of visibleColumns;">
            <ng-container [ngSwitch]="column.type">
              <td *ngSwitchCase="'checkbox'" class="checkbox text-center">
                <div align="center">
                  <nb-checkbox class="ftCheck" [(ngModel)]="row.rowDatum[column.name]" disabled="true"></nb-checkbox>
                </div>
              </td>
              <td *ngSwitchCase="'checkall'" class="checkbox text-center">
                <div align="center">
                  <nb-checkbox class="ftCheck" [(ngModel)]="row.rowDatum[column.name]"></nb-checkbox>
                </div>
              </td>

              <td *ngSwitchCase="'tag'">
                <div title="{{row.colTooltips[column.name]}}">
                  <label *ngFor="let tag of row.colHtmlTexts[column.name]"
                    class="badge mr-1 badge-{{tag.status}} ">{{tag.text}}</label>
                </div>
              </td>

              <td *ngSwitchDefault [class]="column.class ? column.class : ''"
                [ngClass]="{'currency': 'currency'==column.type}">
                <div [innerHTML]="row.colHtmlTexts[column.name]" title="{{row.colTooltips[column.name]}}"></div>
              </td>
            </ng-container>
          </ng-container>
        </tr>

      </ng-container>

      <tr *ngIf="!visibleData || visibleData.length==0">
        <td [attr.colspan]="visibleColumnCount">

          <nb-alert status="info" class="mt-3">
            <div class="d-flex align-items-center">
              <div class="ml-2 d-inline-block">

                <nb-icon icon="info-outline" pack="eva" class="g-font-size-40"></nb-icon>
              </div>
              <div class="ml-1 d-inline-block">

                <strong *ngIf="!anyFiltered" class="g-font-size-16">
                  No Data Entered
                </strong>
                <strong *ngIf="anyFiltered" class="g-font-size-16">
                  No Match Found
                </strong>
                <p *ngIf="anyFiltered" style="color: whitesmoke;" class="mb-0">
                  <span style="font-weight: bold;">Tip:</span>
                  Please try another keyword.
                </p>
              </div>
            </div>


          </nb-alert>
        </td>
      </tr>
    </tbody>
    <tfoot *ngIf="settings.showFooter">
      <tr *ngFor="let datum of footerDisplayData">
        <td *ngIf="anyGroups"></td> <!-- Blank cell for the collapse arrow in the group row -->
        <ng-container *ngFor="let column of footerSettings.columns">

          <td *ngIf="column.visible" [innerHTML]="datum.colHtmlTexts[column.name]"
            [class]="column.footerClass ? column.footerClass : ''"></td>
        </ng-container>
      </tr>
    </tfoot>
  </table>

</div>
<!-- <div class="bottomShadow" *ngIf="hasScrollBar"></div> -->

<!-- <pager *ngIf="itemsPerPage > 0" [page]="page" (pageChange)="gotoPage($event)" [pages]="pages" [maxPage]="maxPage">
</pager> -->