File

core/data-grid/data-grid.component.ts

Implements

DataGrid OnChanges AfterViewInit ProductExperienceEventSource

<div
  class="table-data-grid-scroll"
  #scroll
  [ngClass]="{
    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading
  }"
  data-cy="c8y-data-grid--table-data-grid-scroll"
>
  <div
    class="table-data-grid__loading--wrapper"
    *ngIf="(dataSource.loading$ | async) && !loadMoreComponent?.isLoading"
  >
    <div class="table-data-grid__loading--loader">
      <c8y-loading
        layout="application"
        [message]="loadingItemsLabel"
      ></c8y-loading>
    </div>
  </div>

  <div
    class="table-data-grid-header separator large-padding"
    *ngIf="displayOptions.gridHeader"
  >
    <div
      class="h4"
      [ngClass]="{ 'm-r-16': !!title }"
    >
      {{ title | translate }}
    </div>

    <ng-container *ngIf="displayOptions.filter">
      <span *ngIf="!filteringApplied">
        <small
          class="m-r-4"
          *ngIf="!!filteringLabelsParams.allItemsCount"
          ngNonBindable
          translate
          [translateParams]="filteringLabelsParams"
        >
          {{ filteredItemsCount }} of {{ allItemsCount }} items
        </small>
        <span
          class="label label-default m-r-4"
          translate
        >
          No filters
        </span>
      </span>
      <span
        class="d-flex a-i-center"
        *ngIf="filteringApplied"
      >
        <ng-container *ngIf="!!filteringLabelsParams.allItemsCount">
          <div class="a-i-center">
            <span class="badge badge-info m-r-4">
              {{ (dataSource.stats$ | async).filteredSize }}
            </span>
            <small
              ngNonBindable
              translate
              [translateParams]="filteringLabelsParams"
            >
              of {{ allItemsCount }} items
            </small>
          </div>
        </ng-container>
        <div
          class="dropdown"
          placement="bottom left"
          dropdown
          #ddFilters="bs-dropdown"
          [cdkTrapFocus]="ddFilters.isOpen"
          [insideClick]="true"
        >
          <button
            class="btn btn-default btn-sm m-l-8"
            title="{{ 'Active filters' | translate }}"
            aria-haspopup="true"
            dropdownToggle
            data-cy="c8y-data-grid--filters"
          >
            <i
              class="m-r-4"
              c8yIcon="filter"
            ></i>
            <span>{{ 'Active filters' | translate }}</span>
            <span class="p-relative p-l-4 p-r-16">
              <span class="badge badge-system p-absolute">
                {{ columnsWithFiltersApplied.length }}
              </span>
            </span>
          </button>

          <div
            class="dropdown-menu"
            *dropdownMenu
            (click)="$event.stopPropagation()"
          >
            <div class="data-grid__dropdown bg-level-0">
              <ul class="list-unstyled m-0">
                <li
                  *ngFor="let column of columnsWithFiltersApplied; let last = last"
                  [ngClass]="{ 'separator-bottom': !last }"
                >
                  <ng-container>
                    <div
                      class="dropdown-header sticky-top text-truncate no-border-top p-b-0"
                      title="{{ (column.header | translate) || column.name }}"
                    >
                      <label>
                        {{ (column.header | translate) || column.name }}
                      </label>
                    </div>
                    <div
                      class="list-group-item borderless d-flex d-col"
                      *ngFor="
                        let groupedFilterChips of column
                          | mapToFilterChips
                          | async
                          | groupedFilterChips;
                        let first = first
                      "
                      [ngClass]="{ 'p-t-0': first }"
                    >
                      <p
                        class="small p-b-4"
                        *ngIf="groupedFilterChips.label"
                      >
                        {{ groupedFilterChips.label | translate }}
                      </p>
                      <div class="d-flex a-i-center gap-4 flex-wrap">
                        <span
                          class="label label-info chip"
                          *ngFor="let chip of groupedFilterChips.chips"
                        >
                          <button
                            class="btn btn-xs btn-clean text-10 m-r-4"
                            title="{{ 'Remove filter' | translate }}"
                            (click)="removeFilter(chip.remove())"
                            data-cy="c8y-data-grid--remove-chip"
                          >
                            <i c8yIcon="times"></i>
                          </button>
                          {{ chip.displayValue | translate }}
                        </span>
                      </div>
                    </div>
                  </ng-container>
                </li>
              </ul>
            </div>
            <div class="list-group-item separator-top sticky-bottom">
              <button
                class="btn btn-sm btn-default"
                title="{{ 'Clear all filters' | translate }}"
                type="button"
                (click)="clearFilters()"
                data-cy="c8y-data-grid--clear-filters"
              >
                {{ 'Clear all filters' | translate }}
              </button>
            </div>
          </div>
        </div>
      </span>

      <button
        class="btn-help btn-help--sm hidden-xs hidden-sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="filtersHelpPopover"
        placement="right"
        triggers="focus"
        type="button"
        *ngIf="displayOptions.filter"
        data-cy="data-grid--help-filters"
      >
        <i c8yIcon="question-circle-o"></i>
      </button>
      <ng-template #filtersHelpPopover>
        <div [innerHtml]="filtersHelpPopoverHtml | translate"></div>
      </ng-template>

      <button
        class="btn-clean text-primary hidden-xs hidden-sm"
        [attr.aria-label]="'Help' | translate"
        popover="{{ 'The counter for the total number of items might be inaccurate.' | translate }}"
        placement="right"
        triggers="focus"
        type="button"
        *ngIf="showCounterWarning"
      >
        <i c8yIcon="warning"></i>
      </button>
    </ng-container>

    <div class="m-l-auto">
      <div class="btnbar d-flex a-i-center">
        <ng-container
          *ngFor="let headerActionControl of headerActionControls | visibleControls | async"
        >
          <ng-container *ngIf="!headerActionControl.template; else customTemplate">
            <button
              class="btnbar-btn btn-link"
              title="{{ headerActionControl.text | translate }}"
              type="button"
              (click)="headerActionControl.callback()"
              c8yProductExperience
              inherit
              [actionData]="{
                action: PX_ACTIONS.CUSTOM_ACTION,
                customActionName: headerActionControl.text,
                type: headerActionControl.type
              }"
            >
              <i
                class="m-r-4"
                [c8yIcon]="headerActionControl.icon"
              ></i>
              <span>{{ headerActionControl.text | translate }}</span>
            </button>
          </ng-container>
          <ng-template #customTemplate>
            <ng-container
              *ngTemplateOutlet="
                headerActionControl.template;
                context: { headerActionControl: headerActionControl }
              "
            ></ng-container>
          </ng-template>
        </ng-container>

        <div
          class="dropdown"
          placement="bottom left"
          *ngIf="configureColumnsEnabled"
          dropdown
          #ddConfigureColumns="bs-dropdown"
          [cdkTrapFocus]="ddConfigureColumns.isOpen"
          [insideClick]="true"
        >
          <button
            class="btnbar-btn"
            title="{{ 'Configure columns' | translate }}"
            type="button"
            data-cy="data-grid--custom-column-btn"
            dropdownToggle
          >
            <i
              class="m-r-4"
              c8yIcon="columns"
            ></i>
            <span>{{ 'Configure columns' | translate }}</span>
          </button>

          <ul
            class="dropdown-menu data-grid__dropdown"
            *dropdownMenu
            (click)="$event.stopPropagation()"
          >
            <li>
              <div
                class="list-group m-0"
                cdkDropList
                (cdkDropListDropped)="onColumnDrop($event)"
              >
                <div
                  *ngFor="let column of columns"
                  cdkDrag
                  cdkDragLockAxis="y"
                >
                  <ng-container *ngIf="!column.positionFixed">
                    <div class="list-group-item draggable-after p-0 a-i-center">
                      <label
                        class="c8y-checkbox p-l-16"
                        title="{{ (column.header | translate) || column.name }}"
                        [attr.data-cy]="'data-grid--custom-column-header-' + column.header"
                      >
                        <input
                          type="checkbox"
                          [(ngModel)]="column.visible"
                          (change)="
                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')
                          "
                          c8yProductExperience
                          inherit
                          [actionData]="{
                            action: PX_ACTIONS.CHANGE_VISIBILITY,
                            column: column.name,
                            visible: !column.visible
                          }"
                        />
                        <span></span>
                        <span>{{ (column.header | translate) || column.name }}</span>
                      </label>
                      <button
                        class="btn btn-dot showOnHover max-width-fit a-i-center"
                        [attr.aria-label]="'Remove`column,verb`' | translate"
                        tooltip="{{ 'Remove`column,verb`' | translate }}"
                        placement="left"
                        container="body"
                        type="button"
                        (click)="removeCustomColumn(poConfirm, column, ddConfigureColumns)"
                        *ngIf="column.custom"
                      >
                        <c8y-popover-confirm
                          [title]="'Confirm removal' | translate"
                          triggers="focus"
                          [placement]="'left'"
                          #poConfirm
                        ></c8y-popover-confirm>
                        <i
                          c8yIcon="minus-circle"
                          data-cy="data-grid--custom-column-remove-btn"
                        ></i>
                      </button>
                    </div>
                  </ng-container>
                </div>
              </div>
            </li>
            <li
              class="p-8 sticky-bottom separator-top"
              *ngIf="isConfigContextKnown"
            >
              <button
                class="btn btn-default btn-block"
                title="{{ 'Add custom column' | translate }}"
                type="button"
                data-cy="data-grid--add-custom-column"
                (click)="openCustomColumnModal(); ddConfigureColumns.hide()"
              >
                <i
                  class="m-r-4"
                  c8yIcon="plus-circle"
                ></i>
                <span>{{ 'Add custom column' | translate }}</span>
              </button>
            </li>
          </ul>
        </div>

        <button
          class="btnbar-btn btn-link"
          title="{{ 'Reload' | translate }}"
          type="button"
          data-cy="data-grid--reload-btn"
          [disabled]="dataSource.loading$ | async"
          (click)="clickReload()"
        >
          <i
            class="m-r-4"
            c8yIcon="refresh"
          ></i>
          <span>{{ 'Reload' | translate }}</span>
        </button>

        <div
          class="input-group input-group-search m-l-sm-16 data-grid__search-input"
          *ngIf="!serverSideDataCallback || showSearch"
        >
          <input
            class="form-control"
            placeholder="{{ 'Search…' | translate }}"
            type="search"
            [ngModel]="searchText"
            (input)="searchText$.emit($event.target.value)"
          />
          <div class="input-group-addon">
            <i
              c8yIcon="search"
              *ngIf="searchText.length === 0"
            ></i>
            <i
              class="pointer"
              c8yIcon="times"
              *ngIf="searchText.length > 0"
              (click)="searchText = ''; searchText$.emit('')"
              c8yProductExperience
              inherit
              [actionData]="{ action: PX_ACTIONS.CLEAR_SEARCH }"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div
      class="table-data-grid-header-bulk-actions animated slideInDown fast"
      data-cy="table-data-grid-header-bulk-actions"
      *ngIf="selectedItemIds.length !== 0"
    >
      <h4>
        <ng-container [ngPlural]="selectedItemIds.length">
          <ng-template ngPluralCase="=1">
            <span translate>1 selected item.</span>
          </ng-template>
          <ng-template ngPluralCase="other">
            <span
              ngNonBindable
              translate
              [translateParams]="{ count: selectedItemIds.length }"
            >
              {{ count }} selected items.
            </span>
          </ng-template>
        </ng-container>
        <br class="visible-xs" />
        <small *ngIf="!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize">
          <a
            class="interact"
            (click)="setAllItemsSelected(true)"
            c8yProductExperience
            inherit
            [actionData]="{ action: PX_ACTIONS.SELECT_ALL_ITEMS }"
          >
            <span
              ngNonBindable
              translate
              [translateParams]="{ count: (dataSource.stats$ | async).filteredSize }"
            >
              Select all {{ count }} items
            </span>
          </a>
        </small>
      </h4>
      <div class="m-l-auto">
        <div class="btnbar d-flex">
          <ng-container
            *ngFor="
              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async
            "
          >
            <ng-container [ngSwitch]="bulkActionControl.type">
              <button
                class="btnbar-btn"
                title="{{ 'Export' | translate }}"
                type="button"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                *ngSwitchCase="builtInActionType.Export"
                [actionData]="{ action: PX_ACTIONS.BULK_EXPORT }"
                c8yProductExperience
                inherit
              >
                <i c8yIcon="sign-out"></i>
                <span>{{ 'Export' | translate }}</span>
              </button>

              <button
                class="btnbar-btn"
                title="{{ 'Delete' | translate }}"
                type="button"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                *ngSwitchCase="builtInActionType.Delete"
                [actionData]="{ action: PX_ACTIONS.BULK_DELETE }"
                c8yProductExperience
                inherit
              >
                <i c8yIcon="delete"></i>
                <span>{{ 'Delete' | translate }}</span>
              </button>

              <button
                class="btnbar-btn"
                title="{{ bulkActionControl.text | translate }}"
                type="button"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                *ngSwitchDefault
                [actionData]="{
                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,
                  customActionName: bulkActionControl.text
                }"
                c8yProductExperience
                inherit
              >
                <i
                  [class]="bulkActionControl.iconClasses"
                  c8yIcon="{{ bulkActionControl.icon }}"
                ></i>
                <span>{{ bulkActionControl.text | translate }}</span>
              </button>
            </ng-container>
          </ng-container>

          <button
            class="btnbar-btn"
            title="{{ 'Cancel' | translate }}"
            type="button"
            (click)="cancel()"
            [actionData]="{
              action: PX_ACTIONS.BULK_CANCEL
            }"
            c8yProductExperience
            inherit
          >
            <i c8yIcon="times"></i>
            <span>{{ 'Cancel' | translate }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <table
    class="table table-filtered-sorted table-data-grid large-padding"
    [class.table-striped]="displayOptions.striped"
    [class.table-bordered]="displayOptions.bordered"
    [class.table-hover]="displayOptions.hover"
    [class.table-data-grid-with-checkboxes]="selectable"
    [class.table-data-grid-with-actions]="actionControls.length > 0"
    [style.grid-template-columns]="styles.gridTemplateColumns"
    cdk-table
    [dataSource]="dataSource"
    [multiTemplateDataRows]="true"
    (mousemove)="resizeHandleContainerMouseMove$.emit($event)"
    (mouseup)="resizeHandleContainerMouseUp$.emit($event)"
    data-cy="c8y-data-grid--table"
  >
    <ng-container
      *ngFor="let column of columns; let i = index; trackBy: trackByName"
      [cdkColumnDef]="column.name"
    >
      <ng-container [ngSwitch]="column.name">
        <ng-container *ngSwitchCase="'checkbox'">
          <th
            cdk-header-cell
            *cdkHeaderCellDef
            data-type="icon"
          >
            <div>
              <label class="c8y-checkbox">
                <input
                  [attr.aria-label]="'Selected' | translate"
                  type="checkbox"
                  [checked]="currentPageSelectionState.allSelected"
                  [indeterminate]="
                    !(
                      currentPageSelectionState.allSelected ||
                      currentPageSelectionState.allDeselected
                    )
                  "
                  (change)="setAllItemsInCurrentPageSelected($event.target.checked)"
                  c8yProductExperience
                  inherit
                  [actionData]="{ action: PX_ACTIONS.SELECT_ALL_ITEMS }"
                />
                <span></span>
              </label>
            </div>
          </th>

          <td
            cdk-cell
            *cdkCellDef="let row"
            data-type="icon"
          >
            <label class="c8y-checkbox">
              <input
                [attr.aria-label]="'Selected' | translate"
                type="checkbox"
                [checked]="isItemSelected(row)"
                (change)="setItemsSelected([row], $event.target.checked)"
                c8yProductExperience
                inherit
                [actionData]="{
                  action: PX_ACTIONS.SELECT_ITEM,
                  id: row.id
                }"
                data-cy="c8y-data-grid--checkbox"
              />
              <span></span>
            </label>
          </td>
        </ng-container>

        <ng-container *ngSwitchCase="'radio-button'">
          <th
            cdk-header-cell
            *cdkHeaderCellDef
            data-type="icon"
          ></th>

          <td
            cdk-cell
            *cdkCellDef="let row"
            data-type="icon"
          >
            <label class="c8y-radio">
              <input
                [attr.aria-label]="'Selected' | translate"
                name="select-row"
                type="radio"
                [checked]="isItemSelected(row)"
                (change)="changeSelectedItem(row)"
                c8yProductExperience
                inherit
                [actionData]="{
                  action: PX_ACTIONS.SELECT_ITEM,
                  id: row.id
                }"
                data-cy="c8y-data-grid--radio"
              />
              <span></span>
            </label>
          </td>
        </ng-container>

        <ng-container *ngSwitchCase="'actions'">
          <th
            cdk-header-cell
            *cdkHeaderCellDef
            data-type="icon"
          >
            <p class="text-medium sr-only">{{ 'Actions' | translate }}</p>
          </th>

          <td
            cdk-cell
            *cdkCellDef="let row"
            data-type="icon"
          >
            <ng-container
              *ngFor="
                let actionControl of actionControls
                  | visibleControls: row
                  | async
                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)
              "
            >
              <ng-container [ngSwitch]="actionControl.type">
                <button
                  class="btn btn-dot"
                  [attr.aria-label]="'Edit' | translate"
                  tooltip="{{ 'Edit' | translate }}"
                  container="body"
                  type="button"
                  *ngSwitchCase="builtInActionType.Edit"
                  [delay]="500"
                  (click)="actionControl.callback(row, reload.bind(this))"
                  c8yProductExperience
                  inherit
                  [actionData]="{
                    action: PX_ACTIONS.EDIT_ITEM,
                    id: row.id
                  }"
                  data-cy="c8y-data-grid--edit-button-in-row"
                >
                  <i c8yIcon="pencil"></i>
                </button>

                <button
                  class="btn btn-dot btn-dot--danger showOnHover"
                  [attr.aria-label]="'Delete' | translate"
                  tooltip="{{ 'Delete' | translate }}"
                  container="body"
                  type="button"
                  [delay]="500"
                  (click)="actionControl.callback(row, reload.bind(this))"
                  *ngSwitchCase="builtInActionType.Delete"
                  [actionData]="{
                    action: PX_ACTIONS.DELETE_ITEM,
                    id: row.id
                  }"
                  c8yProductExperience
                  inherit
                  data-cy="c8y-data-grid--remove-button-in-row"
                >
                  <i c8yIcon="delete"></i>
                </button>

                <button
                  class="btn btn-dot"
                  [attr.aria-label]="(actionControl.icon ? actionControl.text : '') | translate"
                  tooltip="{{ (actionControl.icon ? actionControl.text : '') | translate }}"
                  container="body"
                  type="button"
                  [ngClass]="{ showOnHover: actionControl.showOnHover }"
                  [delay]="500"
                  *ngSwitchDefault
                  (click)="actionControl.callback(row, reload.bind(this))"
                  [actionData]="{
                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,
                    customActionName: actionControl.text,
                    id: row.id
                  }"
                  c8yProductExperience
                  inherit
                  [attr.data-cy]="'c8y-data-grid--button-in-row--' + actionControl.text"
                >
                  <i
                    c8yIcon="{{ actionControl.icon }}"
                    *ngIf="actionControl.icon"
                  ></i>
                  <span *ngIf="!actionControl.icon">{{ actionControl.text | translate }}</span>
                </button>
              </ng-container>
            </ng-container>

            <div
              [ngClass]="{
                'm-l-auto overflow-visible':
                  (actionControls | visibleControls: row | async)?.length > 2
              }"
            >
              <div
                class="dropdown"
                placement="bottom right"
                container="body"
                dropdown
                *ngIf="(actionControls | visibleControls: row | async)?.length > 2"
              >
                <button
                  class="dropdown-toggle c8y-dropdown"
                  title="{{ 'Actions' | translate }}"
                  aria-haspopup="true"
                  type="button"
                  data-cy="c8y-data-grid--row-actions-dropdown"
                  dropdownToggle
                >
                  <i c8yIcon="ellipsis-v"></i>
                </button>
                <ul
                  class="dropdown-menu dropdown-menu-right"
                  *dropdownMenu
                >
                  <li
                    *ngFor="
                      let actionControl of actionControls
                        | visibleControls: row
                        | async
                        | slice
                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)
                    "
                  >
                    <ng-container [ngSwitch]="actionControl.type">
                      <button
                        title="{{ 'Edit' | translate }}"
                        type="button"
                        *ngSwitchCase="builtInActionType.Edit"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        [actionData]="{
                          action: PX_ACTIONS.EDIT_ITEM,
                          id: row.id
                        }"
                        c8yProductExperience
                        inherit
                      >
                        <i c8yIcon="pencil"></i>
                        {{ 'Edit' | translate }}
                      </button>
                      <button
                        title="{{ 'Delete' | translate }}"
                        type="button"
                        *ngSwitchCase="builtInActionType.Delete"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        [actionData]="{
                          action: PX_ACTIONS.DELETE_ITEM,
                          id: row.id
                        }"
                        c8yProductExperience
                        inherit
                      >
                        <i c8yIcon="delete"></i>
                        {{ 'Delete' | translate }}
                      </button>
                      <button
                        title="{{ 'Export' | translate }}"
                        type="button"
                        *ngSwitchCase="builtInActionType.Export"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        [actionData]="{
                          action: PX_ACTIONS.EXPORT_ITEM,
                          id: row.id
                        }"
                        c8yProductExperience
                        inherit
                      >
                        <i c8yIcon="data-export"></i>
                        {{ 'Export' | translate }}
                      </button>
                      <button
                        title="{{ actionControl.text | translate }}"
                        type="button"
                        *ngSwitchDefault
                        (click)="actionControl.callback(row, reload.bind(this))"
                        c8yProductExperience
                        inherit
                        [actionData]="{
                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,
                          customActionName: actionControl.text,
                          id: row.id
                        }"
                      >
                        <i c8yIcon="{{ actionControl.icon }}"></i>
                        {{ actionControl.text | translate }}
                      </button>
                    </ng-container>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngSwitchDefault>
          <th
            [class.sorted]="column.sortOrder"
            [class.filtered]="column | map: isColumnFilteringApplied"
            [class.hidden]="!column.visible"
            cdk-header-cell
            *cdkHeaderCellDef
            [ngClass]="column.headerCSSClassName"
            [attr.data-type]="column.dataType"
          >
            <div
              [title]="(column.header | translate) || column.name"
              *ngIf="!column.filterable"
            >
              <ng-container
                *ngIf="
                  [
                    {
                      columnName: column.name,
                      value: (column.header | translate) || column.name
                    }
                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec
                "
              >
                <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
              </ng-container>
            </div>

            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->
            <div
              class="dropdown"
              placement="bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}"
              *ngIf="column.filterable"
              dropdown
              #gridHeaderDropdown="bs-dropdown"
              [cdkTrapFocus]="gridHeaderDropdown.isOpen"
              [insideClick]="true"
            >
              <button
                class="btn-header"
                [title]="(column.header | translate) || column.name"
                type="button"
                [attr.data-cy]="'data-grid--header-btn--' + column.header"
                dropdownToggle
              >
                <ng-container
                  *ngIf="
                    [
                      {
                        columnName: column.name,
                        value: (column.header | translate) || column.name
                      }
                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec
                  "
                >
                  <c8y-cell-renderer
                    data-cy="c8y-data-grid--c8y-cell-renderer"
                    [spec]="cellRendererSpec"
                  ></c8y-cell-renderer>
                </ng-container>
                <i
                  c8yIcon="filter"
                  title="{{ 'Filter' | translate }}"
                ></i>
              </button>

              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->
              <ul
                class="dropdown-menu"
                *dropdownMenu
                [ngClass]="{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }"
                (click)="$event.stopPropagation()"
              >
                <li class="data-grid__dropdown">
                  <ng-container
                    *ngIf="
                      [
                        {
                          column: column,
                          dropdown: gridHeaderDropdown
                        }
                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec
                    "
                  >
                    <c8y-filtering-form-renderer
                      class="bg-component"
                      [spec]="filteringFormRendererSpec"
                      data-cy="c8y-data-grid--c8y-filtering-form-renderer"
                    ></c8y-filtering-form-renderer>
                  </ng-container>
                </li>
              </ul>
            </div>

            <button
              class="btn-sort"
              [title]="sortColumnTitle | translate: { name: column.header | translate }"
              type="button"
              *ngIf="column.sortable"
              (click)="changeSortOrder(column.name)"
              data-cy="change-sort-order"
            >
              <ng-container [ngSwitch]="column.sortOrder">
                <i
                  c8yIcon="long-arrow-up"
                  *ngSwitchCase="'asc'"
                ></i>
                <i
                  c8yIcon="long-arrow-down"
                  *ngSwitchCase="'desc'"
                ></i>
                <i
                  c8yIcon="exchange"
                  *ngSwitchDefault
                ></i>
              </ng-container>
            </button>

            <span
              class="resize-handle"
              *ngIf="column.resizable"
              (mousedown)="
                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })
              "
            ></span>
          </th>

          <td
            [class.hidden]="!column.visible"
            [attr.data-cell-title]="column.header | translate"
            cdk-cell
            *cdkCellDef="let row"
            [ngClass]="column.cellCSSClassName"
            [attr.data-cy]="'data-grid--' + column.header"
            [attr.data-type]="column.dataType"
          >
            <ng-container
              *ngIf="
                [
                  {
                    value: resolveCellValue(row, column.path),
                    row: row,
                    columnName: column.name
                  }
                ] | map: getCellRendererSpec : this as cellRendererSpec
              "
            >
              <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
            </ng-container>
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-container cdkColumnDef="infiniteScrollFooter">
      <td
        [style.grid-column]="styles.gridInfiniteScrollColumn"
        cdk-footer-cell
        *cdkFooterCellDef
      >
        <template #infiniteScrollContainer></template>
      </td>
    </ng-container>

    <tr
      cdk-header-row
      *cdkHeaderRowDef="columnNames"
    ></tr>

    <tr
      data-cy="c8y-data-grid--row-in-data-grid"
      cdk-row
      *cdkRowDef="let row; columns: columnNames; let idx = dataIndex"
      [ngClass]="[
        activeClassName && row === lastClickedRow ? activeClassName : '',
        idx % 2 === 0 ? 'even' : 'odd'
      ]"
      (mouseover)="rowMouseOver.emit(row)"
      (mouseleave)="rowMouseLeave.emit(row)"
      (click)="handleClick(row)"
    ></tr>

    <tr
      class="expanded-row"
      [ngClass]="{ hidden: !(expandedRows.get(row).visible$ | async) }"
      data-cy="c8y-data-grid--expanded-row-in-data-grid"
      cdk-row
      *cdkRowDef="let row; columns: ['expanded-row']; when: isRowExpanded"
    ></tr>

    <ng-container cdkColumnDef="expanded-row">
      <td
        [style.grid-column]="styles.gridInfiniteScrollColumn"
        cdk-cell
        *cdkCellDef="let row"
      >
        <ng-container
          *ngTemplateOutlet="
            expandableRow?.template;
            context: {
              $implicit: row,
              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),
              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)
            }
          "
        ></ng-container>
      </td>
    </ng-container>

    <ng-container>
      <tr
        [ngClass]="{ hidden: !infiniteScroll }"
        cdk-footer-row
        *cdkFooterRowDef="['infiniteScrollFooter']"
      ></tr>
    </ng-container>
  </table>

  <div
    class="d-flex m-0 p-t-40 p-b-40"
    *ngIf="
      !(dataSource.loading$ | async) &&
      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)
    "
  >
    <div class="col-lg-3 col-sm-4 m-l-auto m-r-auto">
      <ng-content select="c8y-ui-empty-state, .c8y-empty-state"></ng-content>
      <ng-container
        *ngTemplateOutlet="
          emptyState?.templateRef;
          context: { $implicit: emptyStateContext$ | async }
        "
      ></ng-container>
    </div>
  </div>

  <div
    class="table-data-grid-footer separator large-padding"
    *ngIf="pagination && !infiniteScroll"
  >
    <div class="col-sm-4 no-gutter">
      <div
        class="counter p-t-8 p-b-8"
        *ngIf="(dataSource.stats$ | async).currentPageSize > 0"
        data-cy="data-grid--counter"
      >
        <span
          class="text-muted"
          ngNonBindable
          translate
          [translateParams]="paginationLabelParams"
        >
          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}
        </span>
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-center">
      <div
        class="form-group form-inline p-t-8 p-b-8"
        *ngIf="(dataSource.stats$ | async).filteredSize > minPossiblePageSize"
      >
        <label
          class="m-r-4"
          for="filteredSize"
        >
          {{ 'Items per page' | translate }}
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="filteredSize"
            data-cy="data-grid--pagesize-options"
            [ngModel]="pagination.pageSize"
            (ngModelChange)="
              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })
            "
          >
            <option
              *ngFor="let pageSize of possiblePageSizes"
              [ngValue]="pageSize"
            >
              {{ pageSize }}
            </option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-right">
      <pagination
        [class.hidden]="hidePagination$ | async"
        class="p-t-8 p-b-8"
        *ngIf="(dataSource.stats$ | async).filteredSize > 0"
        [ngModel]="pagination.currentPage"
        (pageChanged)="updatePagination($event)"
        [totalItems]="(dataSource.stats$ | async).filteredSize"
        [itemsPerPage]="pagination.pageSize"
        (numPages)="totalPagesCount$.next($event)"
        [maxSize]="5"
        [boundaryLinks]="false"
        previousText="Previous"
        nextText="Next"
      ></pagination>
    </div>
  </div>
</div>