ngx-easy-table-plus 15.8.1 → 15.8.2

package/fesm2022/ngx-easy-table-plus.mjs

@@ -178,6 +178,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }] });
 
+class FiltersService {
+    static getPath(p, o) {
+        // https://github.com/dherges/ng-packagr/issues/696
+        /* eslint-disable-next-line */
+        const result = p.reduce((xs, x) => (xs && typeof xs[x] !== 'undefined' ? xs[x] : null), o);
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService, decorators: [{
+            type: Injectable
+        }] });
+
 class PaginationComponent {
     constructor() {
         this.updateRange = new EventEmitter();
@@ -402,20 +416,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 args: ['document:click', ['$event.target']]
             }] } });
 
-class FiltersService {
-    static getPath(p, o) {
-        // https://github.com/dherges/ng-packagr/issues/696
-        /* eslint-disable-next-line */
-        const result = p.reduce((xs, x) => (xs && typeof xs[x] !== 'undefined' ? xs[x] : null), o);
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FiltersService, decorators: [{
-            type: Injectable
-        }] });
-
 class SearchPipe {
     constructor() {
         this.filters = {};
@@ -605,6 +605,18 @@ class BaseComponent {
         this.selectedCheckboxes = new Set();
         this.id = 'table';
         this.event = new EventEmitter();
+        // Default trackBy: Angular's own default for *ngFor is already reference identity
+        // (it returns the item itself), so this is only different from "no trackBy at all"
+        // when `rowIdKey` is set. It exists to let consumers who replace `data` with a fresh
+        // array of new object instances (e.g. after a server refetch) still get DOM node
+        // reuse, keyed by a stable id field instead of by object reference.
+        this.trackByRow = (_index, row) => {
+            if (!this.rowIdKey) {
+                return row;
+            }
+            const value = FiltersService.getPath(this.rowIdKey.split('.'), row);
+            return value === null || typeof value === 'undefined' ? row : value;
+        };
         this.filteredCountSubject.pipe(takeUntil(this.unsubscribe)).subscribe((count) => {
             setTimeout(() => {
                 this.filterCount = count;
@@ -1029,11 +1041,11 @@ class BaseComponent {
         fileReader.readAsText(file);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: StyleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: BaseComponent, selector: "ngx-table", inputs: { configuration: "configuration", data: "data", pagination: "pagination", groupRowsBy: "groupRowsBy", id: "id", toggleRowIndex: "toggleRowIndex", detailsTemplate: "detailsTemplate", summaryTemplate: "summaryTemplate", groupRowsHeaderTemplate: "groupRowsHeaderTemplate", filtersTemplate: "filtersTemplate", selectAllTemplate: "selectAllTemplate", noResultsTemplate: "noResultsTemplate", loadingTemplate: "loadingTemplate", additionalActionsTemplate: "additionalActionsTemplate", rowContextMenu: "rowContextMenu", columns: "columns" }, outputs: { event: "event" }, host: { listeners: { "document:click": "onContextMenuClick($event.target)" } }, providers: [DefaultConfigService, GroupRowsService, StyleService], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginationComponent", first: true, predicate: ["paginationComponent"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-container\"\n  [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (drop)=\"drop($event)\"\n>\n  <table\n    [id]=\"id\"\n    #table\n    [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n    [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n    [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n    [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n    [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n    [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n    [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n    [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n    [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n  >\n    <thead\n      [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n      table-thead\n      [config]=\"config\"\n      [sortKey]=\"sortKey\"\n      [sortState]=\"sortState\"\n      [selectAllTemplate]=\"selectAllTemplate\"\n      [filtersTemplate]=\"filtersTemplate\"\n      [additionalActionsTemplate]=\"additionalActionsTemplate\"\n      [columns]=\"columns\"\n      (selectAll)=\"onSelectAll()\"\n      (filter)=\"onSearch($event)\"\n      (order)=\"orderBy($event)\"\n      (event)=\"emitEvent($event.event, $event.value)\"\n    ></thead>\n    <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n      <ng-container *ngIf=\"rowTemplate\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject;\n              let rowIndex = index\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, rowIndex)\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-{{ data.indexOf(row) }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                    (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-{{ data.indexOf(row) }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  #contextMenu\n                  (contextmenu)=\"\n                    onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n                  \"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    data.indexOf(row) === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: data.indexOf(row),\n                      column: column\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <!-- infinite scroll -->\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject;\n              let rowIndex = index\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\" width=\"3%\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                    (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\" width=\"3%\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-infinite-scroll-{{ rowIndex }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, rowIndex)\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    rowIndex === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: rowIndex,\n                      column: column\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let group of grouped\n              | sort: sortBy:config\n              | search: term:filteredCountSubject:config\n              | global: globalSearchTerm:filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            let rowIndex = index\n          \"\n        >\n          <tr>\n            <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n              <td [attr.colspan]=\"columns.length\">\n                <div>{{ group[0][groupRowsBy] }} ({{ group.length }})</div>\n              </td>\n            </ng-container>\n            <ng-container\n              *ngIf=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{\n                total: group.length,\n                key: groupRowsBy,\n                value: group[0] ? group[0][groupRowsBy] : '',\n                group: group,\n                index: rowIndex\n              }\"\n            >\n            </ng-container>\n            <td>\n              <span\n                class=\"ngx-icon\"\n                *ngIf=\"arrowDefinition\"\n                [ngClass]=\"\n                  isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                \"\n                (click)=\"collapseRow(rowIndex)\"\n              >\n              </span>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n            <tr *ngFor=\"let row of group\">\n              <td *ngFor=\"let column of columns\">\n                {{ row | render: column.key }}\n                <!-- TODO allow users to add groupRowsTemplateRef -->\n              </td>\n              <td></td>\n            </tr>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody\n      *ngIf=\"data && !config.isLoading && config.rowReorder\"\n      class=\"ngx-draggable-row-area\"\n      cdkDropList\n      (cdkDropListDropped)=\"onDrop($event)\"\n    >\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let row of data\n              | sort: sortBy\n              | search: term:filteredCountSubject\n              | global: globalSearchTerm:filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n          \"\n        >\n          <tr\n            class=\"ngx-draggable-row\"\n            cdkDrag\n            (cdkDragStarted)=\"onDragStart($event)\"\n            [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n            cdkDragLockAxis=\"y\"\n          >\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n                  [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                  (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                />\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input\n                  type=\"radio\"\n                  id=\"radio-draggable-{{ data.indexOf(row) }}\"\n                  name=\"radio\"\n                  (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                />\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td\n                (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                [class.ngx-table__table-col--selected]=\"\n                  colIndex === selectedCol && !config.selectCell\n                \"\n                [class.ngx-table__table-cell--selected]=\"\n                  colIndex === selectedCol &&\n                  data.indexOf(row) === selectedRow &&\n                  !config.selectCol &&\n                  !config.selectRow\n                \"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowIndex: data.indexOf(row),\n                    column: column\n                  }\"\n                >\n                </ng-container>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody *ngIf=\"filterCount === 0\">\n      <tr class=\"ngx-table__body-empty\">\n        <ng-container *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n        </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n          <div class=\"ngx-table__table-no-results\">No results</div>\n        </td>\n      </tr>\n    </tbody>\n    <tbody *ngIf=\"config.isLoading\">\n      <tr class=\"ngx-table__body-loading\">\n        <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n          <div [style.height.px]=\"loadingHeight\" class=\"ngx-table__table-loader-wrapper\">\n            <div class=\"ngx-table__table-loader\"></div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"summaryTemplate\">\n      <tr>\n        <ng-container\n          [ngTemplateOutlet]=\"summaryTemplate\"\n          [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\"\n        >\n        </ng-container>\n      </tr>\n    </tfoot>\n  </table>\n  <pagination\n    [attr.id]=\"'pagination' + id\"\n    [id]=\"id\"\n    #paginationComponent\n    [config]=\"config\"\n    [pagination]=\"pagination\"\n    (updateRange)=\"onPagination($event)\"\n  >\n  </pagination>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: PaginationComponent, selector: "pagination", inputs: ["pagination", "config", "id"], outputs: ["updateRange"] }, { kind: "component", type: TableTHeadComponent, selector: "[table-thead]", inputs: ["config", "columns", "sortKey", "sortState", "selectAllTemplate", "filtersTemplate", "additionalActionsTemplate"], outputs: ["filter", "order", "selectAll", "event"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: SearchPipe, name: "search" }, { kind: "pipe", type: RenderPipe, name: "render" }, { kind: "pipe", type: GlobalSearchPipe, name: "global" }, { kind: "pipe", type: SortPipe, name: "sort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: BaseComponent, selector: "ngx-table", inputs: { configuration: "configuration", data: "data", pagination: "pagination", groupRowsBy: "groupRowsBy", id: "id", toggleRowIndex: "toggleRowIndex", detailsTemplate: "detailsTemplate", summaryTemplate: "summaryTemplate", groupRowsHeaderTemplate: "groupRowsHeaderTemplate", filtersTemplate: "filtersTemplate", selectAllTemplate: "selectAllTemplate", noResultsTemplate: "noResultsTemplate", loadingTemplate: "loadingTemplate", additionalActionsTemplate: "additionalActionsTemplate", rowContextMenu: "rowContextMenu", columns: "columns", rowIdKey: "rowIdKey" }, outputs: { event: "event" }, host: { listeners: { "document:click": "onContextMenuClick($event.target)" } }, providers: [DefaultConfigService, GroupRowsService, StyleService], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginationComponent", first: true, predicate: ["paginationComponent"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"ngx-container\"\n  [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (drop)=\"drop($event)\"\n>\n  <table\n    [id]=\"id\"\n    #table\n    [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n    [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n    [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n    [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n    [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n    [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n    [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n    [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n    [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n  >\n    <thead\n      [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n      table-thead\n      [config]=\"config\"\n      [sortKey]=\"sortKey\"\n      [sortState]=\"sortState\"\n      [selectAllTemplate]=\"selectAllTemplate\"\n      [filtersTemplate]=\"filtersTemplate\"\n      [additionalActionsTemplate]=\"additionalActionsTemplate\"\n      [columns]=\"columns\"\n      (selectAll)=\"onSelectAll()\"\n      (filter)=\"onSearch($event)\"\n      (order)=\"orderBy($event)\"\n      (event)=\"emitEvent($event.event, $event.value)\"\n    ></thead>\n    <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n      <ng-container *ngIf=\"rowTemplate\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left,\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject;\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, rowIndex)\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left,\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-{{ data.indexOf(row) }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                    (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-{{ data.indexOf(row) }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  #contextMenu\n                  (contextmenu)=\"\n                    onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n                  \"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    data.indexOf(row) === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: data.indexOf(row),\n                      column: column,\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <!-- infinite scroll -->\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject;\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\" width=\"3%\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                    (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\" width=\"3%\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-infinite-scroll-{{ rowIndex }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, rowIndex)\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    rowIndex === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: rowIndex,\n                      column: column,\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let group of grouped\n              | sort: sortBy : config\n              | search: term : filteredCountSubject : config\n              | global: globalSearchTerm : filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            let rowIndex = index\n          \"\n        >\n          <tr>\n            <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n              <td [attr.colspan]=\"columns.length\">\n                <div>{{ group[0][groupRowsBy] }} ({{ group.length }})</div>\n              </td>\n            </ng-container>\n            <ng-container\n              *ngIf=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{\n                total: group.length,\n                key: groupRowsBy,\n                value: group[0] ? group[0][groupRowsBy] : '',\n                group: group,\n                index: rowIndex,\n              }\"\n            >\n            </ng-container>\n            <td>\n              <span\n                class=\"ngx-icon\"\n                *ngIf=\"arrowDefinition\"\n                [ngClass]=\"\n                  isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                \"\n                (click)=\"collapseRow(rowIndex)\"\n              >\n              </span>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n            <tr *ngFor=\"let row of group\">\n              <td *ngFor=\"let column of columns\">\n                {{ row | render: column.key }}\n                <!-- TODO allow users to add groupRowsTemplateRef -->\n              </td>\n              <td></td>\n            </tr>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody\n      *ngIf=\"data && !config.isLoading && config.rowReorder\"\n      class=\"ngx-draggable-row-area\"\n      cdkDropList\n      (cdkDropListDropped)=\"onDrop($event)\"\n    >\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let row of data\n              | sort: sortBy\n              | search: term : filteredCountSubject\n              | global: globalSearchTerm : filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            trackBy: trackByRow\n          \"\n        >\n          <tr\n            class=\"ngx-draggable-row\"\n            cdkDrag\n            (cdkDragStarted)=\"onDragStart($event)\"\n            [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n            cdkDragLockAxis=\"y\"\n          >\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n                  [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                  (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                />\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input\n                  type=\"radio\"\n                  id=\"radio-draggable-{{ data.indexOf(row) }}\"\n                  name=\"radio\"\n                  (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                />\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td\n                (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                [class.ngx-table__table-col--selected]=\"\n                  colIndex === selectedCol && !config.selectCell\n                \"\n                [class.ngx-table__table-cell--selected]=\"\n                  colIndex === selectedCol &&\n                  data.indexOf(row) === selectedRow &&\n                  !config.selectCol &&\n                  !config.selectRow\n                \"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowIndex: data.indexOf(row),\n                    column: column,\n                  }\"\n                >\n                </ng-container>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody *ngIf=\"filterCount === 0\">\n      <tr class=\"ngx-table__body-empty\">\n        <ng-container *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n        </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n          <div class=\"ngx-table__table-no-results\">No results</div>\n        </td>\n      </tr>\n    </tbody>\n    <tbody *ngIf=\"config.isLoading\">\n      <tr class=\"ngx-table__body-loading\">\n        <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n          <div [style.height.px]=\"loadingHeight\" class=\"ngx-table__table-loader-wrapper\">\n            <div class=\"ngx-table__table-loader\"></div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"summaryTemplate\">\n      <tr>\n        <ng-container\n          [ngTemplateOutlet]=\"summaryTemplate\"\n          [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\"\n        >\n        </ng-container>\n      </tr>\n    </tfoot>\n  </table>\n  <pagination\n    [attr.id]=\"'pagination' + id\"\n    [id]=\"id\"\n    #paginationComponent\n    [config]=\"config\"\n    [pagination]=\"pagination\"\n    (updateRange)=\"onPagination($event)\"\n  >\n  </pagination>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: PaginationComponent, selector: "pagination", inputs: ["pagination", "config", "id"], outputs: ["updateRange"] }, { kind: "component", type: TableTHeadComponent, selector: "[table-thead]", inputs: ["config", "columns", "sortKey", "sortState", "selectAllTemplate", "filtersTemplate", "additionalActionsTemplate"], outputs: ["filter", "order", "selectAll", "event"] }, { kind: "pipe", type: i2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: SearchPipe, name: "search" }, { kind: "pipe", type: RenderPipe, name: "render" }, { kind: "pipe", type: GlobalSearchPipe, name: "global" }, { kind: "pipe", type: SortPipe, name: "sort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-table', providers: [DefaultConfigService, GroupRowsService, StyleService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ngx-container\"\n  [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (drop)=\"drop($event)\"\n>\n  <table\n    [id]=\"id\"\n    #table\n    [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n    [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n    [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n    [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n    [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n    [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n    [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n    [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n    [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n  >\n    <thead\n      [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n      table-thead\n      [config]=\"config\"\n      [sortKey]=\"sortKey\"\n      [sortState]=\"sortState\"\n      [selectAllTemplate]=\"selectAllTemplate\"\n      [filtersTemplate]=\"filtersTemplate\"\n      [additionalActionsTemplate]=\"additionalActionsTemplate\"\n      [columns]=\"columns\"\n      (selectAll)=\"onSelectAll()\"\n      (filter)=\"onSearch($event)\"\n      (order)=\"orderBy($event)\"\n      (event)=\"emitEvent($event.event, $event.value)\"\n    ></thead>\n    <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n      <ng-container *ngIf=\"rowTemplate\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject;\n              let rowIndex = index\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, rowIndex)\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-{{ data.indexOf(row) }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                    (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-{{ data.indexOf(row) }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  #contextMenu\n                  (contextmenu)=\"\n                    onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n                  \"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    data.indexOf(row) === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: data.indexOf(row),\n                      column: column\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <!-- infinite scroll -->\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term:filteredCountSubject\n                | global: globalSearchTerm:filteredCountSubject;\n              let rowIndex = index\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\" width=\"3%\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                    (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\" width=\"3%\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-infinite-scroll-{{ rowIndex }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, rowIndex)\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    rowIndex === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: rowIndex,\n                      column: column\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let group of grouped\n              | sort: sortBy:config\n              | search: term:filteredCountSubject:config\n              | global: globalSearchTerm:filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            let rowIndex = index\n          \"\n        >\n          <tr>\n            <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n              <td [attr.colspan]=\"columns.length\">\n                <div>{{ group[0][groupRowsBy] }} ({{ group.length }})</div>\n              </td>\n            </ng-container>\n            <ng-container\n              *ngIf=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{\n                total: group.length,\n                key: groupRowsBy,\n                value: group[0] ? group[0][groupRowsBy] : '',\n                group: group,\n                index: rowIndex\n              }\"\n            >\n            </ng-container>\n            <td>\n              <span\n                class=\"ngx-icon\"\n                *ngIf=\"arrowDefinition\"\n                [ngClass]=\"\n                  isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                \"\n                (click)=\"collapseRow(rowIndex)\"\n              >\n              </span>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n            <tr *ngFor=\"let row of group\">\n              <td *ngFor=\"let column of columns\">\n                {{ row | render: column.key }}\n                <!-- TODO allow users to add groupRowsTemplateRef -->\n              </td>\n              <td></td>\n            </tr>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody\n      *ngIf=\"data && !config.isLoading && config.rowReorder\"\n      class=\"ngx-draggable-row-area\"\n      cdkDropList\n      (cdkDropListDropped)=\"onDrop($event)\"\n    >\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let row of data\n              | sort: sortBy\n              | search: term:filteredCountSubject\n              | global: globalSearchTerm:filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n          \"\n        >\n          <tr\n            class=\"ngx-draggable-row\"\n            cdkDrag\n            (cdkDragStarted)=\"onDragStart($event)\"\n            [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n            cdkDragLockAxis=\"y\"\n          >\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n                  [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                  (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                />\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input\n                  type=\"radio\"\n                  id=\"radio-draggable-{{ data.indexOf(row) }}\"\n                  name=\"radio\"\n                  (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                />\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td\n                (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                [class.ngx-table__table-col--selected]=\"\n                  colIndex === selectedCol && !config.selectCell\n                \"\n                [class.ngx-table__table-cell--selected]=\"\n                  colIndex === selectedCol &&\n                  data.indexOf(row) === selectedRow &&\n                  !config.selectCol &&\n                  !config.selectRow\n                \"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowIndex: data.indexOf(row),\n                    column: column\n                  }\"\n                >\n                </ng-container>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody *ngIf=\"filterCount === 0\">\n      <tr class=\"ngx-table__body-empty\">\n        <ng-container *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n        </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n          <div class=\"ngx-table__table-no-results\">No results</div>\n        </td>\n      </tr>\n    </tbody>\n    <tbody *ngIf=\"config.isLoading\">\n      <tr class=\"ngx-table__body-loading\">\n        <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n          <div [style.height.px]=\"loadingHeight\" class=\"ngx-table__table-loader-wrapper\">\n            <div class=\"ngx-table__table-loader\"></div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"summaryTemplate\">\n      <tr>\n        <ng-container\n          [ngTemplateOutlet]=\"summaryTemplate\"\n          [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\"\n        >\n        </ng-container>\n      </tr>\n    </tfoot>\n  </table>\n  <pagination\n    [attr.id]=\"'pagination' + id\"\n    [id]=\"id\"\n    #paginationComponent\n    [config]=\"config\"\n    [pagination]=\"pagination\"\n    (updateRange)=\"onPagination($event)\"\n  >\n  </pagination>\n</div>\n" }]
+            args: [{ selector: 'ngx-table', providers: [DefaultConfigService, GroupRowsService, StyleService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ngx-container\"\n  [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (dragleave)=\"dragLeave($event)\"\n  (drop)=\"drop($event)\"\n>\n  <table\n    [id]=\"id\"\n    #table\n    [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n    [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n    [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n    [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n    [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n    [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n    [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n    [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n    [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n  >\n    <thead\n      [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n      table-thead\n      [config]=\"config\"\n      [sortKey]=\"sortKey\"\n      [sortState]=\"sortState\"\n      [selectAllTemplate]=\"selectAllTemplate\"\n      [filtersTemplate]=\"filtersTemplate\"\n      [additionalActionsTemplate]=\"additionalActionsTemplate\"\n      [columns]=\"columns\"\n      (selectAll)=\"onSelectAll()\"\n      (filter)=\"onSearch($event)\"\n      (order)=\"orderBy($event)\"\n      (event)=\"emitEvent($event.event, $event.value)\"\n    ></thead>\n    <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n      <ng-container *ngIf=\"rowTemplate\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left,\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject;\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              (click)=\"onClick($event, row, '', null, rowIndex)\"\n              #contextMenu\n              (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n              (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n              >\n              </ng-container>\n              <td *ngIf=\"config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ul\n          class=\"ngx-table__table-row-context-menu\"\n          [ngStyle]=\"{\n            position: 'absolute',\n            top: rowContextMenuPosition.top,\n            left: rowContextMenuPosition.left,\n          }\"\n          *ngIf=\"rowContextMenuPosition.top\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowContextMenu\"\n            [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n          >\n          </ng-container>\n        </ul>\n        <ng-container *ngIf=\"!config.infiniteScroll\">\n          <ng-container\n            *ngFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject\n                | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                data.indexOf(row) === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-{{ data.indexOf(row) }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                    (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-{{ data.indexOf(row) }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  #contextMenu\n                  (contextmenu)=\"\n                    onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n                  \"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    data.indexOf(row) === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: data.indexOf(row),\n                      column: column,\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(data.indexOf(row))\n                      ? 'ngx-icon-arrow-down'\n                      : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(data.indexOf(row))\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </ng-container>\n        <!-- infinite scroll -->\n        <cdk-virtual-scroll-viewport\n          itemSize=\"50\"\n          *ngIf=\"config.infiniteScroll\"\n          class=\"ngx-infinite-scroll-viewport\"\n        >\n          <ng-container\n            *cdkVirtualFor=\"\n              let row of data\n                | sort: sortBy\n                | search: term : filteredCountSubject\n                | global: globalSearchTerm : filteredCountSubject;\n              let rowIndex = index;\n              trackBy: trackByRow\n            \"\n          >\n            <tr\n              [class.ngx-table__table-row--selected]=\"\n                rowIndex === selectedRow && !config.selectCell\n              \"\n            >\n              <td *ngIf=\"config.checkboxes\" width=\"3%\">\n                <label class=\"ngx-form-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n                    [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n                    (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n                  />\n                  <em class=\"ngx-form-icon\"></em>\n                </label>\n              </td>\n              <td *ngIf=\"config.radio\" width=\"3%\">\n                <label>\n                  <input\n                    type=\"radio\"\n                    id=\"radio-infinite-scroll-{{ rowIndex }}\"\n                    name=\"radio\"\n                    (change)=\"onRadioSelect($event, row, rowIndex)\"\n                  />\n                </label>\n              </td>\n              <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n                <td\n                  (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n                  #contextMenu\n                  (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n                  (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n                  [class.pinned-left]=\"column.pinned\"\n                  [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n                  [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n                  [class.ngx-table__table-col--selected]=\"\n                    colIndex === selectedCol && !config.selectCell\n                  \"\n                  [class.ngx-table__table-cell--selected]=\"\n                    colIndex === selectedCol &&\n                    rowIndex === selectedRow &&\n                    !config.selectCol &&\n                    !config.selectRow\n                  \"\n                >\n                  <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                  <ng-container\n                    *ngIf=\"column.cellTemplate\"\n                    [ngTemplateOutlet]=\"column.cellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: row,\n                      rowIndex: rowIndex,\n                      column: column,\n                    }\"\n                  >\n                  </ng-container>\n                </td>\n              </ng-container>\n              <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n                <span\n                  class=\"ngx-icon\"\n                  *ngIf=\"arrowDefinition\"\n                  [ngClass]=\"\n                    isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                  \"\n                  (click)=\"collapseRow(rowIndex)\"\n                >\n                </span>\n              </td>\n            </tr>\n            <tr\n              *ngIf=\"\n                (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n                config.collapseAllRows\n              \"\n            >\n              <td *ngIf=\"config.checkboxes || config.radio\"></td>\n              <td [attr.colspan]=\"columns.length + 1\">\n                <ng-container\n                  [ngTemplateOutlet]=\"detailsTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n                >\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </ng-container>\n      <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let group of grouped\n              | sort: sortBy : config\n              | search: term : filteredCountSubject : config\n              | global: globalSearchTerm : filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            let rowIndex = index\n          \"\n        >\n          <tr>\n            <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n              <td [attr.colspan]=\"columns.length\">\n                <div>{{ group[0][groupRowsBy] }} ({{ group.length }})</div>\n              </td>\n            </ng-container>\n            <ng-container\n              *ngIf=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{\n                total: group.length,\n                key: groupRowsBy,\n                value: group[0] ? group[0][groupRowsBy] : '',\n                group: group,\n                index: rowIndex,\n              }\"\n            >\n            </ng-container>\n            <td>\n              <span\n                class=\"ngx-icon\"\n                *ngIf=\"arrowDefinition\"\n                [ngClass]=\"\n                  isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n                \"\n                (click)=\"collapseRow(rowIndex)\"\n              >\n              </span>\n            </td>\n          </tr>\n          <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n            <tr *ngFor=\"let row of group\">\n              <td *ngFor=\"let column of columns\">\n                {{ row | render: column.key }}\n                <!-- TODO allow users to add groupRowsTemplateRef -->\n              </td>\n              <td></td>\n            </tr>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody\n      *ngIf=\"data && !config.isLoading && config.rowReorder\"\n      class=\"ngx-draggable-row-area\"\n      cdkDropList\n      (cdkDropListDropped)=\"onDrop($event)\"\n    >\n      <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n        <ng-container\n          *ngFor=\"\n            let row of data\n              | sort: sortBy\n              | search: term : filteredCountSubject\n              | global: globalSearchTerm : filteredCountSubject\n              | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n            trackBy: trackByRow\n          \"\n        >\n          <tr\n            class=\"ngx-draggable-row\"\n            cdkDrag\n            (cdkDragStarted)=\"onDragStart($event)\"\n            [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n            cdkDragLockAxis=\"y\"\n          >\n            <td *ngIf=\"config.checkboxes\">\n              <label class=\"ngx-form-checkbox\">\n                <input\n                  type=\"checkbox\"\n                  id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n                  [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n                  (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n                />\n                <em class=\"ngx-form-icon\"></em>\n              </label>\n            </td>\n            <td *ngIf=\"config.radio\">\n              <label>\n                <input\n                  type=\"radio\"\n                  id=\"radio-draggable-{{ data.indexOf(row) }}\"\n                  name=\"radio\"\n                  (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n                />\n              </label>\n            </td>\n            <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n              <td\n                (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n                [class.ngx-table__table-col--selected]=\"\n                  colIndex === selectedCol && !config.selectCell\n                \"\n                [class.ngx-table__table-cell--selected]=\"\n                  colIndex === selectedCol &&\n                  data.indexOf(row) === selectedRow &&\n                  !config.selectCol &&\n                  !config.selectRow\n                \"\n              >\n                <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n                <ng-container\n                  *ngIf=\"column.cellTemplate\"\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: row,\n                    rowIndex: data.indexOf(row),\n                    column: column,\n                  }\"\n                >\n                </ng-container>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-container>\n      </ng-container>\n    </tbody>\n    <tbody *ngIf=\"filterCount === 0\">\n      <tr class=\"ngx-table__body-empty\">\n        <ng-container *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n        </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n          <div class=\"ngx-table__table-no-results\">No results</div>\n        </td>\n      </tr>\n    </tbody>\n    <tbody *ngIf=\"config.isLoading\">\n      <tr class=\"ngx-table__body-loading\">\n        <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n        <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n          <div [style.height.px]=\"loadingHeight\" class=\"ngx-table__table-loader-wrapper\">\n            <div class=\"ngx-table__table-loader\"></div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n    <tfoot *ngIf=\"summaryTemplate\">\n      <tr>\n        <ng-container\n          [ngTemplateOutlet]=\"summaryTemplate\"\n          [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\"\n        >\n        </ng-container>\n      </tr>\n    </tfoot>\n  </table>\n  <pagination\n    [attr.id]=\"'pagination' + id\"\n    [id]=\"id\"\n    #paginationComponent\n    [config]=\"config\"\n    [pagination]=\"pagination\"\n    (updateRange)=\"onPagination($event)\"\n  >\n  </pagination>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }, { type: StyleService }], propDecorators: { configuration: [{
                 type: Input
             }], data: [{
@@ -1066,6 +1078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], columns: [{
                 type: Input
+            }], rowIdKey: [{
+                type: Input
             }], event: [{
                 type: Output
             }], rowTemplate: [{