File

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

Implements

DataGrid OnChanges AfterViewInit ProductExperienceEventSource

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

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

    <ng-container *ngIf="displayOptions.filter">
      <span *ngIf="!filteringApplied">
        <span class="label label-default m-r-4" translate>No filters</span>
        <small
          *ngIf="!!filteringLabelsParams.allItemsCount"
          class="m-r-4"
          ngNonBindable
          translate
          [translateParams]="filteringLabelsParams"
        >
          {{ filteredItemsCount }} of {{ allItemsCount }} items
        </small>
      </span>
      <span *ngIf="filteringApplied">
        <ng-container *ngIf="!!filteringLabelsParams.allItemsCount">
          <span class="badge badge-info m-r-4">
            {{ (dataSource.stats$ | async).filteredSize }}
          </span>
          <small ngNonBindable translate [translateParams]="filteringLabelsParams">
            of {{ allItemsCount }} items
          </small>
        </ng-container>
        <button
          class="btn btn-sm btn-default m-l-8 m-r-4"
          type="button"
          title="{{ 'Clear filters' | translate }}"
          (click)="clearFilters()"
        >
          {{ 'Clear filters' | translate }}
        </button>
      </span>

      <button
        class="btn-help btn-help--sm hidden-xs hidden-sm"
        *ngIf="displayOptions.filter"
        type="button"
        [attr.aria-label]="'Help' | translate"
        popover="{{ 'Click the column headers to apply filters.' | translate }}"
        placement="right"
        triggers="focus"
        [attr.aria-label]="'Click the column headers to apply filters.' | translate"
        data-cy="data-grid--help-filters"
      >
        <i c8yIcon="question-circle-o"></i>
      </button>

      <button
        class="btn-clean text-primary hidden-xs hidden-sm"
        *ngIf="showCounterWarning"
        type="button"
        [attr.aria-label]="'Help' | translate"
        popover="{{ 'The counter for the total number of items might be inaccurate.' | translate }}"
        placement="right"
        triggers="focus"
      >
        <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">
          <ng-container *ngIf="headerActionControl | isControlVisible">
            <ng-container *ngIf="!headerActionControl.template; else customTemplate">
              <button
                class="btnbar-btn btn-link"
                type="button"
                title="{{ headerActionControl.text | translate }}"
                (click)="headerActionControl.callback()"
                c8yProductExperience
                inherit
                [actionData]="{
                  action: PX_ACTIONS.CUSTOM_ACTION,
                  customActionName: headerActionControl.text,
                  type: headerActionControl.type
                }"
              >
                <i [c8yIcon]="headerActionControl.icon" class="m-r-4"></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>
        </ng-container>

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

          <ul
            class="dropdown-menu data-grid__dropdown"
            *dropdownMenu
            (click)="$event.stopPropagation()"
          >
            <li class="bg-level-0">
              <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
                        title="{{ (column.header | translate) || column.name }}"
                        [attr.data-cy]="'data-grid--custom-column-header-' + column.header"
                        class="c8y-checkbox p-l-16"
                      >
                        <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"
                        type="button"
                        [attr.aria-label]="'Remove`column,verb`' | translate"
                        tooltip="{{ 'Remove`column,verb`' | translate }}"
                        placement="left"
                        container="body"
                        (click)="removeCustomColumn(poConfirm, column, ddConfigureColumns)"
                        *ngIf="column.custom"
                      >
                        <c8y-popover-confirm
                          [placement]="'left'"
                          [title]="'Confirm removal' | translate"
                          triggers="focus"
                          #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 *ngIf="isConfigContextKnown" class="p-8 sticky-bottom separator-top">
              <button
                class="btn btn-default btn-block"
                type="button"
                title="{{ 'Add custom column' | translate }}"
                data-cy="data-grid--add-custom-column"
                (click)="openCustomColumnModal(); ddConfigureColumns.hide()"
              >
                <i c8yIcon="plus-circle" class="m-r-4"></i>
                <span>{{ 'Add custom column' | translate }}</span>
              </button>
            </li>
          </ul>
        </div>

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

        <div
          *ngIf="!serverSideDataCallback || showSearch"
          class="input-group input-group-search m-l-sm-16 data-grid__search-input"
        >
          <input
            type="search"
            class="form-control"
            placeholder="{{ 'Search…' | translate }}"
            [ngModel]="searchText"
            (input)="searchText$.emit($event.target.value)"
          />
          <div class="input-group-addon">
            <i c8yIcon="search" *ngIf="searchText.length === 0"></i>
            <i
              c8yIcon="times"
              class="pointer"
              *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"
      *ngIf="selectedItemIds.length !== 0"
    >
      <h4>
        <span ngNonBindable translate [translateParams]="{ count: selectedItemIds.length }">
          {{ count }} selected item(s).
        </span>
        <br class="visible-xs" />
        <small *ngIf="!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize">
          <a
            (click)="setAllItemsSelected(true)"
            class="interact"
            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">
            <ng-container
              *ngIf="bulkActionControl | isControlVisible: selectedItemIds"
              [ngSwitch]="bulkActionControl.type"
            >
              <button
                class="btnbar-btn"
                type="button"
                title="{{ 'Export' | translate }}"
                (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"
                type="button"
                title="{{ 'Delete' | translate }}"
                (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"
                type="button"
                title="{{ bulkActionControl.text | translate }}"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                *ngSwitchDefault
                [actionData]="{
                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,
                  customActionName: bulkActionControl.text
                }"
                c8yProductExperience
                inherit
              >
                <i c8yIcon="{{ bulkActionControl.icon }}"></i>
                <span>{{ bulkActionControl.text | translate }}</span>
              </button>
            </ng-container>
          </ng-container>

          <button
            class="btnbar-btn"
            type="button"
            title="{{ 'Cancel' | translate }}"
            (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-hover table-filtered-sorted table-data-grid large-padding"
    cdk-table
    [dataSource]="dataSource"
    [trackBy]="trackByName"
    [class.table-striped]="displayOptions.striped"
    [class.table-bordered]="displayOptions.bordered"
    [class.table-data-grid-with-checkboxes]="selectable"
    [class.table-data-grid-with-actions]="actionControls.length > 0"
    [style.grid-template-columns]="styles.gridTemplateColumns"
    (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="'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 *ngIf="actionControls.length <= 2">
              <ng-container *ngFor="let actionControl of actionControls">
                <ng-container
                  *ngIf="actionControl | isControlVisible: row"
                  [ngSwitch]="actionControl.type"
                >
                  <button
                    *ngSwitchCase="builtInActionType.Edit"
                    class="btn btn-dot"
                    type="button"
                    [attr.aria-label]="'Edit' | translate"
                    tooltip="{{ 'Edit' | translate }}"
                    [delay]="500"
                    container="body"
                    (click)="actionControl.callback(row, reload.bind(this))"
                    c8yProductExperience
                    inherit
                    [actionData]="{
                      action: PX_ACTIONS.EDIT_ITEM,
                      id: row.id
                    }"
                  >
                    <i c8yIcon="pencil"></i>
                  </button>

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

            <div [ngClass]="{ 'm-l-auto overflow-visible': actionControls.length > 2 }">
              <div
                class="dropdown"
                dropdown
                container="body"
                placement="bottom right"
                *ngIf="actionControls.length > 2"
              >
                <button
                  class="dropdown-toggle c8y-dropdown"
                  type="button"
                  title="{{ 'Actions' | translate }}"
                  dropdownToggle
                  aria-haspopup="true"
                >
                  <i c8yIcon="ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
                  <li *ngFor="let actionControl of actionControls">
                    <ng-container
                      *ngIf="actionControl | isControlVisible: row"
                      [ngSwitch]="actionControl.type"
                    >
                      <button
                        type="button"
                        title="{{ 'Edit' | translate }}"
                        *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
                        type="button"
                        title="{{ 'Delete' | translate }}"
                        *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
                        type="button"
                        title="{{ 'Export' | translate }}"
                        *ngSwitchCase="builtInActionType.Export"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        [actionData]="{
                          action: PX_ACTIONS.EXPORT_ITEM,
                          id: row.id
                        }"
                        c8yProductExperience
                        inherit
                      >
                        <i c8yIcon="download"></i>
                        {{ 'Export' | translate }}
                      </button>
                      <button
                        type="button"
                        title="{{ actionControl.text | translate }}"
                        *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
            cdk-header-cell
            *cdkHeaderCellDef
            [ngClass]="column.headerCSSClassName"
            [attr.data-type]="column.dataType"
            [class.sorted]="column.sortOrder"
            [class.filtered]="column | map: isColumnFilteringApplied"
            [class.hidden]="!column.visible"
          >
            <div *ngIf="!column.filterable" [title]="(column.header | translate) || column.name">
              <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
              *ngIf="column.filterable"
              class="dropdown"
              dropdown
              #gridHeaderDropdown="bs-dropdown"
              [cdkTrapFocus]="gridHeaderDropdown.isOpen"
              placement="bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}"
              [insideClick]="true"
            >
              <button
                class="btn-header"
                type="button"
                [title]="(column.header | translate) || column.name"
                [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
                *dropdownMenu
                class="dropdown-menu"
                [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
                      [spec]="filteringFormRendererSpec"
                      data-cy="c8y-data-grid--c8y-filtering-form-renderer"
                    ></c8y-filtering-form-renderer>
                  </ng-container>
                </li>
              </ul>
            </div>

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

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

          <td
            cdk-cell
            *cdkCellDef="let row"
            [ngClass]="column.cellCSSClassName"
            [attr.data-cell-title]="column.header | translate"
            [attr.data-cy]="'data-grid--' + column.header"
            [attr.data-type]="column.dataType"
            [class.hidden]="!column.visible"
          >
            <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 cdk-footer-cell *cdkFooterCellDef [style.grid-column]="styles.gridInfiniteScrollColumn">
        <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"
      (mouseover)="rowMouseOver.emit(row)"
      (mouseleave)="rowMouseLeave.emit(row)"
      (click)="rowClick.emit(row)"
    ></tr>

    <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"
  >
    <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>
    </div>
  </div>

  <div *ngIf="pagination && !infiniteScroll" class="table-data-grid-footer separator large-padding">
    <div class="col-sm-4 no-gutter">
      <div
        *ngIf="(dataSource.stats$ | async).currentPageSize > 0"
        class="counter p-t-8 p-b-8"
        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
        *ngIf="(dataSource.stats$ | async).filteredSize > minPossiblePageSize"
        class="form-group form-inline p-t-8 p-b-8"
      >
        <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
        *ngIf="(dataSource.stats$ | async).filteredSize > 0"
        [class.hidden]="hidePagination$ | async"
        [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"
        class="p-t-8 p-b-8"
      ></pagination>
    </div>
  </div>
</div>