@swimlane/ngx-datatable 21.1.0 → 22.0.0-alpha.0

package/fesm2022/swimlane-ngx-datatable.mjs

@@ -1,22 +1,21 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, TemplateRef, Output, ContentChild, Input, inject, Injectable, booleanAttribute, numberAttribute, Renderer2, ElementRef, HostBinding, ChangeDetectionStrategy, Component, ChangeDetectorRef, ViewContainerRef, HostListener, ViewChild, KeyValueDiffers, InjectionToken, Injector, signal, IterableDiffers, computed, ContentChildren, NgZone, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, EventEmitter, TemplateRef, Output, ContentChild, Input, inject, Injectable, booleanAttribute, numberAttribute, Renderer2, ElementRef, HostBinding, ChangeDetectionStrategy, Component, ChangeDetectorRef, HostListener, KeyValueDiffers, InjectionToken, ViewContainerRef, Injector, signal, IterableDiffers, ViewChild, computed, DOCUMENT, ContentChildren, NgZone, input, effect, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
-import { Subject, fromEvent, BehaviorSubject } from 'rxjs';
-import { NgTemplateOutlet, AsyncPipe, NgStyle, DOCUMENT, NgClass } from '@angular/common';
+import { Subject, fromEvent, takeUntil as takeUntil$1 } from 'rxjs';
+import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import { takeUntil } from 'rxjs/operators';
 
 class DataTableFooterTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DataTableFooterTemplateDirective, isStandalone: true, selector: "[ngx-datatable-footer-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DataTableFooterTemplateDirective, isStandalone: true, selector: "[ngx-datatable-footer-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-footer-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-footer-template]'
                 }]
         }] });
 
@@ -24,14 +23,13 @@ class DatatableGroupHeaderTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableGroupHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableGroupHeaderTemplateDirective, isStandalone: true, selector: "[ngx-datatable-group-header-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableGroupHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableGroupHeaderTemplateDirective, isStandalone: true, selector: "[ngx-datatable-group-header-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableGroupHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableGroupHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-group-header-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-group-header-template]'
                 }]
         }] });
 
@@ -80,14 +78,13 @@ class DatatableGroupHeaderDirective {
             value: false
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableGroupHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableGroupHeaderDirective, isStandalone: true, selector: "ngx-datatable-group-header", inputs: { rowHeight: "rowHeight", checkboxable: "checkboxable", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableGroupHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableGroupHeaderDirective, isStandalone: true, selector: "ngx-datatable-group-header", inputs: { rowHeight: "rowHeight", checkboxable: "checkboxable", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableGroupHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableGroupHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ngx-datatable-group-header',
-                    standalone: true
+                    selector: 'ngx-datatable-group-header'
                 }]
         }], propDecorators: { rowHeight: [{
                 type: Input
@@ -114,6 +111,7 @@ function emptyStringGetter() {
  * If prop == null, returns the emptyStringGetter.
  */
 function getterForProp(prop) {
+    // TODO requires better typing which will also involve adjust TableColum. So postponing it.
     if (prop == null) {
         return emptyStringGetter;
     }
@@ -200,7 +198,7 @@ function deepValueGetter(obj, path) {
 }
 
 function optionalGetterForProp(prop) {
-    return prop && (row => getterForProp(prop)(row, prop));
+    return prop ? row => getterForProp(prop)(row, prop) : undefined;
 }
 /**
  * This functions rearrange items by their parents
@@ -240,212 +238,54 @@ function optionalGetterForProp(prop) {
  */
 function groupRowsByParents(rows, from, to) {
     if (from && to) {
-        const nodeById = {};
-        const l = rows.length;
-        let node = null;
-        nodeById[0] = new TreeNode(); // that's the root node
-        const uniqIDs = rows.reduce((arr, item) => {
-            const toValue = to(item);
-            if (arr.indexOf(toValue) === -1) {
-                arr.push(toValue);
-            }
-            return arr;
-        }, []);
-        for (let i = 0; i < l; i++) {
-            // make TreeNode objects for each item
-            nodeById[to(rows[i])] = new TreeNode(rows[i]);
-        }
-        for (let i = 0; i < l; i++) {
-            // link all TreeNode objects
-            node = nodeById[to(rows[i])];
-            let parent = 0;
+        const treeRows = rows.filter(row => !!row).map(row => new TreeNode(row));
+        const uniqIDs = new Map(treeRows.map(node => [to(node.row), node]));
+        const rootNodes = treeRows.reduce((root, node) => {
             const fromValue = from(node.row);
-            if (!!fromValue && uniqIDs.indexOf(fromValue) > -1) {
-                parent = fromValue;
+            const parent = uniqIDs.get(fromValue);
+            if (parent) {
+                node.row.level = parent.row.level + 1; // TODO: should be reflected by type, that level is defined
+                node.parent = parent;
+                parent.children.push(node);
             }
-            node.parent = nodeById[parent];
-            node.row['level'] = node.parent.row['level'] + 1;
-            node.parent.children.push(node);
-        }
-        let resolvedRows = [];
-        nodeById[0].flatten(function () {
-            resolvedRows = [...resolvedRows, this.row];
-        }, true);
-        return resolvedRows;
+            else {
+                node.row.level = 0;
+                root.push(node);
+            }
+            return root;
+        }, []);
+        return rootNodes.flatMap(child => child.flatten());
     }
     else {
         return rows;
     }
 }
 class TreeNode {
-    constructor(row = null) {
-        if (!row) {
-            row = {
-                level: -1,
-                treeStatus: 'expanded'
-            };
-        }
+    constructor(row) {
         this.row = row;
-        this.parent = null;
         this.children = [];
     }
-    flatten(f, recursive) {
-        if (this.row['treeStatus'] === 'expanded') {
-            for (let i = 0, l = this.children.length; i < l; i++) {
-                const child = this.children[i];
-                f.apply(child, Array.prototype.slice.call(arguments, 2));
-                if (recursive) {
-                    child.flatten.apply(child, arguments);
-                }
-            }
-        }
-    }
-}
-
-/**
- * Converts strings from something to camel case
- * http://stackoverflow.com/questions/10425287/convert-dash-separated-string-to-camelcase
- */
-function camelCase(str) {
-    // Replace special characters with a space
-    str = str.replace(/[^a-zA-Z0-9 ]/g, ' ');
-    // put a space before an uppercase letter
-    str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');
-    // Lower case first character and some other stuff
-    str = str
-        .replace(/([^a-zA-Z0-9 ])|^[0-9]+/g, '')
-        .trim()
-        .toLowerCase();
-    // uppercase characters preceded by a space or number
-    str = str.replace(/([ 0-9]+)([a-zA-Z])/g, function (a, b, c) {
-        return b.trim() + c.toUpperCase();
-    });
-    return str;
-}
-/**
- * Converts strings from camel case to words
- * http://stackoverflow.com/questions/7225407/convert-camelcasetext-to-camel-case-text
- */
-function deCamelCase(str) {
-    return str.replace(/([A-Z])/g, match => ` ${match}`).replace(/^./, match => match.toUpperCase());
-}
-
-/**
- * Creates a unique object id.
- * http://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js
- */
-function id() {
-    return ('0000' + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4);
-}
-
-/**
- * Sets the column defaults
- */
-function setColumnDefaults(columns, defaultColumnWidth = 150) {
-    if (!columns) {
-        return;
-    }
-    // Only one column should hold the tree view
-    // Thus if multiple columns are provided with
-    // isTreeColumn as true we take only the first one
-    let treeColumnFound = false;
-    for (const column of columns) {
-        if (!column.$$id) {
-            column.$$id = id();
-        }
-        // prop can be numeric; zero is valid not a missing prop
-        // translate name => prop
-        if (isNullOrUndefined(column.prop) && column.name) {
-            column.prop = camelCase(column.name);
-        }
-        if (!column.$$valueGetter) {
-            column.$$valueGetter = getterForProp(column.prop);
-        }
-        // format props if no name passed
-        if (!isNullOrUndefined(column.prop) && isNullOrUndefined(column.name)) {
-            column.name = deCamelCase(String(column.prop));
-        }
-        if (isNullOrUndefined(column.prop) && isNullOrUndefined(column.name)) {
-            column.name = ''; // Fixes IE and Edge displaying `null`
-        }
-        if (!('resizeable' in column)) {
-            column.resizeable = true;
-        }
-        if (!('sortable' in column)) {
-            column.sortable = true;
-        }
-        if (!('draggable' in column)) {
-            column.draggable = true;
-        }
-        if (!('canAutoResize' in column)) {
-            column.canAutoResize = true;
-        }
-        if (!('width' in column)) {
-            column.width = defaultColumnWidth;
-        }
-        if (!('isTreeColumn' in column)) {
-            column.isTreeColumn = false;
+    flatten() {
+        if (this.row.treeStatus === 'expanded') {
+            return [this.row, ...this.children.flatMap(child => child.flatten())];
         }
         else {
-            if (column.isTreeColumn && !treeColumnFound) {
-                // If the first column with isTreeColumn is true found
-                // we mark that treeCoulmn is found
-                treeColumnFound = true;
-            }
-            else {
-                // After that isTreeColumn property for any other column
-                // will be set as false
-                column.isTreeColumn = false;
-            }
-        }
-    }
-}
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-/**
- * Translates templates definitions to objects
- */
-function translateTemplates(templates) {
-    const result = [];
-    for (const temp of templates) {
-        const col = {};
-        const props = Object.getOwnPropertyNames(temp);
-        for (const prop of props) {
-            col[prop] = temp[prop];
-        }
-        if (temp.headerTemplate) {
-            col.headerTemplate = temp.headerTemplate;
-        }
-        if (temp.cellTemplate) {
-            col.cellTemplate = temp.cellTemplate;
-        }
-        if (temp.ghostCellTemplate) {
-            col.ghostCellTemplate = temp.ghostCellTemplate;
+            return [this.row];
         }
-        if (temp.summaryFunc) {
-            col.summaryFunc = temp.summaryFunc;
-        }
-        if (temp.summaryTemplate) {
-            col.summaryTemplate = temp.summaryTemplate;
-        }
-        result.push(col);
     }
-    return result;
 }
 
 class DataTableColumnHeaderDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DataTableColumnHeaderDirective, isStandalone: true, selector: "[ngx-datatable-header-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DataTableColumnHeaderDirective, isStandalone: true, selector: "[ngx-datatable-header-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-header-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-header-template]'
                 }]
         }] });
 
@@ -456,14 +296,13 @@ class DataTableColumnCellDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DataTableColumnCellDirective, isStandalone: true, selector: "[ngx-datatable-cell-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DataTableColumnCellDirective, isStandalone: true, selector: "[ngx-datatable-cell-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnCellDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-cell-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-cell-template]'
                 }]
         }] });
 
@@ -471,14 +310,13 @@ class DataTableColumnCellTreeToggle {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnCellTreeToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DataTableColumnCellTreeToggle, isStandalone: true, selector: "[ngx-datatable-tree-toggle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnCellTreeToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DataTableColumnCellTreeToggle, isStandalone: true, selector: "[ngx-datatable-tree-toggle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnCellTreeToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnCellTreeToggle, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-tree-toggle]',
-                    standalone: true
+                    selector: '[ngx-datatable-tree-toggle]'
                 }]
         }] });
 
@@ -496,10 +334,10 @@ class ColumnChangesService {
     onInputChange() {
         this.columnInputChanges.next(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ColumnChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ColumnChangesService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColumnChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColumnChangesService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ColumnChangesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ColumnChangesService, decorators: [{
             type: Injectable
         }] });
 
@@ -507,14 +345,13 @@ class DataTableColumnGhostCellDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnGhostCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DataTableColumnGhostCellDirective, isStandalone: true, selector: "[ngx-datatable-ghost-cell-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnGhostCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DataTableColumnGhostCellDirective, isStandalone: true, selector: "[ngx-datatable-ghost-cell-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnGhostCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnGhostCellDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-ghost-cell-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-ghost-cell-template]'
                 }]
         }] });
 
@@ -543,14 +380,13 @@ class DataTableColumnDirective {
             this.columnChangesService.onInputChange();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: DataTableColumnDirective, isStandalone: true, selector: "ngx-datatable-column", inputs: { name: "name", prop: "prop", bindAsUnsafeHtml: ["bindAsUnsafeHtml", "bindAsUnsafeHtml", booleanAttribute], frozenLeft: ["frozenLeft", "frozenLeft", booleanAttribute], frozenRight: ["frozenRight", "frozenRight", booleanAttribute], flexGrow: ["flexGrow", "flexGrow", numberAttribute], resizeable: ["resizeable", "resizeable", booleanAttribute], comparator: "comparator", pipe: "pipe", sortable: ["sortable", "sortable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], canAutoResize: ["canAutoResize", "canAutoResize", booleanAttribute], minWidth: ["minWidth", "minWidth", numberAttribute], width: ["width", "width", numberAttribute], maxWidth: ["maxWidth", "maxWidth", numberAttribute], checkboxable: ["checkboxable", "checkboxable", booleanAttribute], headerCheckboxable: ["headerCheckboxable", "headerCheckboxable", booleanAttribute], headerClass: "headerClass", cellClass: "cellClass", isTreeColumn: ["isTreeColumn", "isTreeColumn", booleanAttribute], treeLevelIndent: "treeLevelIndent", summaryFunc: "summaryFunc", summaryTemplate: "summaryTemplate", _cellTemplateInput: ["cellTemplate", "_cellTemplateInput"], _headerTemplateInput: ["headerTemplate", "_headerTemplateInput"], _treeToggleTemplateInput: ["treeToggleTemplate", "_treeToggleTemplateInput"], _ghostCellTemplateInput: ["ghostCellTemplate", "_ghostCellTemplateInput"] }, queries: [{ propertyName: "_cellTemplateQuery", first: true, predicate: DataTableColumnCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_headerTemplateQuery", first: true, predicate: DataTableColumnHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_treeToggleTemplateQuery", first: true, predicate: DataTableColumnCellTreeToggle, descendants: true, read: TemplateRef, static: true }, { propertyName: "_ghostCellTemplateQuery", first: true, predicate: DataTableColumnGhostCellDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.5", type: DataTableColumnDirective, isStandalone: true, selector: "ngx-datatable-column", inputs: { name: "name", prop: "prop", bindAsUnsafeHtml: ["bindAsUnsafeHtml", "bindAsUnsafeHtml", booleanAttribute], frozenLeft: ["frozenLeft", "frozenLeft", booleanAttribute], frozenRight: ["frozenRight", "frozenRight", booleanAttribute], flexGrow: ["flexGrow", "flexGrow", numberAttribute], resizeable: ["resizeable", "resizeable", booleanAttribute], comparator: "comparator", pipe: "pipe", sortable: ["sortable", "sortable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], canAutoResize: ["canAutoResize", "canAutoResize", booleanAttribute], minWidth: ["minWidth", "minWidth", numberAttribute], width: ["width", "width", numberAttribute], maxWidth: ["maxWidth", "maxWidth", numberAttribute], checkboxable: ["checkboxable", "checkboxable", booleanAttribute], headerCheckboxable: ["headerCheckboxable", "headerCheckboxable", booleanAttribute], headerClass: "headerClass", cellClass: "cellClass", isTreeColumn: ["isTreeColumn", "isTreeColumn", booleanAttribute], treeLevelIndent: "treeLevelIndent", summaryFunc: "summaryFunc", summaryTemplate: "summaryTemplate", _cellTemplateInput: ["cellTemplate", "_cellTemplateInput"], _headerTemplateInput: ["headerTemplate", "_headerTemplateInput"], _treeToggleTemplateInput: ["treeToggleTemplate", "_treeToggleTemplateInput"], _ghostCellTemplateInput: ["ghostCellTemplate", "_ghostCellTemplateInput"] }, queries: [{ propertyName: "_cellTemplateQuery", first: true, predicate: DataTableColumnCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_headerTemplateQuery", first: true, predicate: DataTableColumnHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "_treeToggleTemplateQuery", first: true, predicate: DataTableColumnCellTreeToggle, descendants: true, read: TemplateRef, static: true }, { propertyName: "_ghostCellTemplateQuery", first: true, predicate: DataTableColumnGhostCellDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableColumnDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ngx-datatable-column',
-                    standalone: true
+                    selector: 'ngx-datatable-column'
                 }]
         }], propDecorators: { name: [{
                 type: Input
@@ -642,14 +478,13 @@ class DatatableRowDetailTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableRowDetailTemplateDirective, isStandalone: true, selector: "[ngx-datatable-row-detail-template]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableRowDetailTemplateDirective, isStandalone: true, selector: "[ngx-datatable-row-detail-template]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDetailTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDetailTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ngx-datatable-row-detail-template]',
-                    standalone: true
+                    selector: '[ngx-datatable-row-detail-template]'
                 }]
         }] });
 
@@ -695,14 +530,13 @@ class DatatableRowDetailDirective {
             value: false
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableRowDetailDirective, isStandalone: true, selector: "ngx-datatable-row-detail", inputs: { rowHeight: "rowHeight", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableRowDetailTemplateDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDetailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableRowDetailDirective, isStandalone: true, selector: "ngx-datatable-row-detail", inputs: { rowHeight: "rowHeight", _templateInput: ["template", "_templateInput"] }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DatatableRowDetailTemplateDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDetailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDetailDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ngx-datatable-row-detail',
-                    standalone: true
+                    selector: 'ngx-datatable-row-detail'
                 }]
         }], propDecorators: { rowHeight: [{
                 type: Input
@@ -720,31 +554,15 @@ class DatatableFooterDirective {
     get template() {
         return this._templateInput || this._templateQuery;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: DatatableFooterDirective, isStandalone: true, selector: "ngx-datatable-footer", inputs: { footerHeight: ["footerHeight", "footerHeight", numberAttribute], totalMessage: "totalMessage", selectedMessage: "selectedMessage", pagerLeftArrowIcon: "pagerLeftArrowIcon", pagerRightArrowIcon: "pagerRightArrowIcon", pagerPreviousIcon: "pagerPreviousIcon", pagerNextIcon: "pagerNextIcon", _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DataTableFooterTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableFooterDirective, isStandalone: true, selector: "ngx-datatable-footer", inputs: { _templateInput: ["template", "_templateInput"] }, queries: [{ propertyName: "_templateQuery", first: true, predicate: DataTableFooterTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableFooterDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ngx-datatable-footer',
-                    standalone: true
+                    selector: 'ngx-datatable-footer'
                 }]
-        }], propDecorators: { footerHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], totalMessage: [{
-                type: Input
-            }], selectedMessage: [{
-                type: Input
-            }], pagerLeftArrowIcon: [{
-                type: Input
-            }], pagerRightArrowIcon: [{
-                type: Input
-            }], pagerPreviousIcon: [{
-                type: Input
-            }], pagerNextIcon: [{
-                type: Input
-            }], _templateInput: [{
+        }], propDecorators: { _templateInput: [{
                 type: Input,
                 args: ['template']
             }], _templateQuery: [{
@@ -755,8 +573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 class ScrollerComponent {
     constructor() {
         this.renderer = inject(Renderer2);
-        this.scrollbarV = false;
-        this.scrollbarH = false;
         this.scroll = new EventEmitter();
         this.scrollYPos = 0;
         this.scrollXPos = 0;
@@ -769,14 +585,14 @@ class ScrollerComponent {
         // manual bind so we don't always listen
         if (this.scrollbarV || this.scrollbarH) {
             const renderer = this.renderer;
-            this.parentElement = renderer.parentNode(renderer.parentNode(this.element));
+            this.parentElement = renderer.parentNode(this.element);
             this._scrollEventListener = this.onScrolled.bind(this);
-            this.parentElement.addEventListener('scroll', this._scrollEventListener);
+            this.parentElement?.addEventListener('scroll', this._scrollEventListener);
         }
     }
     ngOnDestroy() {
         if (this._scrollEventListener) {
-            this.parentElement.removeEventListener('scroll', this._scrollEventListener);
+            this.parentElement?.removeEventListener('scroll', this._scrollEventListener);
             this._scrollEventListener = null;
         }
     }
@@ -798,7 +614,7 @@ class ScrollerComponent {
         if (this.scrollYPos < this.prevScrollYPos) {
             direction = 'down';
         }
-        else if (this.scrollYPos > this.prevScrollYPos) {
+        else {
             direction = 'up';
         }
         this.scroll.emit({
@@ -809,10 +625,10 @@ class ScrollerComponent {
         this.prevScrollYPos = this.scrollYPos;
         this.prevScrollXPos = this.scrollXPos;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ScrollerComponent, isStandalone: true, selector: "datatable-scroller", inputs: { scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", scrollHeight: "scrollHeight", scrollWidth: "scrollWidth" }, outputs: { scroll: "scroll" }, host: { properties: { "style.height.px": "this.scrollHeight", "style.width.px": "this.scrollWidth" }, classAttribute: "datatable-scroll" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: ScrollerComponent, isStandalone: true, selector: "datatable-scroller", inputs: { scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", scrollHeight: "scrollHeight", scrollWidth: "scrollWidth" }, outputs: { scroll: "scroll" }, host: { properties: { "style.height.px": "this.scrollHeight", "style.width.px": "this.scrollWidth" }, classAttribute: "datatable-scroll" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ScrollerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScrollerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'datatable-scroller',
@@ -820,8 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                     host: {
                         class: 'datatable-scroll'
                     },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { scrollbarV: [{
                 type: Input
@@ -877,29 +692,10 @@ function columnGroupWidths(groups, all) {
     };
 }
 /**
- * Calculates the total width of all columns and their groups
- */
-function columnTotalWidth(columns, prop) {
-    let totalWidth = 0;
-    if (columns) {
-        for (const c of columns) {
-            const has = prop && c[prop];
-            const width = has ? c[prop] : c.width;
-            totalWidth = totalWidth + parseFloat(width);
-        }
-    }
-    return totalWidth;
-}
-/**
- * Calculates the total width of all columns and their groups
+ * Calculates the total width of all columns
  */
-function columnsTotalWidth(columns, prop) {
-    let totalWidth = 0;
-    for (const column of columns) {
-        const has = prop && column[prop];
-        totalWidth = totalWidth + (has ? column[prop] : column.width);
-    }
-    return totalWidth;
+function columnTotalWidth(columns) {
+    return columns?.reduce((total, column) => total + column.width, 0) ?? 0;
 }
 function columnsByPinArr(val) {
     const colsByPin = columnsByPin(val);
@@ -942,7 +738,7 @@ class RowHeightCache {
      * @param detailRowHeight The detail row height.
      */
     initCache(details) {
-        const { rows, rowHeight, detailRowHeight, externalVirtual, rowCount, rowIndexes, rowExpansions } = details;
+        const { rows, rowHeight, detailRowHeight, externalVirtual, indexOffset, rowCount, rowExpansions } = details;
         const isFn = typeof rowHeight === 'function';
         const isDetailFn = typeof detailRowHeight === 'function';
         if (!isFn && isNaN(rowHeight)) {
@@ -970,7 +766,7 @@ class RowHeightCache {
             const expanded = rowExpansions.has(row);
             if (row && expanded) {
                 if (isDetailFn) {
-                    const index = rowIndexes.get(row);
+                    const index = indexOffset + i;
                     currentRowHeight += detailRowHeight(row, index);
                 }
                 else {
@@ -1090,32 +886,13 @@ var SelectionType;
     SelectionType["checkbox"] = "checkbox";
 })(SelectionType || (SelectionType = {}));
 
-class DataTableGhostLoaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableGhostLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableGhostLoaderComponent, isStandalone: true, selector: "ghost-loader", inputs: { columns: "columns", pageSize: ["pageSize", "pageSize", numberAttribute], rowHeight: "rowHeight", ghostBodyHeight: ["ghostBodyHeight", "ghostBodyHeight", numberAttribute] }, ngImport: i0, template: "<div [style.height]=\"ghostBodyHeight + 'px'\" class=\"ghost-loader ghost-cell-container\">\n  @for (item of [].constructor(pageSize); track item) {\n    <div [style.height]=\"rowHeight + 'px'\" class=\"ghost-element\">\n      @for (col of columns; track col) {\n        @if (!col.ghostCellTemplate) {\n          <div class=\"line ghost-cell-strip\" [style.width]=\"col?.width + 'px'\"> </div>\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"col.ghostCellTemplate\"> </ng-template>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-loader .line{margin:.9rem 1.2rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableGhostLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `ghost-loader`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [style.height]=\"ghostBodyHeight + 'px'\" class=\"ghost-loader ghost-cell-container\">\n  @for (item of [].constructor(pageSize); track item) {\n    <div [style.height]=\"rowHeight + 'px'\" class=\"ghost-element\">\n      @for (col of columns; track col) {\n        @if (!col.ghostCellTemplate) {\n          <div class=\"line ghost-cell-strip\" [style.width]=\"col?.width + 'px'\"> </div>\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"col.ghostCellTemplate\"> </ng-template>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-loader .line{margin:.9rem 1.2rem}\n"] }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], pageSize: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], rowHeight: [{
-                type: Input
-            }], ghostBodyHeight: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
-
 class DataTableBodyCellComponent {
-    set disable$(val) {
-        this._disable$ = val;
-        this.cellContext.disable$ = val;
+    set disabled(value) {
+        this.cellContext.disabled = value;
+        this._disabled = value;
     }
-    get disable$() {
-        return this._disable$;
+    get disabled() {
+        return this._disabled;
     }
     set group(group) {
         this._group = group;
@@ -1153,7 +930,8 @@ class DataTableBodyCellComponent {
     }
     set rowIndex(val) {
         this._rowIndex = val;
-        this.cellContext.rowIndex = val;
+        this.cellContext.rowIndex = val?.index;
+        this.cellContext.rowInGroupIndex = val?.indexInGroup;
         this.checkValueUpdates();
         this.cd.markForCheck();
     }
@@ -1232,7 +1010,7 @@ class DataTableBodyCellComponent {
         if (!this.sortDir) {
             cls += ' sort-active';
         }
-        if (this.isFocused && !this.disable$?.value) {
+        if (this.isFocused && !this._disabled) {
             cls += ' active';
         }
         if (this.sortDir === SortDirection.asc) {
@@ -1241,7 +1019,7 @@ class DataTableBodyCellComponent {
         if (this.sortDir === SortDirection.desc) {
             cls += ' sort-desc';
         }
-        if (this.disable$?.value) {
+        if (this._disabled) {
             cls += ' row-disabled';
         }
         return cls;
@@ -1264,7 +1042,6 @@ class DataTableBodyCellComponent {
     }
     constructor() {
         this.cd = inject(ChangeDetectorRef);
-        this.ghostLoadingIndicator = false;
         this.activate = new EventEmitter();
         this.treeAction = new EventEmitter();
         this.isFocused = false;
@@ -1278,26 +1055,19 @@ class DataTableBodyCellComponent {
             column: this.column,
             rowHeight: this.rowHeight,
             isSelected: this.isSelected,
-            rowIndex: this.rowIndex,
+            rowIndex: this.rowIndex?.index,
+            rowInGroupIndex: this.rowIndex?.indexInGroup,
             treeStatus: this.treeStatus,
-            disable$: this.disable$,
+            disabled: this._disabled,
             onTreeAction: () => this.onTreeAction()
         };
     }
     ngDoCheck() {
         this.checkValueUpdates();
     }
-    ngOnDestroy() {
-        if (this.cellTemplate) {
-            this.cellTemplate.clear();
-        }
-        if (this.ghostLoaderTemplate) {
-            this.ghostLoaderTemplate.clear();
-        }
-    }
     checkValueUpdates() {
         let value = '';
-        if (!this.row || !this.column) {
+        if (!this.row || !this.column || this.column.prop == undefined) {
             value = '';
         }
         else {
@@ -1313,7 +1083,7 @@ class DataTableBodyCellComponent {
         if (this.value !== value) {
             this.value = value;
             this.cellContext.value = value;
-            this.cellContext.disable$ = this.disable$;
+            this.cellContext.disabled = this._disabled;
             this.sanitizedValue = value !== null && value !== undefined ? this.stripHtml(value) : value;
             this.cd.markForCheck();
         }
@@ -1386,12 +1156,10 @@ class DataTableBodyCellComponent {
     }
     calcSortDir(sorts) {
         if (!sorts) {
-            return;
+            return undefined;
         }
         const sort = sorts.find(s => s.prop === this.column.prop);
-        if (sort) {
-            return sort.dir;
-        }
+        return sort?.dir;
     }
     stripHtml(html) {
         if (!html.replace) {
@@ -1406,15 +1174,14 @@ class DataTableBodyCellComponent {
         const levelIndent = column.treeLevelIndent != null ? column.treeLevelIndent : 50;
         return column.isTreeColumn ? row.level * levelIndent : 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableBodyCellComponent, isStandalone: true, selector: "datatable-body-cell", inputs: { displayCheck: "displayCheck", disable$: "disable$", group: "group", rowHeight: "rowHeight", isSelected: "isSelected", expanded: "expanded", rowIndex: "rowIndex", column: "column", row: "row", sorts: "sorts", treeStatus: "treeStatus", ghostLoadingIndicator: "ghostLoadingIndicator" }, outputs: { activate: "activate", treeAction: "treeAction" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "dblclick": "onDblClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "this.columnCssClasses", "style.width.px": "this.width", "style.minWidth.px": "this.minWidth", "style.maxWidth.px": "this.maxWidth", "style.height": "this.height" } }, viewQueries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "ghostLoaderTemplate", first: true, predicate: ["ghostLoaderTemplate"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
-    @if (row) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableBodyCellComponent, isStandalone: true, selector: "datatable-body-cell", inputs: { displayCheck: "displayCheck", disabled: "disabled", group: "group", rowHeight: "rowHeight", isSelected: "isSelected", expanded: "expanded", rowIndex: "rowIndex", column: "column", row: "row", sorts: "sorts", treeStatus: "treeStatus" }, outputs: { activate: "activate", treeAction: "treeAction" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "dblclick": "onDblClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "this.columnCssClasses", "style.width.px": "this.width", "style.minWidth.px": "this.minWidth", "style.maxWidth.px": "this.maxWidth", "style.height": "this.height" } }, ngImport: i0, template: `
     <div class="datatable-body-cell-label" [style.margin-left.px]="calcLeftMargin(column, row)">
       @if (column.checkboxable && (!displayCheck || displayCheck(row, column, value))) {
       <label class="datatable-checkbox">
         <input
           type="checkbox"
-          [disabled]="disable$ | async"
+          [disabled]="disabled"
           [checked]="isSelected"
           (click)="onCheckboxChange($event)"
         />
@@ -1447,32 +1214,21 @@ class DataTableBodyCellComponent {
       } @else {
       <span [title]="sanitizedValue">{{ value }}</span>
       } } @else {
-      <ng-template
-        #cellTemplate
-        [ngTemplateOutlet]="column.cellTemplate"
-        [ngTemplateOutletContext]="cellContext"
-      >
+      <ng-template [ngTemplateOutlet]="column.cellTemplate" [ngTemplateOutletContext]="cellContext">
       </ng-template>
       }
     </div>
-    } @else { @if (ghostLoadingIndicator) {
-    <ghost-loader [columns]="[column]" [pageSize]="1"></ghost-loader>
-    } }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataTableGhostLoaderComponent, selector: "ghost-loader", inputs: ["columns", "pageSize", "rowHeight", "ghostBodyHeight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}:host:focus{outline:none}:host-context(ngx-datatable.fixed-row) :host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyCellComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-body-cell',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (row) {
+            args: [{ selector: 'datatable-body-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="datatable-body-cell-label" [style.margin-left.px]="calcLeftMargin(column, row)">
       @if (column.checkboxable && (!displayCheck || displayCheck(row, column, value))) {
       <label class="datatable-checkbox">
         <input
           type="checkbox"
-          [disabled]="disable$ | async"
+          [disabled]="disabled"
           [checked]="isSelected"
           (click)="onCheckboxChange($event)"
         />
@@ -1505,23 +1261,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
       } @else {
       <span [title]="sanitizedValue">{{ value }}</span>
       } } @else {
-      <ng-template
-        #cellTemplate
-        [ngTemplateOutlet]="column.cellTemplate"
-        [ngTemplateOutletContext]="cellContext"
-      >
+      <ng-template [ngTemplateOutlet]="column.cellTemplate" [ngTemplateOutletContext]="cellContext">
       </ng-template>
       }
     </div>
-    } @else { @if (ghostLoadingIndicator) {
-    <ghost-loader [columns]="[column]" [pageSize]="1"></ghost-loader>
-    } }
-  `,
-                    imports: [NgTemplateOutlet, DataTableGhostLoaderComponent, AsyncPipe]
-                }]
+  `, imports: [NgTemplateOutlet], styles: [":host{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}:host:focus{outline:none}:host-context(ngx-datatable.fixed-row) :host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { displayCheck: [{
                 type: Input
-            }], disable$: [{
+            }], disabled: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -1541,18 +1288,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], treeStatus: [{
                 type: Input
-            }], ghostLoadingIndicator: [{
-                type: Input
             }], activate: [{
                 type: Output
             }], treeAction: [{
                 type: Output
-            }], cellTemplate: [{
-                type: ViewChild,
-                args: ['cellTemplate', { read: ViewContainerRef, static: true }]
-            }], ghostLoaderTemplate: [{
-                type: ViewChild,
-                args: ['ghostLoaderTemplate', { read: ViewContainerRef, static: true }]
             }], columnCssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1589,7 +1328,6 @@ class DataTableBodyRowComponent {
     constructor() {
         this.cd = inject(ChangeDetectorRef);
         this.treeStatus = 'collapsed';
-        this.ghostLoadingIndicator = false;
         this.verticalScrollVisible = false;
         this.activate = new EventEmitter();
         this.treeAction = new EventEmitter();
@@ -1616,24 +1354,18 @@ class DataTableBodyRowComponent {
     get innerWidth() {
         return this._innerWidth;
     }
-    set offsetX(val) {
-        this._offsetX = val;
-    }
-    get offsetX() {
-        return this._offsetX;
-    }
     get cssClass() {
         let cls = 'datatable-body-row';
         if (this.isSelected) {
             cls += ' active';
         }
-        if (this.rowIndex % 2 !== 0) {
+        if (this.innerRowIndex % 2 !== 0) {
             cls += ' datatable-row-odd';
         }
-        if (this.rowIndex % 2 === 0) {
+        if (this.innerRowIndex % 2 === 0) {
             cls += ' datatable-row-even';
         }
-        if (this.disable$ && this.disable$.value) {
+        if (this.disabled) {
             cls += ' row-disabled';
         }
         if (this.rowClass) {
@@ -1666,9 +1398,7 @@ class DataTableBodyRowComponent {
         }
     }
     onActivate(event, index) {
-        event.cellIndex = index;
-        event.rowElement = this._element;
-        this.activate.emit(event);
+        this.activate.emit({ ...event, rowElement: this._element, cellIndex: index });
     }
     onKeyDown(event) {
         const key = event.key;
@@ -1707,13 +1437,17 @@ class DataTableBodyRowComponent {
     onTreeAction() {
         this.treeAction.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableBodyRowComponent, isStandalone: true, selector: "datatable-body-row", inputs: { columns: "columns", innerWidth: "innerWidth", expanded: "expanded", rowClass: "rowClass", row: "row", group: "group", isSelected: "isSelected", rowIndex: "rowIndex", displayCheck: "displayCheck", treeStatus: "treeStatus", ghostLoadingIndicator: "ghostLoadingIndicator", verticalScrollVisible: "verticalScrollVisible", disable$: "disable$", offsetX: "offsetX", rowHeight: "rowHeight" }, outputs: { activate: "activate", treeAction: "treeAction" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onMouseenter($event)" }, properties: { "class": "this.cssClass", "style.height.px": "this.rowHeight", "style.width.px": "this.columnsTotalWidths" } }, usesOnChanges: true, ngImport: i0, template: `
-    @for (colGroup of _columnsByPin; track colGroup.type; let i = $index) {
+    /** Returns the row index, or if in a group, the index within a group. */
+    get innerRowIndex() {
+        return this.rowIndex?.indexInGroup ?? this.rowIndex?.index ?? 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableBodyRowComponent, isStandalone: true, selector: "datatable-body-row", inputs: { columns: "columns", innerWidth: "innerWidth", expanded: "expanded", rowClass: "rowClass", row: "row", group: "group", isSelected: "isSelected", rowIndex: "rowIndex", displayCheck: "displayCheck", treeStatus: "treeStatus", verticalScrollVisible: "verticalScrollVisible", disabled: "disabled", rowHeight: "rowHeight" }, outputs: { activate: "activate", treeAction: "treeAction" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseenter": "onMouseenter($event)" }, properties: { "class": "this.cssClass", "style.height.px": "this.rowHeight", "style.width.px": "this.columnsTotalWidths" } }, usesOnChanges: true, ngImport: i0, template: `
+    @for (colGroup of _columnsByPin; track colGroup.type) { @if (colGroup.columns.length) {
     <div
       class="datatable-row-{{ colGroup.type }} datatable-row-group"
       [style.width.px]="_columnGroupWidths[colGroup.type]"
-      [class.row-disabled]="disable$ ? (disable$ | async) : false"
+      [class.row-disabled]="disabled"
     >
       @for (column of colGroup.columns; track column.$$id; let ii = $index) {
       <datatable-body-cell
@@ -1727,29 +1461,25 @@ class DataTableBodyRowComponent {
         [column]="column"
         [rowHeight]="rowHeight"
         [displayCheck]="displayCheck"
-        [disable$]="disable$"
+        [disabled]="disabled"
         [treeStatus]="treeStatus"
-        [ghostLoadingIndicator]="ghostLoadingIndicator"
         (activate)="onActivate($event, ii)"
         (treeAction)="onTreeAction()"
       >
       </datatable-body-cell>
       }
     </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: DataTableBodyCellComponent, selector: "datatable-body-cell", inputs: ["displayCheck", "disable$", "group", "rowHeight", "isSelected", "expanded", "rowIndex", "column", "row", "sorts", "treeStatus", "ghostLoadingIndicator"], outputs: ["activate", "treeAction"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    } }
+  `, isInline: true, styles: [":host{display:flex;outline:none}:host-context(ngx-datatable.fixed-row) :host{white-space:nowrap}.datatable-row-group{display:flex;position:relative}\n"], dependencies: [{ kind: "component", type: DataTableBodyCellComponent, selector: "datatable-body-cell", inputs: ["displayCheck", "disabled", "group", "rowHeight", "isSelected", "expanded", "rowIndex", "column", "row", "sorts", "treeStatus"], outputs: ["activate", "treeAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyRowComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-body-row',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @for (colGroup of _columnsByPin; track colGroup.type; let i = $index) {
+            args: [{ selector: 'datatable-body-row', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (colGroup of _columnsByPin; track colGroup.type) { @if (colGroup.columns.length) {
     <div
       class="datatable-row-{{ colGroup.type }} datatable-row-group"
       [style.width.px]="_columnGroupWidths[colGroup.type]"
-      [class.row-disabled]="disable$ ? (disable$ | async) : false"
+      [class.row-disabled]="disabled"
     >
       @for (column of colGroup.columns; track column.$$id; let ii = $index) {
       <datatable-body-cell
@@ -1763,19 +1493,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
         [column]="column"
         [rowHeight]="rowHeight"
         [displayCheck]="displayCheck"
-        [disable$]="disable$"
+        [disabled]="disabled"
         [treeStatus]="treeStatus"
-        [ghostLoadingIndicator]="ghostLoadingIndicator"
         (activate)="onActivate($event, ii)"
         (treeAction)="onTreeAction()"
       >
       </datatable-body-cell>
       }
     </div>
-    }
-  `,
-                    imports: [DataTableBodyCellComponent, AsyncPipe]
-                }]
+    } }
+  `, imports: [DataTableBodyCellComponent], styles: [":host{display:flex;outline:none}:host-context(ngx-datatable.fixed-row) :host{white-space:nowrap}.datatable-row-group{display:flex;position:relative}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], innerWidth: [{
@@ -1796,13 +1523,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], treeStatus: [{
                 type: Input
-            }], ghostLoadingIndicator: [{
-                type: Input
             }], verticalScrollVisible: [{
                 type: Input
-            }], disable$: [{
-                type: Input
-            }], offsetX: [{
+            }], disabled: [{
                 type: Input
             }], cssClass: [{
                 type: HostBinding,
@@ -1827,6 +1550,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 args: ['mouseenter', ['$event']]
             }] } });
 
+/**
+ * Extracts the position (x, y coordinates) from a MouseEvent or TouchEvent.
+ *
+ * @param {MouseEvent | TouchEvent} event - The event object from which to extract the position. Can be either a MouseEvent or a TouchEvent.
+ * @return {{ x: number, y: number }} An object containing the x and y coordinates of the event relative to the viewport.
+ */
+function getPositionFromEvent(event) {
+    return event instanceof MouseEvent ? event : event.changedTouches[0];
+}
+
 /**
  * Draggable Directive for Angular2
  *
@@ -1871,17 +1604,18 @@ class DraggableDirective {
         }
     }
     onMousedown(event) {
+        const isMouse = event instanceof MouseEvent;
         // we only want to drag the inner header text
         const isDragElm = event.target.classList.contains('draggable');
         if (isDragElm && (this.dragX || this.dragY)) {
             event.preventDefault();
             this.isDragging = true;
-            const mouseDownPos = { x: event.clientX, y: event.clientY };
-            const mouseup = fromEvent(document, 'mouseup');
-            this.subscription = mouseup.subscribe((ev) => this.onMouseup(ev));
-            const mouseMoveSub = fromEvent(document, 'mousemove')
+            const mouseDownPos = getPositionFromEvent(event);
+            const mouseup = fromEvent(document, isMouse ? 'mouseup' : 'touchend');
+            this.subscription = mouseup.subscribe(ev => this.onMouseup(ev));
+            const mouseMoveSub = fromEvent(document, isMouse ? 'mousemove' : 'touchmove')
                 .pipe(takeUntil(mouseup))
-                .subscribe((ev) => this.move(ev, mouseDownPos));
+                .subscribe(ev => this.move(ev, mouseDownPos));
             this.subscription.add(mouseMoveSub);
             this.dragStart.emit({
                 event,
@@ -1894,8 +1628,9 @@ class DraggableDirective {
         if (!this.isDragging) {
             return;
         }
-        const x = event.clientX - mouseDownPos.x;
-        const y = event.clientY - mouseDownPos.y;
+        const { clientX, clientY } = getPositionFromEvent(event);
+        const x = clientX - mouseDownPos.clientX;
+        const y = clientY - mouseDownPos.clientY;
         if (this.dragX) {
             this.element.style.left = `${x}px`;
         }
@@ -1915,14 +1650,13 @@ class DraggableDirective {
             this.subscription = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: DraggableDirective, isStandalone: true, selector: "[draggable]", inputs: { dragEventTarget: "dragEventTarget", dragModel: "dragModel", dragX: ["dragX", "dragX", booleanAttribute], dragY: ["dragY", "dragY", booleanAttribute] }, outputs: { dragStart: "dragStart", dragging: "dragging", dragEnd: "dragEnd" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.5", type: DraggableDirective, isStandalone: true, selector: "[draggable]", inputs: { dragEventTarget: "dragEventTarget", dragModel: "dragModel", dragX: ["dragX", "dragX", booleanAttribute], dragY: ["dragY", "dragY", booleanAttribute] }, outputs: { dragStart: "dragStart", dragging: "dragging", dragEnd: "dragEnd" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[draggable]',
-                    standalone: true
+                    selector: '[draggable]'
                 }]
         }], propDecorators: { dragEventTarget: [{
                 type: Input
@@ -1950,23 +1684,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 class DatatableRowDefComponent {
     constructor() {
         this.rowDef = inject(RowDefToken);
+        this.rowContext = {
+            ...this.rowDef.rowDefInternal,
+            disabled: this.rowDef.rowDefInternalDisabled
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DatatableRowDefComponent, isStandalone: true, selector: "datatable-row-def", ngImport: i0, template: `@if (rowDef.rowDefInternal.rowTemplate) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DatatableRowDefComponent, isStandalone: true, selector: "datatable-row-def", ngImport: i0, template: `@if (rowDef.rowDefInternal.rowTemplate) {
     <ng-container
       [ngTemplateOutlet]="rowDef.rowDefInternal.rowTemplate"
-      [ngTemplateOutletContext]="rowDef"
+      [ngTemplateOutletContext]="rowContext"
     />
   }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'datatable-row-def',
                     template: `@if (rowDef.rowDefInternal.rowTemplate) {
     <ng-container
       [ngTemplateOutlet]="rowDef.rowDefInternal.rowTemplate"
-      [ngTemplateOutletContext]="rowDef"
+      [ngTemplateOutletContext]="rowContext"
     />
   }`,
                     imports: [NgTemplateOutlet]
@@ -1976,14 +1714,13 @@ class DatatableRowDefDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableRowDefDirective, isStandalone: true, selector: "[rowDef]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableRowDefDirective, isStandalone: true, selector: "[rowDef]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rowDef]',
-                    standalone: true
+                    selector: '[rowDef]'
                 }]
         }] });
 /**
@@ -2007,17 +1744,18 @@ class DatatableRowDefInternalDirective {
             })
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefInternalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: DatatableRowDefInternalDirective, isStandalone: true, selector: "[rowDefInternal]", inputs: { rowDefInternal: "rowDefInternal" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefInternalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableRowDefInternalDirective, isStandalone: true, selector: "[rowDefInternal]", inputs: { rowDefInternal: "rowDefInternal", rowDefInternalDisabled: "rowDefInternalDisabled" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableRowDefInternalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableRowDefInternalDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rowDefInternal]',
-                    standalone: true
+                    selector: '[rowDefInternal]'
                 }]
         }], propDecorators: { rowDefInternal: [{
                 type: Input
+            }], rowDefInternalDisabled: [{
+                type: Input
             }] } });
 const RowDefToken = new InjectionToken('RowDef');
 
@@ -2038,63 +1776,43 @@ class DataTableRowWrapperComponent {
         this.iterableDiffers = inject(IterableDiffers);
         this.tableComponent = inject(DatatableComponentToken);
         this.cd = inject(ChangeDetectorRef);
-        this.group = computed(() => {
-            if (typeof this.row === 'object' && 'value' in this.row) {
-                return this.row;
-            }
-        });
     }
     ngOnInit() {
-        if (this.disableCheck) {
-            const isRowDisabled = this.disableCheck(this.row);
-            this.disable$ = new BehaviorSubject(isRowDisabled);
-            this.rowContext.disableRow$ = this.disable$;
-        }
         this.selectedRowsDiffer = this.iterableDiffers.find(this.selected ?? []).create();
     }
     ngOnChanges(changes) {
         if (changes['row']) {
             // this component renders either a group header or a row. Never both.
             if (this.isGroup(this.row)) {
-                this.groupContext = {
+                this.context = {
                     group: this.row,
                     expanded: this.expanded,
                     rowIndex: this.rowIndex
                 };
             }
             else {
-                this.rowContext = {
+                this.context = {
                     row: this.row,
                     expanded: this.expanded,
                     rowIndex: this.rowIndex,
-                    disableRow$: this.disable$
+                    disabled: this.disabled
                 };
             }
         }
         if (changes['rowIndex']) {
-            (this.rowContext ?? this.groupContext).rowIndex = this.rowIndex;
+            this.context.rowIndex = this.rowIndex;
         }
         if (changes['expanded']) {
-            (this.groupContext ?? this.rowContext).expanded = this.expanded;
-            if (this.rowContext) {
-                this.rowContext.expanded = this.expanded;
-            }
+            this.context.expanded = this.expanded;
         }
     }
     ngDoCheck() {
-        if (this.disableCheck) {
-            const isRowDisabled = this.disableCheck(this.row);
-            if (isRowDisabled !== this.disable$.value) {
-                this.disable$.next(isRowDisabled);
-                this.cd.markForCheck();
-            }
-        }
         if (this.rowDiffer.diff(this.row)) {
-            if (this.isGroup(this.row)) {
-                this.groupContext.group = this.row;
+            if ('group' in this.context) {
+                this.context.group = this.row;
             }
             else {
-                this.rowContext.row = this.row;
+                this.context.row = this.row;
             }
             this.cd.markForCheck();
         }
@@ -2102,10 +1820,13 @@ class DataTableRowWrapperComponent {
         // on currently selected rows to check if it is modified
         // if any of the row of this group is not present in `selected` rows array
         // mark group header checkbox state as indeterminate
-        if (this.groupHeader?.checkboxable && this.selectedRowsDiffer.diff(this.selected)) {
-            const selectedRows = this.selected.filter(row => this.group()?.value.find(item => item === row));
+        if (this.isGroup(this.row) &&
+            this.groupHeader?.checkboxable &&
+            this.selectedRowsDiffer.diff(this.selected)) {
+            const thisRow = this.row;
+            const selectedRows = this.selected.filter(row => thisRow.value.find((item) => item === row));
             if (this.checkBoxInput) {
-                if (selectedRows.length && selectedRows.length !== this.group()?.value.length) {
+                if (selectedRows.length && selectedRows.length !== this.row.value.length) {
                     this.checkBoxInput.nativeElement.indeterminate = true;
                 }
                 else {
@@ -2118,14 +1839,14 @@ class DataTableRowWrapperComponent {
     onContextmenu($event) {
         this.rowContextmenu.emit({ event: $event, row: this.row });
     }
-    onCheckboxChange(groupSelected) {
+    onCheckboxChange(groupSelected, group) {
         // First remove all rows of this group from `selected`
         this.selected = [
-            ...this.selected.filter(row => !this.group().value.find(item => item === row))
+            ...this.selected.filter(row => !group.value.find((item) => item === row))
         ];
         // If checkbox is checked then add all rows of this group in `selected`
         if (groupSelected) {
-            this.selected = [...this.selected, ...this.group().value];
+            this.selected = [...this.selected, ...group.value];
         }
         // Update `selected` of DatatableComponent with newly evaluated `selected`
         this.tableComponent.selected = [...this.selected];
@@ -2137,30 +1858,30 @@ class DataTableRowWrapperComponent {
     isGroup(row) {
         return !!this.groupHeader;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableRowWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableRowWrapperComponent, isStandalone: true, selector: "datatable-row-wrapper", inputs: { innerWidth: "innerWidth", rowDetail: "rowDetail", groupHeader: "groupHeader", offsetX: "offsetX", detailRowHeight: "detailRowHeight", groupHeaderRowHeight: "groupHeaderRowHeight", row: "row", groupedRows: "groupedRows", disableCheck: "disableCheck", selected: "selected", rowIndex: "rowIndex", expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { rowContextmenu: "rowContextmenu" }, host: { listeners: { "contextmenu": "onContextmenu($event)" }, classAttribute: "datatable-row-wrapper" }, viewQueries: [{ propertyName: "checkBoxInput", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    @if (groupHeader?.template) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableRowWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableRowWrapperComponent, isStandalone: true, selector: "datatable-row-wrapper", inputs: { innerWidth: "innerWidth", rowDetail: "rowDetail", groupHeader: "groupHeader", offsetX: "offsetX", detailRowHeight: "detailRowHeight", groupHeaderRowHeight: "groupHeaderRowHeight", row: "row", groupedRows: "groupedRows", selected: "selected", disabled: "disabled", rowIndex: "rowIndex", expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { rowContextmenu: "rowContextmenu" }, host: { listeners: { "contextmenu": "onContextmenu($event)" }, classAttribute: "datatable-row-wrapper" }, viewQueries: [{ propertyName: "checkBoxInput", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    @if (isGroup(row) && groupHeader?.template) {
     <div
       class="datatable-group-header"
       [style.height.px]="groupHeaderRowHeight"
       [style.width.px]="innerWidth"
     >
       <div class="datatable-group-cell">
-        @if (groupHeader.checkboxable) {
+        @if (groupHeader!.checkboxable) {
         <div>
           <label class="datatable-checkbox">
             <input
               #select
               type="checkbox"
-              [checked]="selectedGroupRows().length === group().value.length"
-              (change)="onCheckboxChange(select.checked)"
+              [checked]="selectedGroupRows().length === row.value.length"
+              (change)="onCheckboxChange(select.checked, row)"
             />
           </label>
         </div>
         }
         <ng-template
-          [ngTemplateOutlet]="groupHeader.template"
-          [ngTemplateOutletContext]="groupContext"
+          [ngTemplateOutlet]="groupHeader!.template!"
+          [ngTemplateOutletContext]="context"
         >
         </ng-template>
       </div>
@@ -2169,40 +1890,37 @@ class DataTableRowWrapperComponent {
     <ng-content> </ng-content>
     } @if (rowDetail?.template && expanded) {
     <div [style.height.px]="detailRowHeight" class="datatable-row-detail">
-      <ng-template [ngTemplateOutlet]="rowDetail.template" [ngTemplateOutletContext]="rowContext">
+      <ng-template [ngTemplateOutlet]="rowDetail!.template!" [ngTemplateOutletContext]="context">
       </ng-template>
     </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.datatable-row-detail{overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableRowWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableRowWrapperComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-row-wrapper',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (groupHeader?.template) {
+            args: [{ selector: 'datatable-row-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (isGroup(row) && groupHeader?.template) {
     <div
       class="datatable-group-header"
       [style.height.px]="groupHeaderRowHeight"
       [style.width.px]="innerWidth"
     >
       <div class="datatable-group-cell">
-        @if (groupHeader.checkboxable) {
+        @if (groupHeader!.checkboxable) {
         <div>
           <label class="datatable-checkbox">
             <input
               #select
               type="checkbox"
-              [checked]="selectedGroupRows().length === group().value.length"
-              (change)="onCheckboxChange(select.checked)"
+              [checked]="selectedGroupRows().length === row.value.length"
+              (change)="onCheckboxChange(select.checked, row)"
             />
           </label>
         </div>
         }
         <ng-template
-          [ngTemplateOutlet]="groupHeader.template"
-          [ngTemplateOutletContext]="groupContext"
+          [ngTemplateOutlet]="groupHeader!.template!"
+          [ngTemplateOutletContext]="context"
         >
         </ng-template>
       </div>
@@ -2211,16 +1929,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
     <ng-content> </ng-content>
     } @if (rowDetail?.template && expanded) {
     <div [style.height.px]="detailRowHeight" class="datatable-row-detail">
-      <ng-template [ngTemplateOutlet]="rowDetail.template" [ngTemplateOutletContext]="rowContext">
+      <ng-template [ngTemplateOutlet]="rowDetail!.template!" [ngTemplateOutletContext]="context">
       </ng-template>
     </div>
     }
-  `,
-                    host: {
+  `, host: {
                         class: 'datatable-row-wrapper'
-                    },
-                    imports: [NgTemplateOutlet]
-                }]
+                    }, imports: [NgTemplateOutlet], styles: [":host{display:flex;flex-direction:column}.datatable-row-detail{overflow-y:hidden}\n"] }]
         }], propDecorators: { checkBoxInput: [{
                 type: ViewChild,
                 args: ['select']
@@ -2240,10 +1955,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], groupedRows: [{
                 type: Input
-            }], disableCheck: [{
-                type: Input
             }], selected: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], rowContextmenu: [{
                 type: Output
             }], rowIndex: [{
@@ -2267,14 +1982,14 @@ function defaultSumFunc(cells) {
     return cellsWithValues.reduce((res, cell) => res + cell);
 }
 function noopSumFunc(cells) {
-    return null;
+    return;
 }
 class DataTableSummaryRowComponent {
     constructor() {
         this.summaryRow = {};
     }
     ngOnChanges() {
-        if (!this.columns || !this.rows) {
+        if (!this.columns.length || !this.rows.length) {
             return;
         }
         this.updateInternalColumns();
@@ -2289,7 +2004,7 @@ class DataTableSummaryRowComponent {
     updateValues() {
         this.summaryRow = {};
         this.columns
-            .filter(col => !col.summaryTemplate)
+            .filter(col => !col.summaryTemplate && col.prop)
             .forEach(col => {
             const cellsFromSingleColumn = this.rows.map(row => row[col.prop]);
             const sumFunc = this.getSummaryFunction(col);
@@ -2309,23 +2024,22 @@ class DataTableSummaryRowComponent {
             return column.summaryFunc;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableSummaryRowComponent, isStandalone: true, selector: "datatable-summary-row", inputs: { rows: "rows", columns: "columns", rowHeight: "rowHeight", offsetX: "offsetX", innerWidth: "innerWidth" }, host: { classAttribute: "datatable-summary-row" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableSummaryRowComponent, isStandalone: true, selector: "datatable-summary-row", inputs: { rows: "rows", columns: "columns", rowHeight: "rowHeight", innerWidth: "innerWidth" }, host: { classAttribute: "datatable-summary-row" }, usesOnChanges: true, ngImport: i0, template: `
     @if (summaryRow && _internalColumns) {
     <datatable-body-row
       tabindex="-1"
       [innerWidth]="innerWidth"
-      [offsetX]="offsetX"
       [columns]="_internalColumns"
       [rowHeight]="rowHeight"
       [row]="summaryRow"
-      [rowIndex]="-1"
+      [rowIndex]="{ index: -1 }"
     >
     </datatable-body-row>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: DataTableBodyRowComponent, selector: "datatable-body-row", inputs: ["columns", "innerWidth", "expanded", "rowClass", "row", "group", "isSelected", "rowIndex", "displayCheck", "treeStatus", "ghostLoadingIndicator", "verticalScrollVisible", "disable$", "offsetX", "rowHeight"], outputs: ["activate", "treeAction"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: DataTableBodyRowComponent, selector: "datatable-body-row", inputs: ["columns", "innerWidth", "expanded", "rowClass", "row", "group", "isSelected", "rowIndex", "displayCheck", "treeStatus", "verticalScrollVisible", "disabled", "rowHeight"], outputs: ["activate", "treeAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableSummaryRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableSummaryRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'datatable-summary-row',
@@ -2334,11 +2048,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
     <datatable-body-row
       tabindex="-1"
       [innerWidth]="innerWidth"
-      [offsetX]="offsetX"
       [columns]="_internalColumns"
       [rowHeight]="rowHeight"
       [row]="summaryRow"
-      [rowIndex]="-1"
+      [rowIndex]="{ index: -1 }"
     >
     </datatable-body-row>
     }
@@ -2354,12 +2067,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], rowHeight: [{
                 type: Input
-            }], offsetX: [{
-                type: Input
             }], innerWidth: [{
                 type: Input
             }] } });
 
+class DataTableGhostLoaderComponent {
+    constructor() {
+        this.cellMode = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableGhostLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableGhostLoaderComponent, isStandalone: true, selector: "ghost-loader", inputs: { columns: "columns", pageSize: ["pageSize", "pageSize", numberAttribute], rowHeight: "rowHeight", ghostBodyHeight: ["ghostBodyHeight", "ghostBodyHeight", numberAttribute], cellMode: ["cellMode", "cellMode", booleanAttribute] }, ngImport: i0, template: "<div [style.height.px]=\"ghostBodyHeight\" class=\"ghost-loader ghost-cell-container\">\n  @for (item of [].constructor(pageSize); track item) {\n  <div [style.height.px]=\"rowHeight\" class=\"ghost-element\" [class.datatable-body-row]=\"cellMode\">\n    @for (col of columns; track col) {\n    <div class=\"ghost-cell\" [class.datatable-body-cell]=\"cellMode\" [style.width.px]=\"col.width\">\n      @if (!col.ghostCellTemplate) {\n      <div class=\"line ghost-cell-strip\"></div>\n      } @else {\n      <ng-template [ngTemplateOutlet]=\"col.ghostCellTemplate\"></ng-template>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex;align-items:center}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-cell{padding-inline:1.2rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableGhostLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `ghost-loader`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [style.height.px]=\"ghostBodyHeight\" class=\"ghost-loader ghost-cell-container\">\n  @for (item of [].constructor(pageSize); track item) {\n  <div [style.height.px]=\"rowHeight\" class=\"ghost-element\" [class.datatable-body-row]=\"cellMode\">\n    @for (col of columns; track col) {\n    <div class=\"ghost-cell\" [class.datatable-body-cell]=\"cellMode\" [style.width.px]=\"col.width\">\n      @if (!col.ghostCellTemplate) {\n      <div class=\"line ghost-cell-strip\"></div>\n      } @else {\n      <ng-template [ngTemplateOutlet]=\"col.ghostCellTemplate\"></ng-template>\n      }\n    </div>\n    }\n  </div>\n  }\n</div>\n", styles: ["@keyframes ghost{0%{background-position:0vw 0}to{background-position:100vw 0}}.ghost-loader{overflow:hidden}.ghost-loader .line{width:100%;height:12px;animation-name:ghost;animation-iteration-count:infinite;animation-timing-function:linear}.ghost-loader .ghost-element{display:flex;align-items:center}:host.ghost-overlay{position:sticky;top:20px}:host.ghost-overlay .ghost-cell{padding-inline:1.2rem}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], pageSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], rowHeight: [{
+                type: Input
+            }], ghostBodyHeight: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], cellMode: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class DatatableBodyRowDirective {
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableBodyRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: DatatableBodyRowDirective, isStandalone: true, selector: "[ngx-datatable-body-row]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableBodyRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-datatable-body-row]'
+                }]
+        }] });
+
 function selectRows(selected, row, comparefn) {
     const selectedIndex = comparefn(row, selected);
     if (selectedIndex > -1) {
@@ -2392,7 +2142,7 @@ function selectRowsBetween(selected, rows, index, prevIndex) {
         if ((reverse && lesser) || (!reverse && greater)) {
             // if in the positive range to be added to `selected`, and
             // not already in the selected array, add it
-            if (i >= range.start && i <= range.end) {
+            if (i >= range.start && i <= range.end && row) {
                 selected.push(row);
             }
         }
@@ -2400,195 +2150,24 @@ function selectRowsBetween(selected, rows, index, prevIndex) {
     return selected;
 }
 
-class DataTableSelectionComponent {
-    constructor() {
-        this.activate = new EventEmitter();
-        this.select = new EventEmitter();
-    }
-    selectRow(event, index, row) {
-        if (!this.selectEnabled) {
-            return;
+class DataTableBodyComponent {
+    set pageSize(val) {
+        if (val !== this._pageSize) {
+            this._pageSize = val;
+            this.recalcLayout();
+            // Emits the page event if page size has been changed
+            this._offsetEvent = -1;
+            this.updatePage('up');
+            this.updatePage('down');
         }
-        const chkbox = this.selectionType === SelectionType.checkbox;
-        const multi = this.selectionType === SelectionType.multi;
-        const multiClick = this.selectionType === SelectionType.multiClick;
-        let selected = [];
-        if (multi || chkbox || multiClick) {
-            if (event.shiftKey) {
-                selected = selectRowsBetween([], this.rows, index, this.prevIndex);
-            }
-            else if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-                // select all rows except dummy rows which are added for ghostloader in case of virtual scroll
-                selected = this.rows.filter(rowItem => !!rowItem);
-            }
-            else if (event.ctrlKey || event.metaKey || multiClick || chkbox) {
-                selected = selectRows([...this.selected], row, this.getRowSelectedIdx.bind(this));
-            }
-            else {
-                selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
-            }
-        }
-        else {
-            selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
-        }
-        if (typeof this.selectCheck === 'function') {
-            selected = selected.filter(this.selectCheck.bind(this));
-        }
-        if (typeof this.disableCheck === 'function') {
-            selected = selected.filter(rowData => !this.disableCheck(rowData));
-        }
-        this.selected.splice(0, this.selected.length);
-        this.selected.push(...selected);
-        this.prevIndex = index;
-        this.select.emit({
-            selected
-        });
-    }
-    onActivate(model, index) {
-        const { type, event, row } = model;
-        const chkbox = this.selectionType === SelectionType.checkbox;
-        const select = (!chkbox && (type === 'click' || type === 'dblclick')) || (chkbox && type === 'checkbox');
-        if (select) {
-            this.selectRow(event, index, row);
-        }
-        else if (type === 'keydown') {
-            if (event.key === Keys.return) {
-                this.selectRow(event, index, row);
-            }
-            else if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-                this.selectRow(event, 0, this.rows[this.rows.length - 1]);
-            }
-            else {
-                this.onKeyboardFocus(model);
-            }
-        }
-        this.activate.emit(model);
-    }
-    onKeyboardFocus(model) {
-        const { key } = model.event;
-        const shouldFocus = key === Keys.up || key === Keys.down || key === Keys.right || key === Keys.left;
-        if (shouldFocus) {
-            const isCellSelection = this.selectionType === SelectionType.cell;
-            if (typeof this.disableCheck === 'function') {
-                const isRowDisabled = this.disableCheck(model.row);
-                if (isRowDisabled) {
-                    return;
-                }
-            }
-            if (!model.cellElement || !isCellSelection) {
-                this.focusRow(model.rowElement, key);
-            }
-            else if (isCellSelection) {
-                this.focusCell(model.cellElement, model.rowElement, key, model.cellIndex);
-            }
-        }
-    }
-    focusRow(rowElement, key) {
-        const nextRowElement = this.getPrevNextRow(rowElement, key);
-        if (nextRowElement) {
-            nextRowElement.focus();
-        }
-    }
-    getPrevNextRow(rowElement, key) {
-        const parentElement = rowElement.parentElement;
-        if (parentElement) {
-            let focusElement;
-            if (key === Keys.up) {
-                focusElement = parentElement.previousElementSibling;
-            }
-            else if (key === Keys.down) {
-                focusElement = parentElement.nextElementSibling;
-            }
-            if (focusElement && focusElement.children.length) {
-                return focusElement.children[0];
-            }
-        }
-    }
-    focusCell(cellElement, rowElement, key, cellIndex) {
-        let nextCellElement;
-        if (key === Keys.left) {
-            nextCellElement = cellElement.previousElementSibling;
-        }
-        else if (key === Keys.right) {
-            nextCellElement = cellElement.nextElementSibling;
-        }
-        else if (key === Keys.up || key === Keys.down) {
-            const nextRowElement = this.getPrevNextRow(rowElement, key);
-            if (nextRowElement) {
-                const children = nextRowElement.getElementsByClassName('datatable-body-cell');
-                if (children.length) {
-                    nextCellElement = children[cellIndex];
-                }
-            }
-        }
-        if (nextCellElement &&
-            'focus' in nextCellElement &&
-            typeof nextCellElement.focus === 'function') {
-            nextCellElement.focus();
-        }
-    }
-    getRowSelected(row) {
-        return this.getRowSelectedIdx(row, this.selected) > -1;
-    }
-    getRowSelectedIdx(row, selected) {
-        if (!selected || !selected.length) {
-            return -1;
-        }
-        const rowId = this.rowIdentity(row);
-        return selected.findIndex(r => {
-            const id = this.rowIdentity(r);
-            return id === rowId;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: DataTableSelectionComponent, isStandalone: true, selector: "datatable-selection", inputs: { rows: "rows", selected: "selected", selectEnabled: "selectEnabled", selectionType: "selectionType", rowIdentity: "rowIdentity", selectCheck: "selectCheck", disableCheck: "disableCheck" }, outputs: { activate: "activate", select: "select" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableSelectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'datatable-selection',
-                    template: ` <ng-content></ng-content> `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { rows: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], selectEnabled: [{
-                type: Input
-            }], selectionType: [{
-                type: Input
-            }], rowIdentity: [{
-                type: Input
-            }], selectCheck: [{
-                type: Input
-            }], disableCheck: [{
-                type: Input
-            }], activate: [{
-                type: Output
-            }], select: [{
-                type: Output
-            }] } });
-
-class DataTableBodyComponent {
-    set pageSize(val) {
-        if (val !== this._pageSize) {
-            this._pageSize = val;
-            this.recalcLayout();
-            // Emits the page event if page size has been changed
-            this._offsetEvent = -1;
-            this.updatePage('up');
-            this.updatePage('down');
-        }
-    }
-    get pageSize() {
-        return this._pageSize;
-    }
-    set rows(val) {
-        if (val !== this._rows) {
-            this._rows = val;
-            this.recalcLayout();
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    set rows(val) {
+        if (val !== this._rows) {
+            this._rows = val;
+            this.recalcLayout();
         }
     }
     get rows() {
@@ -2607,9 +2186,6 @@ class DataTableBodyComponent {
         if (val !== this._offset) {
             this._offset = val;
             if (!this.scrollbarV || (this.scrollbarV && !this.virtualization)) {
-                if (!isNaN(this._offset) && this.ghostLoadingIndicator) {
-                    this.rows = [];
-                }
                 this.recalcLayout();
             }
         }
@@ -2663,7 +2239,6 @@ class DataTableBodyComponent {
         this.page = new EventEmitter();
         this.activate = new EventEmitter();
         this.select = new EventEmitter();
-        this.detailToggle = new EventEmitter();
         this.rowContextmenu = new EventEmitter(false);
         this.treeAction = new EventEmitter();
         /**
@@ -2684,7 +2259,6 @@ class DataTableBodyComponent {
         this.rowHeightsCache = signal(new RowHeightCache());
         this.offsetY = 0;
         this.indexes = signal({ first: 0, last: 0 });
-        this.rowIndexes = new WeakMap();
         this.rowExpansions = [];
         this._offsetEvent = -1;
         /**
@@ -2705,83 +2279,30 @@ class DataTableBodyComponent {
             return typeof rowHeight === 'function' ? rowHeight(row, index) : rowHeight;
         };
         /**
-         * Calculates the styles for the row so that the rows can be moved in 2D space
-         * during virtual scroll inside the DOM.   In the below case the Y position is
-         * manipulated.   As an example, if the height of row 0 is 30 px and row 1 is
-         * 100 px then following styles are generated:
-         *
-         * transform: translate3d(0px, 0px, 0px);    ->  row0
-         * transform: translate3d(0px, 30px, 0px);   ->  row1
-         * transform: translate3d(0px, 130px, 0px);  ->  row2
-         *
-         * Row heights have to be calculated based on the row heights cache as we wont
-         * be able to determine which row is of what height before hand.  In the above
-         * case the positionY of the translate3d for row2 would be the sum of all the
-         * heights of the rows before it (i.e. row0 and row1).
-         *
-         * @returns the CSS3 style to be applied
+         * Calculates the offset of the rendered rows.
+         * As virtual rows are not shown, we have to move all rendered rows
+         * by the total size of previous non-rendered rows.
+         * If each row has a size of 10px and the first 10 rows are not rendered due to scroll,
+         * then we have a renderOffset of 100px.
          */
-        this.rowsStyles = computed(() => {
-            const rowsStyles = [];
-            this.rowsToRender().forEach((rows, index) => {
-                const styles = {};
-                // only add styles for the group if there is a group
-                if (this.groupedRows) {
-                    styles.width = this.columnGroupWidths.total;
-                }
-                if (this.scrollbarV && this.virtualization) {
-                    let idx = 0;
-                    if (Array.isArray(rows)) {
-                        // Get the latest row rowindex in a group
-                        const row = rows[rows.length - 1];
-                        idx = row ? this.getRowIndex(row) : 0;
-                    }
-                    else {
-                        if (rows) {
-                            idx = this.getRowIndex(rows);
-                        }
-                        else {
-                            // When ghost cells are enabled use index to get the position of them
-                            idx = this.indexes().first + index;
-                        }
-                    }
-                    // const pos = idx * rowHeight;
-                    // The position of this row would be the sum of all row heights
-                    // until the previous row position.
-                    styles.transform = `translateY(${this.rowHeightsCache().query(idx - 1)}px)`;
-                }
-                rowsStyles.push(styles);
-            });
-            return rowsStyles;
-        });
-        /**
-         * Calculate bottom summary row offset for scrollbar mode.
-         * For more information about cache and offset calculation
-         * see description for `rowsStyles` signal
-         *
-         * @returns the CSS3 style to be applied
-         */
-        this.bottomSummaryRowsStyles = computed(() => {
-            if (!this.scrollbarV || !this.rows || !this.rows.length || !this.rowsToRender()) {
-                return null;
+        this.renderOffset = computed(() => {
+            if (this.scrollbarV && this.virtualization) {
+                return `translateY(${this.rowHeightsCache().query(this.indexes().first - 1)}px)`;
+            }
+            else {
+                return '';
             }
-            const pos = this.rowHeightsCache().query(this.rows.length - 1);
-            return {
-                transform: `translateY(${pos}px)`,
-                position: 'absolute'
-            };
         });
         // declare fn here so we can get access to the `this` property
         this.rowTrackingFn = (index, row) => {
             if (this.ghostLoadingIndicator) {
                 return index;
             }
-            if (this.trackByProp) {
+            if (this.trackByProp && row) {
                 return row[this.trackByProp];
             }
             else {
-                const idx = this.getRowIndex(row);
-                return idx;
+                return row;
             }
         };
     }
@@ -2892,46 +2413,14 @@ class DataTableBodyComponent {
      */
     updateRows() {
         const { first, last } = this.indexes();
-        let rowIndex = first;
-        let idx = 0;
-        const temp = [];
         // if grouprowsby has been specified treat row paging
         // parameters as group paging parameters ie if limit 10 has been
         // specified treat it as 10 groups rather than 10 rows
-        if (this.groupedRows) {
-            while (rowIndex < last && rowIndex < this.groupedRows.length) {
-                // Add the groups into this page
-                const group = this.groupedRows[rowIndex];
-                this.rowIndexes.set(group, rowIndex);
-                if (group.value) {
-                    // add indexes for each group item
-                    group.value.forEach((g, i) => {
-                        const _idx = `${rowIndex}-${i}`;
-                        this.rowIndexes.set(g, _idx);
-                    });
-                }
-                temp[idx] = group;
-                idx++;
-                // Group index in this context
-                rowIndex++;
-            }
-        }
-        else {
-            while (rowIndex < last && rowIndex < this.rowCount) {
-                const row = this.rows[rowIndex];
-                if (row) {
-                    // add indexes for each row
-                    this.rowIndexes.set(row, rowIndex);
-                    temp[idx] = row;
-                }
-                else if (this.ghostLoadingIndicator && this.virtualization) {
-                    temp[idx] = undefined;
-                }
-                idx++;
-                rowIndex++;
-            }
-        }
-        return temp;
+        const rows = this.groupedRows
+            ? this.groupedRows.slice(first, Math.min(last, this.groupedRows.length))
+            : this.rows.slice(first, Math.min(last, this.rowCount));
+        rows.length = last - first;
+        return rows;
     }
     /**
      * Get the row height
@@ -3013,11 +2502,11 @@ class DataTableBodyComponent {
         // rows array is changed.
         this.rowHeightsCache().clearCache();
         // Initialize the tree only if there are rows inside the tree.
-        if (this.rows && this.rows.length) {
+        if (this.rows.length) {
             const rowExpansions = new Set();
             if (this.rowDetail) {
                 for (const row of this.rows) {
-                    if (this.getRowExpanded(row)) {
+                    if (row && this.getRowExpanded(row)) {
                         rowExpansions.add(row);
                     }
                 }
@@ -3027,27 +2516,13 @@ class DataTableBodyComponent {
                 rowHeight: this.rowHeight,
                 detailRowHeight: this.getDetailRowHeight,
                 externalVirtual: this.scrollbarV && this.externalPaging,
+                indexOffset: this.indexes().first,
                 rowCount: this.rowCount,
-                rowIndexes: this.rowIndexes,
                 rowExpansions
             });
             this.rowHeightsCache.set(Object.create(this.rowHeightsCache()));
         }
     }
-    /**
-     * Gets the index for the view port
-     */
-    getAdjustedViewPortIndex() {
-        // Capture the row index of the first row that is visible on the viewport.
-        // If the scroll bar is just below the row which is highlighted then make that as the
-        // first index.
-        const viewPortFirstRowIndex = this.indexes().first;
-        if (this.scrollbarV && this.virtualization) {
-            const offsetScroll = this.rowHeightsCache().query(viewPortFirstRowIndex - 1);
-            return offsetScroll <= this.offsetY ? viewPortFirstRowIndex - 1 : viewPortFirstRowIndex;
-        }
-        return viewPortFirstRowIndex;
-    }
     /**
      * Toggle the Expansion of the row i.e. if the row is expanded then it will
      * collapse and vice versa.   Note that the expanded status is stored as
@@ -3055,17 +2530,8 @@ class DataTableBodyComponent {
      * status in case of sorting and filtering of the row set.
      */
     toggleRowExpansion(row) {
-        // Capture the row index of the first row that is visible on the viewport.
-        const viewPortFirstRowIndex = this.getAdjustedViewPortIndex();
         const rowExpandedIdx = this.getRowExpandedIdx(row, this.rowExpansions);
         const expanded = rowExpandedIdx > -1;
-        // If the detailRowHeight is auto --> only in case of non-virtualized scroll
-        if (this.scrollbarV && this.virtualization) {
-            const detailRowHeight = this.getDetailRowHeight(row) * (expanded ? -1 : 1);
-            // const idx = this.rowIndexes.get(row) || 0;
-            const idx = this.getRowIndex(row);
-            this.rowHeightsCache().update(idx, detailRowHeight);
-        }
         // Update the toggled row and update thive nevere heights in the cache.
         if (expanded) {
             this.rowExpansions.splice(rowExpandedIdx, 1);
@@ -3073,10 +2539,10 @@ class DataTableBodyComponent {
         else {
             this.rowExpansions.push(row);
         }
-        this.detailToggle.emit({
-            rows: [row],
-            currentIndex: viewPortFirstRowIndex
-        });
+        // If the detailRowHeight is auto --> only in case of non-virtualized scroll
+        if (this.scrollbarV && this.virtualization) {
+            this.refreshRowHeightCache();
+        }
     }
     /**
      * Expand/Collapse all the rows no matter what their state is.
@@ -3084,8 +2550,6 @@ class DataTableBodyComponent {
     toggleAllRows(expanded) {
         // clear prev expansions
         this.rowExpansions = [];
-        // Capture the row index of the first row that is visible on the viewport.
-        const viewPortFirstRowIndex = this.getAdjustedViewPortIndex();
         const rows = this.groupedRows ?? this.rows;
         if (expanded) {
             for (const row of rows) {
@@ -3096,11 +2560,6 @@ class DataTableBodyComponent {
             // Refresh the full row heights cache since every row was affected.
             this.recalcLayout();
         }
-        // Emit all rows that have been expanded.
-        this.detailToggle.emit({
-            rows: rows,
-            currentIndex: viewPortFirstRowIndex
-        });
     }
     /**
      * Recalculates the table
@@ -3130,12 +2589,6 @@ class DataTableBodyComponent {
             return id === rowId;
         });
     }
-    /**
-     * Gets the row index given a row
-     */
-    getRowIndex(row) {
-        return this.rowIndexes.get(row) || 0;
-    }
     onTreeAction(row) {
         this.treeAction.emit({ row });
     }
@@ -3207,14 +2660,155 @@ class DataTableBodyComponent {
         const colsByPin = columnsByPin(this._columns);
         this.columnGroupWidths = columnGroupWidths(colsByPin, this._columns);
     }
+    selectRow(event, index, row) {
+        if (!this.selectEnabled) {
+            return;
+        }
+        const chkbox = this.selectionType === SelectionType.checkbox;
+        const multi = this.selectionType === SelectionType.multi;
+        const multiClick = this.selectionType === SelectionType.multiClick;
+        let selected = [];
+        // TODO: this code needs cleanup. Casting it to KeyboardEvent is not correct as it could also be other types.
+        if (multi || chkbox || multiClick) {
+            if (event.shiftKey) {
+                selected = selectRowsBetween([], this.rows, index, this.prevIndex);
+            }
+            else if (event.key === 'a' &&
+                (event.ctrlKey || event.metaKey)) {
+                // select all rows except dummy rows which are added for ghostloader in case of virtual scroll
+                selected = this.rows.filter(rowItem => !!rowItem);
+            }
+            else if (event.ctrlKey ||
+                event.metaKey ||
+                multiClick ||
+                chkbox) {
+                selected = selectRows([...this.selected], row, this.getRowSelectedIdx.bind(this));
+            }
+            else {
+                selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
+            }
+        }
+        else {
+            selected = selectRows([], row, this.getRowSelectedIdx.bind(this));
+        }
+        if (typeof this.selectCheck === 'function') {
+            selected = selected.filter(this.selectCheck.bind(this));
+        }
+        if (typeof this.disableRowCheck === 'function') {
+            selected = selected.filter(rowData => !this.disableRowCheck(rowData));
+        }
+        this.selected.splice(0, this.selected.length);
+        this.selected.push(...selected);
+        this.prevIndex = index;
+        this.select.emit({
+            selected
+        });
+    }
+    onActivate(model, index) {
+        const { type, event, row } = model;
+        const chkbox = this.selectionType === SelectionType.checkbox;
+        const select = (!chkbox && (type === 'click' || type === 'dblclick')) || (chkbox && type === 'checkbox');
+        if (select) {
+            this.selectRow(event, index, row);
+        }
+        else if (type === 'keydown') {
+            if (event.key === Keys.return) {
+                this.selectRow(event, index, row);
+            }
+            else if (event.key === 'a' &&
+                (event.ctrlKey || event.metaKey)) {
+                this.selectRow(event, 0, row); // The row property is ignored in this case. So we can pass anything.
+            }
+            else {
+                this.onKeyboardFocus(model);
+            }
+        }
+        this.activate.emit(model);
+    }
+    onKeyboardFocus(model) {
+        const { key } = model.event;
+        const shouldFocus = key === Keys.up || key === Keys.down || key === Keys.right || key === Keys.left;
+        if (shouldFocus) {
+            const isCellSelection = this.selectionType === SelectionType.cell;
+            if (typeof this.disableRowCheck === 'function') {
+                const isRowDisabled = this.disableRowCheck(model.row);
+                if (isRowDisabled) {
+                    return;
+                }
+            }
+            if (!model.cellElement || !isCellSelection) {
+                this.focusRow(model.rowElement, key);
+            }
+            else if (isCellSelection && model.cellIndex !== undefined) {
+                this.focusCell(model.cellElement, model.rowElement, key, model.cellIndex);
+            }
+        }
+    }
+    focusRow(rowElement, key) {
+        const nextRowElement = this.getPrevNextRow(rowElement, key);
+        if (nextRowElement) {
+            nextRowElement.focus();
+        }
+    }
+    getPrevNextRow(rowElement, key) {
+        const parentElement = rowElement.parentElement;
+        if (parentElement) {
+            let focusElement = null;
+            if (key === Keys.up) {
+                focusElement = parentElement.previousElementSibling;
+            }
+            else if (key === Keys.down) {
+                focusElement = parentElement.nextElementSibling;
+            }
+            if (focusElement && focusElement.children.length) {
+                return focusElement.children[0];
+            }
+        }
+    }
+    focusCell(cellElement, rowElement, key, cellIndex) {
+        let nextCellElement = null;
+        if (key === Keys.left) {
+            nextCellElement = cellElement.previousElementSibling;
+        }
+        else if (key === Keys.right) {
+            nextCellElement = cellElement.nextElementSibling;
+        }
+        else if (key === Keys.up || key === Keys.down) {
+            const nextRowElement = this.getPrevNextRow(rowElement, key);
+            if (nextRowElement) {
+                const children = nextRowElement.getElementsByClassName('datatable-body-cell');
+                if (children.length) {
+                    nextCellElement = children[cellIndex];
+                }
+            }
+        }
+        if (nextCellElement &&
+            'focus' in nextCellElement &&
+            typeof nextCellElement.focus === 'function') {
+            nextCellElement.focus();
+        }
+    }
+    getRowSelected(row) {
+        return this.getRowSelectedIdx(row, this.selected) > -1;
+    }
+    getRowSelectedIdx(row, selected) {
+        if (!selected || !selected.length) {
+            return -1;
+        }
+        const rowId = this.rowIdentity(row);
+        return selected.findIndex(r => {
+            const id = this.rowIdentity(r);
+            return id === rowId;
+        });
+    }
     isGroup(row) {
         return !!this.groupedRows;
     }
     isRow(row) {
         return !this.groupedRows;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableBodyComponent, isStandalone: true, selector: "datatable-body", inputs: { rowDefTemplate: "rowDefTemplate", scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", loadingIndicator: "loadingIndicator", ghostLoadingIndicator: "ghostLoadingIndicator", externalPaging: "externalPaging", rowHeight: "rowHeight", offsetX: "offsetX", selectionType: "selectionType", selected: "selected", rowIdentity: "rowIdentity", rowDetail: "rowDetail", groupHeader: "groupHeader", selectCheck: "selectCheck", displayCheck: "displayCheck", trackByProp: "trackByProp", rowClass: "rowClass", groupedRows: "groupedRows", groupExpansionDefault: "groupExpansionDefault", innerWidth: "innerWidth", groupRowsBy: "groupRowsBy", virtualization: "virtualization", summaryRow: "summaryRow", summaryPosition: "summaryPosition", summaryHeight: "summaryHeight", rowDraggable: "rowDraggable", rowDragEvents: "rowDragEvents", disableRowCheck: "disableRowCheck", pageSize: "pageSize", rows: "rows", columns: "columns", offset: "offset", rowCount: "rowCount", bodyHeight: "bodyHeight", verticalScrollVisible: "verticalScrollVisible" }, outputs: { scroll: "scroll", page: "page", activate: "activate", select: "select", detailToggle: "detailToggle", rowContextmenu: "rowContextmenu", treeAction: "treeAction" }, host: { properties: { "style.width": "this.bodyWidth", "style.height": "this.bodyHeight" }, classAttribute: "datatable-body" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ScrollerComponent, descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableBodyComponent, isStandalone: true, selector: "datatable-body", inputs: { rowDefTemplate: "rowDefTemplate", scrollbarV: "scrollbarV", scrollbarH: "scrollbarH", loadingIndicator: "loadingIndicator", ghostLoadingIndicator: "ghostLoadingIndicator", externalPaging: "externalPaging", rowHeight: "rowHeight", offsetX: "offsetX", selectionType: "selectionType", selected: "selected", rowIdentity: "rowIdentity", rowDetail: "rowDetail", groupHeader: "groupHeader", selectCheck: "selectCheck", displayCheck: "displayCheck", trackByProp: "trackByProp", rowClass: "rowClass", groupedRows: "groupedRows", groupExpansionDefault: "groupExpansionDefault", innerWidth: "innerWidth", groupRowsBy: "groupRowsBy", virtualization: "virtualization", summaryRow: "summaryRow", summaryPosition: "summaryPosition", summaryHeight: "summaryHeight", rowDraggable: "rowDraggable", rowDragEvents: "rowDragEvents", disableRowCheck: "disableRowCheck", pageSize: "pageSize", rows: "rows", columns: "columns", offset: "offset", rowCount: "rowCount", bodyHeight: "bodyHeight", verticalScrollVisible: "verticalScrollVisible" }, outputs: { scroll: "scroll", page: "page", activate: "activate", select: "select", rowContextmenu: "rowContextmenu", treeAction: "treeAction" }, host: { properties: { "style.width": "this.bodyWidth", "style.height": "this.bodyHeight" }, classAttribute: "datatable-body" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ScrollerComponent, descendants: true }], ngImport: i0, template: `
     @if (loadingIndicator) {
       <div class="custom-loading-indicator-wrapper">
         <div class="custom-loading-content">
@@ -3232,201 +2826,164 @@ class DataTableBodyComponent {
       >
       </ghost-loader>
     }
-    <datatable-selection
-      #selector
-      [selected]="selected"
-      [rows]="rows"
-      [selectCheck]="selectCheck"
-      [disableCheck]="disableRowCheck"
-      [selectEnabled]="selectEnabled"
-      [selectionType]="selectionType"
-      [rowIdentity]="rowIdentity"
-      (select)="select.emit($event)"
-      (activate)="activate.emit($event)"
-    >
-      @if (rows?.length) {
-        <datatable-scroller
-          [scrollbarV]="scrollbarV"
-          [scrollbarH]="scrollbarH"
-          [scrollHeight]="scrollHeight()"
-          [scrollWidth]="columnGroupWidths?.total"
-          (scroll)="onBodyScroll($event)"
+    @if (rows.length) {
+      <datatable-scroller
+        [scrollbarV]="scrollbarV"
+        [scrollbarH]="scrollbarH"
+        [scrollHeight]="scrollHeight()"
+        [scrollWidth]="columnGroupWidths?.total"
+        (scroll)="onBodyScroll($event)"
+      >
+        @if (summaryRow && summaryPosition === 'top') {
+          <datatable-summary-row
+            [rowHeight]="summaryHeight"
+            [innerWidth]="innerWidth"
+            [rows]="rows"
+            [columns]="columns"
+          >
+          </datatable-summary-row>
+        }
+        <ng-template
+          ngx-datatable-body-row
+          #bodyRow
+          let-row="row"
+          let-index="index"
+          let-indexInGroup="indexInGroup"
+          let-groupedRows="groupedRows"
+          let-disabled="disabled"
         >
-          @if (summaryRow && summaryPosition === 'top') {
-            <datatable-summary-row
-              [rowHeight]="summaryHeight"
-              [offsetX]="offsetX"
-              [innerWidth]="innerWidth"
-              [rows]="rows"
-              [columns]="columns"
-            >
-            </datatable-summary-row>
-          }
-          @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
-            <datatable-row-wrapper
-              #rowWrapper
-              [attr.hidden]="
-                ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV) ? true : null
-              "
-              [groupedRows]="groupedRows"
-              [innerWidth]="innerWidth"
-              [ngStyle]="rowsStyles()[i]"
-              [rowDetail]="rowDetail"
-              [groupHeader]="groupHeader"
-              [offsetX]="offsetX"
-              [detailRowHeight]="getDetailRowHeight(group && group[i], i)"
-              [groupHeaderRowHeight]="getGroupHeaderRowHeight(group && group[i], i)"
-              [row]="group"
-              [disableCheck]="disableRowCheck"
-              [expanded]="getRowExpanded(group)"
-              [rowIndex]="getRowIndex(group && group[i])"
-              [selected]="selected"
-              (rowContextmenu)="rowContextmenu.emit($event)"
-            >
-              @if (rowDefTemplate) {
-                <ng-container
-                  *rowDefInternal="{
-                    template: rowDefTemplate,
-                    rowTemplate: bodyRow,
-                    row: group,
-                    index: i
-                  }"
-                />
-              } @else {
-                @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
-                }
-              }
+          <datatable-body-row
+            role="row"
+            tabindex="-1"
+            #rowElement
+            [disabled]="disabled"
+            [isSelected]="getRowSelected(row)"
+            [innerWidth]="innerWidth"
+            [columns]="columns"
+            [rowHeight]="getRowHeight(row)"
+            [row]="row"
+            [group]="groupedRows"
+            [rowIndex]="{ index: index, indexInGroup: indexInGroup }"
+            [expanded]="getRowExpanded(row)"
+            [rowClass]="rowClass"
+            [displayCheck]="displayCheck"
+            [treeStatus]="row?.treeStatus"
+            [draggable]="rowDraggable"
+            [verticalScrollVisible]="verticalScrollVisible"
+            (treeAction)="onTreeAction(row)"
+            (activate)="onActivate($event, index)"
+            (drop)="drop($event, row, rowElement)"
+            (dragover)="dragOver($event, row)"
+            (dragenter)="dragEnter($event, row, rowElement)"
+            (dragleave)="dragLeave($event, row, rowElement)"
+            (dragstart)="drag($event, row, rowElement)"
+            (dragend)="dragEnd($event, row)"
+          >
+          </datatable-body-row>
+        </ng-template>
 
-              <ng-template #bodyRow>
-                @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
+        <div [style.transform]="renderOffset()">
+          @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
+            @if (!group && ghostLoadingIndicator) {
+              <ghost-loader cellMode [columns]="columns" [pageSize]="1" [rowHeight]="rowHeight" />
+            } @else if (group) {
+              @let disabled = isRow(group) && disableRowCheck && disableRowCheck(group);
+              <!-- $any(group) is needed as the typing is broken and the feature as well. See #147. -->
+              <!-- FIXME: This has to be revisited and fixed. -->
+              <datatable-row-wrapper
+                [attr.hidden]="
+                  ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV)
+                    ? true
+                    : null
+                "
+                [groupedRows]="groupedRows"
+                [innerWidth]="innerWidth"
+                [style.width]="groupedRows ? columnGroupWidths.total : undefined"
+                [rowDetail]="rowDetail"
+                [groupHeader]="groupHeader"
+                [offsetX]="offsetX"
+                [detailRowHeight]="getDetailRowHeight(group && $any(group)[i], i)"
+                [groupHeaderRowHeight]="getGroupHeaderRowHeight(group && $any(group)[i], i)"
+                [row]="group"
+                [disabled]="disabled"
+                [expanded]="getRowExpanded(group)"
+                [rowIndex]="indexes().first + i"
+                [selected]="selected"
+                (rowContextmenu)="rowContextmenu.emit($event)"
+              >
+                @if (rowDefTemplate) {
+                  <ng-container
+                    *rowDefInternal="
+                      {
+                        template: rowDefTemplate,
+                        rowTemplate: bodyRow,
+                        row: group,
+                        index: i
+                      };
+                      disabled: disabled
+                    "
+                  />
+                } @else {
+                  @if (isRow(group)) {
+                    <ng-container
+                      [ngTemplateOutlet]="bodyRow"
+                      [ngTemplateOutletContext]="{
+                        row: group,
+                        index: indexes().first + i,
+                        disabled
+                      }"
+                    ></ng-container>
+                  }
                 }
-              </ng-template>
 
-              @if (isGroup(group)) {
-                <!-- The row typecast is due to angular compiler acting weird. It is obvious that it is of type TRow, but the compiler does not understand. -->
-                @for (row of group.value; track rowTrackingFn(i, row); let i = $index) {
-                  <datatable-body-row
-                    role="row"
-                    [disable$]="rowWrapper.disable$"
-                    tabindex="-1"
-                    #rowElement
-                    [isSelected]="selector.getRowSelected(row)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(row)"
-                    [row]="row"
-                    [group]="group.value"
-                    [rowIndex]="getRowIndex(row)"
-                    [expanded]="getRowExpanded(row)"
-                    [rowClass]="rowClass"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (activate)="selector.onActivate($event, i)"
-                    (drop)="drop($event, row, rowElement)"
-                    (dragover)="dragOver($event, row)"
-                    (dragenter)="dragEnter($event, row, rowElement)"
-                    (dragleave)="dragLeave($event, row, rowElement)"
-                    (dragstart)="drag($event, row, rowElement)"
-                    (dragend)="dragEnd($event, row)"
-                  >
-                  </datatable-body-row>
+                @if (isGroup(group)) {
+                  <!-- The row typecast is due to angular compiler acting weird. It is obvious that it is of type TRow, but the compiler does not understand. -->
+                  @for (row of group.value; track rowTrackingFn($index, row)) {
+                    @let disabled = disableRowCheck && disableRowCheck(row);
+                    <ng-container
+                      [ngTemplateOutlet]="bodyRow"
+                      [ngTemplateOutletContext]="{
+                        row,
+                        groupedRows: group?.value,
+                        index: indexes().first + i,
+                        indexInGroup: $index,
+                        disabled
+                      }"
+                    ></ng-container>
+                  }
                 }
-              }
-            </datatable-row-wrapper>
-          }
-          @if (summaryRow && summaryPosition === 'bottom') {
-            <datatable-summary-row
-              role="row"
-              [ngStyle]="bottomSummaryRowsStyles()"
-              [rowHeight]="summaryHeight"
-              [offsetX]="offsetX"
-              [innerWidth]="innerWidth"
-              [rows]="rows"
-              [columns]="columns"
-            >
-            </datatable-summary-row>
+              </datatable-row-wrapper>
+            }
           }
-        </datatable-scroller>
-      }
-      @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) {
-        <datatable-scroller
-          [scrollbarV]="scrollbarV"
-          [scrollbarH]="scrollbarH"
-          [scrollHeight]="scrollHeight()"
-          [style.width]="scrollbarH ? columnGroupWidths?.total + 'px' : '100%'"
-          (scroll)="onBodyScroll($event)"
+        </div>
+      </datatable-scroller>
+      @if (summaryRow && summaryPosition === 'bottom') {
+        <datatable-summary-row
+          role="row"
+          [rowHeight]="summaryHeight"
+          [innerWidth]="innerWidth"
+          [rows]="rows"
+          [columns]="columns"
         >
-          <ng-content select="[empty-content]"></ng-content
-        ></datatable-scroller>
+        </datatable-summary-row>
       }
-    </datatable-selection>
-  `, isInline: true, dependencies: [{ kind: "component", type: DataTableGhostLoaderComponent, selector: "ghost-loader", inputs: ["columns", "pageSize", "rowHeight", "ghostBodyHeight"] }, { kind: "component", type: DataTableSelectionComponent, selector: "datatable-selection", inputs: ["rows", "selected", "selectEnabled", "selectionType", "rowIdentity", "selectCheck", "disableCheck"], outputs: ["activate", "select"] }, { kind: "component", type: ScrollerComponent, selector: "datatable-scroller", inputs: ["scrollbarV", "scrollbarH", "scrollHeight", "scrollWidth"], outputs: ["scroll"] }, { kind: "component", type: DataTableSummaryRowComponent, selector: "datatable-summary-row", inputs: ["rows", "columns", "rowHeight", "offsetX", "innerWidth"] }, { kind: "component", type: DataTableRowWrapperComponent, selector: "datatable-row-wrapper", inputs: ["innerWidth", "rowDetail", "groupHeader", "offsetX", "detailRowHeight", "groupHeaderRowHeight", "row", "groupedRows", "disableCheck", "selected", "rowIndex", "expanded"], outputs: ["rowContextmenu"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DatatableRowDefInternalDirective, selector: "[rowDefInternal]", inputs: ["rowDefInternal"] }, { kind: "component", type: DataTableBodyRowComponent, selector: "datatable-body-row", inputs: ["columns", "innerWidth", "expanded", "rowClass", "row", "group", "isSelected", "rowIndex", "displayCheck", "treeStatus", "ghostLoadingIndicator", "verticalScrollVisible", "disable$", "offsetX", "rowHeight"], outputs: ["activate", "treeAction"] }, { kind: "directive", type: DraggableDirective, selector: "[draggable]", inputs: ["dragEventTarget", "dragModel", "dragX", "dragY"], outputs: ["dragStart", "dragging", "dragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }
+    @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) {
+      <datatable-scroller
+        [scrollbarV]="scrollbarV"
+        [scrollbarH]="scrollbarH"
+        [scrollHeight]="scrollHeight()"
+        [style.width]="scrollbarH ? columnGroupWidths?.total + 'px' : '100%'"
+        (scroll)="onBodyScroll($event)"
+      >
+        <ng-content select="[empty-content]"></ng-content>
+      </datatable-scroller>
+    }
+  `, isInline: true, styles: [":host{position:relative;z-index:10;display:block;overflow:hidden}:host-context(ngx-datatable.scroll-horz) :host{overflow-x:auto;-webkit-overflow-scrolling:touch}datatable-scroller{display:block}:host-context(ngx-datatable.fixed-row) datatable-scroller{white-space:nowrap}:host-context(ngx-datatable.scroll-vertical) :host{overflow-y:auto}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: DataTableGhostLoaderComponent, selector: "ghost-loader", inputs: ["columns", "pageSize", "rowHeight", "ghostBodyHeight", "cellMode"] }, { kind: "component", type: ScrollerComponent, selector: "datatable-scroller", inputs: ["scrollbarV", "scrollbarH", "scrollHeight", "scrollWidth"], outputs: ["scroll"] }, { kind: "component", type: DataTableSummaryRowComponent, selector: "datatable-summary-row", inputs: ["rows", "columns", "rowHeight", "innerWidth"] }, { kind: "component", type: DataTableRowWrapperComponent, selector: "datatable-row-wrapper", inputs: ["innerWidth", "rowDetail", "groupHeader", "offsetX", "detailRowHeight", "groupHeaderRowHeight", "row", "groupedRows", "selected", "disabled", "rowIndex", "expanded"], outputs: ["rowContextmenu"] }, { kind: "directive", type: DatatableRowDefInternalDirective, selector: "[rowDefInternal]", inputs: ["rowDefInternal", "rowDefInternalDisabled"] }, { kind: "component", type: DataTableBodyRowComponent, selector: "datatable-body-row", inputs: ["columns", "innerWidth", "expanded", "rowClass", "row", "group", "isSelected", "rowIndex", "displayCheck", "treeStatus", "verticalScrollVisible", "disabled", "rowHeight"], outputs: ["activate", "treeAction"] }, { kind: "directive", type: DraggableDirective, selector: "[draggable]", inputs: ["dragEventTarget", "dragModel", "dragX", "dragY"], outputs: ["dragStart", "dragging", "dragEnd"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DatatableBodyRowDirective, selector: "[ngx-datatable-body-row]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableBodyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-body',
-                    template: `
+            args: [{ selector: 'datatable-body', template: `
     @if (loadingIndicator) {
       <div class="custom-loading-indicator-wrapper">
         <div class="custom-loading-content">
@@ -3444,211 +3001,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
       >
       </ghost-loader>
     }
-    <datatable-selection
-      #selector
-      [selected]="selected"
-      [rows]="rows"
-      [selectCheck]="selectCheck"
-      [disableCheck]="disableRowCheck"
-      [selectEnabled]="selectEnabled"
-      [selectionType]="selectionType"
-      [rowIdentity]="rowIdentity"
-      (select)="select.emit($event)"
-      (activate)="activate.emit($event)"
-    >
-      @if (rows?.length) {
-        <datatable-scroller
-          [scrollbarV]="scrollbarV"
-          [scrollbarH]="scrollbarH"
-          [scrollHeight]="scrollHeight()"
-          [scrollWidth]="columnGroupWidths?.total"
-          (scroll)="onBodyScroll($event)"
+    @if (rows.length) {
+      <datatable-scroller
+        [scrollbarV]="scrollbarV"
+        [scrollbarH]="scrollbarH"
+        [scrollHeight]="scrollHeight()"
+        [scrollWidth]="columnGroupWidths?.total"
+        (scroll)="onBodyScroll($event)"
+      >
+        @if (summaryRow && summaryPosition === 'top') {
+          <datatable-summary-row
+            [rowHeight]="summaryHeight"
+            [innerWidth]="innerWidth"
+            [rows]="rows"
+            [columns]="columns"
+          >
+          </datatable-summary-row>
+        }
+        <ng-template
+          ngx-datatable-body-row
+          #bodyRow
+          let-row="row"
+          let-index="index"
+          let-indexInGroup="indexInGroup"
+          let-groupedRows="groupedRows"
+          let-disabled="disabled"
         >
-          @if (summaryRow && summaryPosition === 'top') {
-            <datatable-summary-row
-              [rowHeight]="summaryHeight"
-              [offsetX]="offsetX"
-              [innerWidth]="innerWidth"
-              [rows]="rows"
-              [columns]="columns"
-            >
-            </datatable-summary-row>
-          }
-          @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
-            <datatable-row-wrapper
-              #rowWrapper
-              [attr.hidden]="
-                ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV) ? true : null
-              "
-              [groupedRows]="groupedRows"
-              [innerWidth]="innerWidth"
-              [ngStyle]="rowsStyles()[i]"
-              [rowDetail]="rowDetail"
-              [groupHeader]="groupHeader"
-              [offsetX]="offsetX"
-              [detailRowHeight]="getDetailRowHeight(group && group[i], i)"
-              [groupHeaderRowHeight]="getGroupHeaderRowHeight(group && group[i], i)"
-              [row]="group"
-              [disableCheck]="disableRowCheck"
-              [expanded]="getRowExpanded(group)"
-              [rowIndex]="getRowIndex(group && group[i])"
-              [selected]="selected"
-              (rowContextmenu)="rowContextmenu.emit($event)"
-            >
-              @if (rowDefTemplate) {
-                <ng-container
-                  *rowDefInternal="{
-                    template: rowDefTemplate,
-                    rowTemplate: bodyRow,
-                    row: group,
-                    index: i
-                  }"
-                />
-              } @else {
-                @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
-                }
-              }
+          <datatable-body-row
+            role="row"
+            tabindex="-1"
+            #rowElement
+            [disabled]="disabled"
+            [isSelected]="getRowSelected(row)"
+            [innerWidth]="innerWidth"
+            [columns]="columns"
+            [rowHeight]="getRowHeight(row)"
+            [row]="row"
+            [group]="groupedRows"
+            [rowIndex]="{ index: index, indexInGroup: indexInGroup }"
+            [expanded]="getRowExpanded(row)"
+            [rowClass]="rowClass"
+            [displayCheck]="displayCheck"
+            [treeStatus]="row?.treeStatus"
+            [draggable]="rowDraggable"
+            [verticalScrollVisible]="verticalScrollVisible"
+            (treeAction)="onTreeAction(row)"
+            (activate)="onActivate($event, index)"
+            (drop)="drop($event, row, rowElement)"
+            (dragover)="dragOver($event, row)"
+            (dragenter)="dragEnter($event, row, rowElement)"
+            (dragleave)="dragLeave($event, row, rowElement)"
+            (dragstart)="drag($event, row, rowElement)"
+            (dragend)="dragEnd($event, row)"
+          >
+          </datatable-body-row>
+        </ng-template>
 
-              <ng-template #bodyRow>
-                @if (isRow(group)) {
-                  <datatable-body-row
-                    role="row"
-                    tabindex="-1"
-                    #rowElement
-                    [disable$]="rowWrapper.disable$"
-                    [isSelected]="selector.getRowSelected(group)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(group)"
-                    [row]="group"
-                    [rowIndex]="getRowIndex(group)"
-                    [expanded]="getRowExpanded(group)"
-                    [rowClass]="rowClass"
-                    [displayCheck]="displayCheck"
-                    [treeStatus]="group?.treeStatus"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (treeAction)="onTreeAction(group)"
-                    (activate)="selector.onActivate($event, indexes().first + i)"
-                    (drop)="drop($event, group, rowElement)"
-                    (dragover)="dragOver($event, group)"
-                    (dragenter)="dragEnter($event, group, rowElement)"
-                    (dragleave)="dragLeave($event, group, rowElement)"
-                    (dragstart)="drag($event, group, rowElement)"
-                    (dragend)="dragEnd($event, group)"
-                  >
-                  </datatable-body-row>
+        <div [style.transform]="renderOffset()">
+          @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
+            @if (!group && ghostLoadingIndicator) {
+              <ghost-loader cellMode [columns]="columns" [pageSize]="1" [rowHeight]="rowHeight" />
+            } @else if (group) {
+              @let disabled = isRow(group) && disableRowCheck && disableRowCheck(group);
+              <!-- $any(group) is needed as the typing is broken and the feature as well. See #147. -->
+              <!-- FIXME: This has to be revisited and fixed. -->
+              <datatable-row-wrapper
+                [attr.hidden]="
+                  ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV)
+                    ? true
+                    : null
+                "
+                [groupedRows]="groupedRows"
+                [innerWidth]="innerWidth"
+                [style.width]="groupedRows ? columnGroupWidths.total : undefined"
+                [rowDetail]="rowDetail"
+                [groupHeader]="groupHeader"
+                [offsetX]="offsetX"
+                [detailRowHeight]="getDetailRowHeight(group && $any(group)[i], i)"
+                [groupHeaderRowHeight]="getGroupHeaderRowHeight(group && $any(group)[i], i)"
+                [row]="group"
+                [disabled]="disabled"
+                [expanded]="getRowExpanded(group)"
+                [rowIndex]="indexes().first + i"
+                [selected]="selected"
+                (rowContextmenu)="rowContextmenu.emit($event)"
+              >
+                @if (rowDefTemplate) {
+                  <ng-container
+                    *rowDefInternal="
+                      {
+                        template: rowDefTemplate,
+                        rowTemplate: bodyRow,
+                        row: group,
+                        index: i
+                      };
+                      disabled: disabled
+                    "
+                  />
+                } @else {
+                  @if (isRow(group)) {
+                    <ng-container
+                      [ngTemplateOutlet]="bodyRow"
+                      [ngTemplateOutletContext]="{
+                        row: group,
+                        index: indexes().first + i,
+                        disabled
+                      }"
+                    ></ng-container>
+                  }
                 }
-              </ng-template>
 
-              @if (isGroup(group)) {
-                <!-- The row typecast is due to angular compiler acting weird. It is obvious that it is of type TRow, but the compiler does not understand. -->
-                @for (row of group.value; track rowTrackingFn(i, row); let i = $index) {
-                  <datatable-body-row
-                    role="row"
-                    [disable$]="rowWrapper.disable$"
-                    tabindex="-1"
-                    #rowElement
-                    [isSelected]="selector.getRowSelected(row)"
-                    [innerWidth]="innerWidth"
-                    [offsetX]="offsetX"
-                    [columns]="columns"
-                    [rowHeight]="getRowHeight(row)"
-                    [row]="row"
-                    [group]="group.value"
-                    [rowIndex]="getRowIndex(row)"
-                    [expanded]="getRowExpanded(row)"
-                    [rowClass]="rowClass"
-                    [ghostLoadingIndicator]="ghostLoadingIndicator"
-                    [draggable]="rowDraggable"
-                    [verticalScrollVisible]="verticalScrollVisible"
-                    (activate)="selector.onActivate($event, i)"
-                    (drop)="drop($event, row, rowElement)"
-                    (dragover)="dragOver($event, row)"
-                    (dragenter)="dragEnter($event, row, rowElement)"
-                    (dragleave)="dragLeave($event, row, rowElement)"
-                    (dragstart)="drag($event, row, rowElement)"
-                    (dragend)="dragEnd($event, row)"
-                  >
-                  </datatable-body-row>
+                @if (isGroup(group)) {
+                  <!-- The row typecast is due to angular compiler acting weird. It is obvious that it is of type TRow, but the compiler does not understand. -->
+                  @for (row of group.value; track rowTrackingFn($index, row)) {
+                    @let disabled = disableRowCheck && disableRowCheck(row);
+                    <ng-container
+                      [ngTemplateOutlet]="bodyRow"
+                      [ngTemplateOutletContext]="{
+                        row,
+                        groupedRows: group?.value,
+                        index: indexes().first + i,
+                        indexInGroup: $index,
+                        disabled
+                      }"
+                    ></ng-container>
+                  }
                 }
-              }
-            </datatable-row-wrapper>
-          }
-          @if (summaryRow && summaryPosition === 'bottom') {
-            <datatable-summary-row
-              role="row"
-              [ngStyle]="bottomSummaryRowsStyles()"
-              [rowHeight]="summaryHeight"
-              [offsetX]="offsetX"
-              [innerWidth]="innerWidth"
-              [rows]="rows"
-              [columns]="columns"
-            >
-            </datatable-summary-row>
+              </datatable-row-wrapper>
+            }
           }
-        </datatable-scroller>
-      }
-      @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) {
-        <datatable-scroller
-          [scrollbarV]="scrollbarV"
-          [scrollbarH]="scrollbarH"
-          [scrollHeight]="scrollHeight()"
-          [style.width]="scrollbarH ? columnGroupWidths?.total + 'px' : '100%'"
-          (scroll)="onBodyScroll($event)"
+        </div>
+      </datatable-scroller>
+      @if (summaryRow && summaryPosition === 'bottom') {
+        <datatable-summary-row
+          role="row"
+          [rowHeight]="summaryHeight"
+          [innerWidth]="innerWidth"
+          [rows]="rows"
+          [columns]="columns"
         >
-          <ng-content select="[empty-content]"></ng-content
-        ></datatable-scroller>
+        </datatable-summary-row>
       }
-    </datatable-selection>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
+    }
+    @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) {
+      <datatable-scroller
+        [scrollbarV]="scrollbarV"
+        [scrollbarH]="scrollbarH"
+        [scrollHeight]="scrollHeight()"
+        [style.width]="scrollbarH ? columnGroupWidths?.total + 'px' : '100%'"
+        (scroll)="onBodyScroll($event)"
+      >
+        <ng-content select="[empty-content]"></ng-content>
+      </datatable-scroller>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'datatable-body'
-                    },
-                    imports: [
+                    }, imports: [
                         DataTableGhostLoaderComponent,
-                        DataTableSelectionComponent,
                         ScrollerComponent,
                         DataTableSummaryRowComponent,
                         DataTableRowWrapperComponent,
-                        NgStyle,
                         DatatableRowDefInternalDirective,
                         DataTableBodyRowComponent,
-                        DraggableDirective
-                    ]
-                }]
+                        DraggableDirective,
+                        NgTemplateOutlet,
+                        DatatableBodyRowDirective
+                    ], styles: [":host{position:relative;z-index:10;display:block;overflow:hidden}:host-context(ngx-datatable.scroll-horz) :host{overflow-x:auto;-webkit-overflow-scrolling:touch}datatable-scroller{display:block}:host-context(ngx-datatable.fixed-row) datatable-scroller{white-space:nowrap}:host-context(ngx-datatable.scroll-vertical) :host{overflow-y:auto}[hidden]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rowDefTemplate: [{
                 type: Input
             }], scrollbarV: [{
@@ -3733,8 +3251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Output
             }], select: [{
                 type: Output
-            }], detailToggle: [{
-                type: Output
             }], rowContextmenu: [{
                 type: Output
             }], treeAction: [{
@@ -3764,13 +3280,13 @@ class ScrollbarHelper {
         inner.style.width = '100%';
         outer.appendChild(inner);
         const widthWithScroll = inner.offsetWidth;
-        outer.parentNode.removeChild(outer);
+        this.document.body.removeChild(outer);
         return widthNoScroll - widthWithScroll;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ScrollbarHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ScrollbarHelper, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScrollbarHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScrollbarHelper, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ScrollbarHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ScrollbarHelper, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3780,20 +3296,14 @@ class LongPressDirective {
         this.pressEnabled = true;
         this.duration = 500;
         this.longPressStart = new EventEmitter();
-        this.longPressing = new EventEmitter();
         this.longPressEnd = new EventEmitter();
-        this.mouseX = 0;
-        this.mouseY = 0;
-    }
-    get press() {
-        return this.pressing;
-    }
-    get isLongPress() {
-        return this.isLongPressing;
+        this.pressing = signal(false);
+        this.isLongPressing = signal(false);
     }
     onMouseDown(event) {
+        const isMouse = event instanceof MouseEvent;
         // don't do right/middle clicks
-        if (event.which !== 1 || !this.pressEnabled) {
+        if (!this.pressEnabled || (isMouse && event.button !== 0)) {
             return;
         }
         // don't start drag if its on resize handle
@@ -3801,57 +3311,27 @@ class LongPressDirective {
         if (target.classList.contains('resize-handle')) {
             return;
         }
-        this.mouseX = event.clientX;
-        this.mouseY = event.clientY;
-        this.pressing = true;
-        this.isLongPressing = false;
-        const mouseup = fromEvent(document, 'mouseup');
-        this.subscription = mouseup.subscribe((ev) => this.onMouseup());
+        this.pressing.set(true);
+        this.isLongPressing.set(false);
+        const mouseup = fromEvent(document, isMouse ? 'mouseup' : 'touchend');
+        this.subscription = mouseup.subscribe(() => this.endPress());
         this.timeout = setTimeout(() => {
-            this.isLongPressing = true;
+            this.isLongPressing.set(true);
             this.longPressStart.emit({
                 event,
                 model: this.pressModel
             });
-            this.subscription.add(fromEvent(document, 'mousemove')
-                .pipe(takeUntil(mouseup))
-                .subscribe((mouseEvent) => this.onMouseMove(mouseEvent)));
-            this.loop(event);
         }, this.duration);
-        this.loop(event);
-    }
-    onMouseMove(event) {
-        if (this.pressing && !this.isLongPressing) {
-            const xThres = Math.abs(event.clientX - this.mouseX) > 10;
-            const yThres = Math.abs(event.clientY - this.mouseY) > 10;
-            if (xThres || yThres) {
-                this.endPress();
-            }
-        }
-    }
-    loop(event) {
-        if (this.isLongPressing) {
-            this.timeout = setTimeout(() => {
-                this.longPressing.emit({
-                    event,
-                    model: this.pressModel
-                });
-                this.loop(event);
-            }, 50);
-        }
     }
     endPress() {
         clearTimeout(this.timeout);
-        this.isLongPressing = false;
-        this.pressing = false;
+        this.isLongPressing.set(false);
+        this.pressing.set(false);
         this._destroySubscription();
         this.longPressEnd.emit({
             model: this.pressModel
         });
     }
-    onMouseup() {
-        this.endPress();
-    }
     ngOnDestroy() {
         clearTimeout(this.timeout);
         this._destroySubscription();
@@ -3862,14 +3342,19 @@ class LongPressDirective {
             this.subscription = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: LongPressDirective, isStandalone: true, selector: "[long-press]", inputs: { pressEnabled: ["pressEnabled", "pressEnabled", booleanAttribute], pressModel: "pressModel", duration: ["duration", "duration", numberAttribute] }, outputs: { longPressStart: "longPressStart", longPressing: "longPressing", longPressEnd: "longPressEnd" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "class.press": "this.press", "class.longpress": "this.isLongPress" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.5", type: LongPressDirective, isStandalone: true, selector: "[long-press]", inputs: { pressEnabled: ["pressEnabled", "pressEnabled", booleanAttribute], pressModel: "pressModel", duration: ["duration", "duration", numberAttribute] }, outputs: { longPressStart: "longPressStart", longPressEnd: "longPressEnd" }, host: { listeners: { "touchstart": "onMouseDown($event)", "mousedown": "onMouseDown($event)" }, properties: { "class.press": "pressing()", "class.longpress": "isLongPressing()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: LongPressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LongPressDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[long-press]',
-                    standalone: true
+                    host: {
+                        '(touchstart)': 'onMouseDown($event)',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '[class.press]': 'pressing()',
+                        '[class.longpress]': 'isLongPressing()'
+                    }
                 }]
         }], propDecorators: { pressEnabled: [{
                 type: Input,
@@ -3881,108 +3366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 args: [{ transform: numberAttribute }]
             }], longPressStart: [{
                 type: Output
-            }], longPressing: [{
-                type: Output
             }], longPressEnd: [{
                 type: Output
-            }], press: [{
-                type: HostBinding,
-                args: ['class.press']
-            }], isLongPress: [{
-                type: HostBinding,
-                args: ['class.longpress']
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
-
-class ResizeableDirective {
-    constructor() {
-        this.renderer = inject(Renderer2);
-        this.resizeEnabled = true;
-        this.resize = new EventEmitter();
-        this.resizing = new EventEmitter();
-        this.element = inject(ElementRef).nativeElement;
-    }
-    ngAfterViewInit() {
-        const renderer2 = this.renderer;
-        this.resizeHandle = renderer2.createElement('span');
-        if (this.resizeEnabled) {
-            renderer2.addClass(this.resizeHandle, 'resize-handle');
-        }
-        else {
-            renderer2.addClass(this.resizeHandle, 'resize-handle--not-resizable');
-        }
-        renderer2.appendChild(this.element, this.resizeHandle);
-    }
-    ngOnDestroy() {
-        this._destroySubscription();
-        if (this.renderer.destroyNode) {
-            this.renderer.destroyNode(this.resizeHandle);
-        }
-        else if (this.resizeHandle) {
-            this.renderer.removeChild(this.renderer.parentNode(this.resizeHandle), this.resizeHandle);
-        }
-    }
-    onMouseup() {
-        if (this.subscription && !this.subscription.closed) {
-            this._destroySubscription();
-            this.resize.emit(this.element.clientWidth);
-        }
-    }
-    onMousedown(event) {
-        const isHandle = event.target.classList.contains('resize-handle');
-        const initialWidth = this.element.clientWidth;
-        const mouseDownScreenX = event.screenX;
-        if (isHandle) {
-            event.stopPropagation();
-            const mouseup = fromEvent(document, 'mouseup');
-            this.subscription = mouseup.subscribe((ev) => this.onMouseup());
-            const mouseMoveSub = fromEvent(document, 'mousemove')
-                .pipe(takeUntil(mouseup))
-                .subscribe((e) => this.move(e, initialWidth, mouseDownScreenX));
-            this.subscription.add(mouseMoveSub);
-        }
-    }
-    move(event, initialWidth, mouseDownScreenX) {
-        const movementX = event.screenX - mouseDownScreenX;
-        const newWidth = initialWidth + movementX;
-        this.resizing.emit(newWidth);
-    }
-    _destroySubscription() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-            this.subscription = undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ResizeableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: ResizeableDirective, isStandalone: true, selector: "[resizeable]", inputs: { resizeEnabled: ["resizeEnabled", "resizeEnabled", booleanAttribute], minWidth: ["minWidth", "minWidth", numberAttribute], maxWidth: ["maxWidth", "maxWidth", numberAttribute] }, outputs: { resize: "resize", resizing: "resizing" }, host: { listeners: { "mousedown": "onMousedown($event)" }, properties: { "class.resizeable": "this.resizeEnabled" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ResizeableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[resizeable]',
-                    standalone: true
-                }]
-        }], propDecorators: { resizeEnabled: [{
-                type: HostBinding,
-                args: ['class.resizeable']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], minWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], maxWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], resize: [{
-                type: Output
-            }], resizing: [{
-                type: Output
-            }], onMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
             }] } });
 
 /**
@@ -4065,15 +3450,9 @@ function sortRows(rows, columns, dirs) {
     if (!dirs || !dirs.length || !columns) {
         return [...rows];
     }
-    /**
-     * record the row ordering of results from prior sort operations (if applicable)
-     * this is necessary to guarantee stable sorting behavior
-     */
-    const rowToIndexMap = new Map();
-    rows.forEach((row, index) => rowToIndexMap.set(row, index));
     const temp = [...rows];
     const cols = columns.reduce((obj, col) => {
-        if (col.comparator && typeof col.comparator === 'function') {
+        if (col.sortable) {
             obj[col.prop] = col.comparator;
         }
         return obj;
@@ -4086,10 +3465,10 @@ function sortRows(rows, columns, dirs) {
             prop,
             dir: dir.dir,
             valueGetter: getterForProp(prop),
-            compareFn: cols[prop] || orderByComparator
+            compareFn: cols[prop]
         };
     });
-    return temp.sort(function (rowA, rowB) {
+    return temp.sort((rowA, rowB) => {
         for (const cachedDir of cachedDirs) {
             // Get property and valuegetters for column to be sorted
             const { prop, valueGetter } = cachedDir;
@@ -4111,13 +3490,7 @@ function sortRows(rows, columns, dirs) {
                 return comparison;
             }
         }
-        if (!(rowToIndexMap.has(rowA) && rowToIndexMap.has(rowB))) {
-            return 0;
-        }
-        /**
-         * all else being equal, preserve original order of the rows (stable sort)
-         */
-        return rowToIndexMap.get(rowA) < rowToIndexMap.get(rowB) ? -1 : 1;
+        return 0;
     });
 }
 function sortGroupedRows(groupedRows, columns, dirs, sortOnGroupHeader) {
@@ -4218,6 +3591,9 @@ class DataTableHeaderCellComponent {
         this.sort = new EventEmitter();
         this.select = new EventEmitter();
         this.columnContextmenu = new EventEmitter(false);
+        this.resize = new EventEmitter();
+        this.resizing = new EventEmitter();
+        this.element = inject(ElementRef).nativeElement;
         // Counter to reset sort once user sort asc and desc.
         this.totalSortStatesApplied = 0;
         this.cellContext = {
@@ -4230,6 +3606,9 @@ class DataTableHeaderCellComponent {
     }
     onContextmenu($event) {
         this.columnContextmenu.emit({ event: $event, column: this.column });
+        if (this.column.draggable) {
+            $event.preventDefault();
+        }
     }
     enter() {
         this.onSort();
@@ -4241,6 +3620,9 @@ class DataTableHeaderCellComponent {
             this.totalSortStatesApplied = 1;
         }
     }
+    ngOnDestroy() {
+        this.destroySubscription();
+    }
     calcSortDir(sorts) {
         if (sorts && this.column) {
             const sort = sorts.find((s) => {
@@ -4270,24 +3652,53 @@ class DataTableHeaderCellComponent {
     }
     calcSortClass(sortDir) {
         if (!this.cellContext.column.sortable) {
-            return;
+            return undefined;
         }
         if (sortDir === SortDirection.asc) {
-            return `sort-btn sort-asc ${this.sortAscendingIcon}`;
+            return `sort-btn sort-asc ${this.sortAscendingIcon ?? 'datatable-icon-up'}`;
         }
         else if (sortDir === SortDirection.desc) {
-            return `sort-btn sort-desc ${this.sortDescendingIcon}`;
+            return `sort-btn sort-desc ${this.sortDescendingIcon ?? 'datatable-icon-down'}`;
         }
         else {
-            return `sort-btn ${this.sortUnsetIcon}`;
+            return `sort-btn ${this.sortUnsetIcon ?? 'datatable-icon-sort-unset'}`;
+        }
+    }
+    onMousedown(event) {
+        const isMouse = event instanceof MouseEvent;
+        const initialWidth = this.element.clientWidth;
+        const { screenX } = getPositionFromEvent(event);
+        event.stopPropagation();
+        const mouseup = fromEvent(document, isMouse ? 'mouseup' : 'touchend');
+        this.subscription = mouseup.subscribe(() => this.onMouseup());
+        const mouseMoveSub = fromEvent(document, isMouse ? 'mousemove' : 'touchmove')
+            .pipe(takeUntil$1(mouseup))
+            .subscribe((e) => this.move(e, initialWidth, screenX));
+        this.subscription.add(mouseMoveSub);
+    }
+    onMouseup() {
+        if (this.subscription && !this.subscription.closed) {
+            this.destroySubscription();
+            this.resize.emit({ width: this.element.clientWidth, column: this.column });
+        }
+    }
+    move(event, initialWidth, mouseDownScreenX) {
+        const movementX = getPositionFromEvent(event).screenX - mouseDownScreenX;
+        const newWidth = initialWidth + movementX;
+        this.resizing.emit({ width: newWidth, column: this.column });
+    }
+    destroySubscription() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableHeaderCellComponent, isStandalone: true, selector: "datatable-header-cell", inputs: { sortType: "sortType", sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", isTarget: "isTarget", targetMarkerTemplate: "targetMarkerTemplate", targetMarkerContext: "targetMarkerContext", enableClearingSortState: "enableClearingSortState", allRowsSelected: "allRowsSelected", selectionType: "selectionType", column: "column", headerHeight: "headerHeight", sorts: "sorts" }, outputs: { sort: "sort", select: "select", columnContextmenu: "columnContextmenu" }, host: { listeners: { "contextmenu": "onContextmenu($event)", "keydown.enter": "enter()" }, properties: { "style.height.px": "this.headerHeight", "class": "this.columnCssClasses", "attr.title": "this.name", "style.minWidth.px": "this.minWidth", "style.maxWidth.px": "this.maxWidth", "style.width.px": "this.width", "tabindex": "this.tabindex" }, classAttribute: "datatable-header-cell" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableHeaderCellComponent, isStandalone: true, selector: "datatable-header-cell", inputs: { sortType: "sortType", sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", isTarget: "isTarget", targetMarkerTemplate: "targetMarkerTemplate", targetMarkerContext: "targetMarkerContext", enableClearingSortState: "enableClearingSortState", allRowsSelected: "allRowsSelected", selectionType: "selectionType", column: "column", headerHeight: "headerHeight", sorts: "sorts" }, outputs: { sort: "sort", select: "select", columnContextmenu: "columnContextmenu", resize: "resize", resizing: "resizing" }, host: { listeners: { "contextmenu": "onContextmenu($event)", "keydown.enter": "enter()" }, properties: { "attr.resizeable": "column.resizeable", "style.height.px": "this.headerHeight", "class": "this.columnCssClasses", "attr.title": "this.name", "style.minWidth.px": "this.minWidth", "style.maxWidth.px": "this.maxWidth", "style.width.px": "this.width", "tabindex": "this.tabindex" }, classAttribute: "datatable-header-cell" }, ngImport: i0, template: `
     <div class="datatable-header-cell-template-wrap">
       @if (isTarget) {
       <ng-template
-        [ngTemplateOutlet]="targetMarkerTemplate"
+        [ngTemplateOutlet]="targetMarkerTemplate!"
         [ngTemplateOutletContext]="targetMarkerContext"
       >
       </ng-template>
@@ -4310,17 +3721,22 @@ class DataTableHeaderCellComponent {
       }
       <span (click)="onSort()" [class]="sortClass"> </span>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    @if (column.resizeable) {
+    <span
+      class="resize-handle"
+      (mousedown)="onMousedown($event)"
+      (touchstart)="onMousedown($event)"
+    ></span>
+    }
+  `, isInline: true, styles: [":host{overflow-x:hidden;vertical-align:top;line-height:1.625;position:relative;display:inline-block}:host:focus{outline:none}:host-context(ngx-datatable.fixed-header) :host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host.sortable .datatable-header-cell-wrapper{cursor:pointer}:host.longpress .datatable-header-cell-wrapper{cursor:move}.datatable-header-cell-template-wrap{height:inherit}.sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.resize-handle,.resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.resize-handle{cursor:ew-resize}:host(.resizeable:hover) .resize-handle{visibility:visible}@media (hover: none){:host{touch-action:none}:host .resize-handle{visibility:visible}:host .datatable-header-cell-label.draggable{-webkit-user-select:none;user-select:none}}.resize-handle--not-resizable :host(:hover){visibility:visible}:host::ng-deep .targetMarker{position:absolute;top:0;bottom:0}:host::ng-deep .targetMarker.dragFromLeft{right:0}:host::ng-deep .targetMarker.dragFromRight{left:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-header-cell',
-                    template: `
+            args: [{ selector: 'datatable-header-cell', template: `
     <div class="datatable-header-cell-template-wrap">
       @if (isTarget) {
       <ng-template
-        [ngTemplateOutlet]="targetMarkerTemplate"
+        [ngTemplateOutlet]="targetMarkerTemplate!"
         [ngTemplateOutletContext]="targetMarkerContext"
       >
       </ng-template>
@@ -4343,13 +3759,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
       }
       <span (click)="onSort()" [class]="sortClass"> </span>
     </div>
-  `,
-                    host: {
-                        class: 'datatable-header-cell'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgTemplateOutlet]
-                }]
+    @if (column.resizeable) {
+    <span
+      class="resize-handle"
+      (mousedown)="onMousedown($event)"
+      (touchstart)="onMousedown($event)"
+    ></span>
+    }
+  `, host: {
+                        'class': 'datatable-header-cell',
+                        '[attr.resizeable]': 'column.resizeable'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], styles: [":host{overflow-x:hidden;vertical-align:top;line-height:1.625;position:relative;display:inline-block}:host:focus{outline:none}:host-context(ngx-datatable.fixed-header) :host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host.sortable .datatable-header-cell-wrapper{cursor:pointer}:host.longpress .datatable-header-cell-wrapper{cursor:move}.datatable-header-cell-template-wrap{height:inherit}.sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.resize-handle,.resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.resize-handle{cursor:ew-resize}:host(.resizeable:hover) .resize-handle{visibility:visible}@media (hover: none){:host{touch-action:none}:host .resize-handle{visibility:visible}:host .datatable-header-cell-label.draggable{-webkit-user-select:none;user-select:none}}.resize-handle--not-resizable :host(:hover){visibility:visible}:host::ng-deep .targetMarker{position:absolute;top:0;bottom:0}:host::ng-deep .targetMarker.dragFromLeft{right:0}:host::ng-deep .targetMarker.dragFromRight{left:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sortType: [{
                 type: Input
             }], sortAscendingIcon: [{
@@ -4385,6 +3805,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Output
             }], columnContextmenu: [{
                 type: Output
+            }], resize: [{
+                type: Output
+            }], resizing: [{
+                type: Output
             }], columnCssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -4494,9 +3918,9 @@ class OrderableDirective {
         const target = this.isTarget(model, event);
         if (target) {
             this.reorder.emit({
-                prevIndex: prevPos.index,
-                newIndex: target.i,
-                model
+                prevValue: prevPos.index,
+                newValue: target.i,
+                column: model
             });
         }
         this.lastDraggingIndex = undefined;
@@ -4504,9 +3928,8 @@ class OrderableDirective {
     }
     isTarget(model, event) {
         let i = 0;
-        const x = event.x || event.clientX;
-        const y = event.y || event.clientY;
-        const targets = this.document.elementsFromPoint(x, y);
+        const { clientX, clientY } = getPositionFromEvent(event);
+        const targets = this.document.elementsFromPoint(clientX, clientY);
         for (const id in this.positions) {
             // current column position which throws event.
             const pos = this.positions[id];
@@ -4526,14 +3949,13 @@ class OrderableDirective {
             return acc;
         }, {});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: OrderableDirective, isStandalone: true, selector: "[orderable]", outputs: { reorder: "reorder", targetChanged: "targetChanged" }, queries: [{ propertyName: "draggables", predicate: DraggableDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: OrderableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: OrderableDirective, isStandalone: true, selector: "[orderable]", outputs: { reorder: "reorder", targetChanged: "targetChanged" }, queries: [{ propertyName: "draggables", predicate: DraggableDirective, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: OrderableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: OrderableDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[orderable]',
-                    standalone: true
+                    selector: '[orderable]'
                 }]
         }], propDecorators: { reorder: [{
                 type: Output
@@ -4642,17 +4064,17 @@ class DataTableHeaderComponent {
         }
         return '100%';
     }
-    onColumnResized(width, column) {
+    onColumnResized({ width, column }) {
         this.resize.emit(this.makeResizeEvent(width, column));
     }
-    onColumnResizing(width, column) {
+    onColumnResizing({ width, column }) {
         this.resizing.emit(this.makeResizeEvent(width, column));
     }
     makeResizeEvent(width, column) {
-        if (width <= column.minWidth) {
+        if (column.minWidth && width <= column.minWidth) {
             width = column.minWidth;
         }
-        else if (width >= column.maxWidth) {
+        else if (column.maxWidth && width >= column.maxWidth) {
             width = column.maxWidth;
         }
         return {
@@ -4661,15 +4083,11 @@ class DataTableHeaderComponent {
             newValue: width
         };
     }
-    onColumnReordered({ prevIndex, newIndex, model }) {
-        const column = this.getColumn(newIndex);
+    onColumnReordered(event) {
+        const column = this.getColumn(event.newValue);
         column.isTarget = false;
         column.targetMarkerContext = undefined;
-        this.reorder.emit({
-            column: model,
-            prevValue: prevIndex,
-            newValue: newIndex
-        });
+        this.reorder.emit(event);
     }
     onTargetChanged({ prevIndex, newIndex, initialIndex }) {
         if (prevIndex || prevIndex === 0) {
@@ -4758,8 +4176,8 @@ class DataTableHeaderComponent {
             width: `${widths[group]}px`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableHeaderComponent, isStandalone: true, selector: "datatable-header", inputs: { sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", scrollbarH: "scrollbarH", dealsWithGroup: "dealsWithGroup", targetMarkerTemplate: "targetMarkerTemplate", enableClearingSortState: "enableClearingSortState", innerWidth: "innerWidth", sorts: "sorts", sortType: "sortType", allRowsSelected: "allRowsSelected", selectionType: "selectionType", reorderable: "reorderable", verticalScrollVisible: "verticalScrollVisible", headerHeight: "headerHeight", columns: "columns", offsetX: "offsetX" }, outputs: { sort: "sort", reorder: "reorder", resize: "resize", resizing: "resizing", select: "select", columnContextmenu: "columnContextmenu" }, host: { properties: { "style.height": "this.headerHeight", "style.width": "this.headerWidth" }, classAttribute: "datatable-header" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableHeaderComponent, isStandalone: true, selector: "datatable-header", inputs: { sortAscendingIcon: "sortAscendingIcon", sortDescendingIcon: "sortDescendingIcon", sortUnsetIcon: "sortUnsetIcon", scrollbarH: "scrollbarH", dealsWithGroup: "dealsWithGroup", targetMarkerTemplate: "targetMarkerTemplate", enableClearingSortState: "enableClearingSortState", innerWidth: "innerWidth", sorts: "sorts", sortType: "sortType", allRowsSelected: "allRowsSelected", selectionType: "selectionType", reorderable: "reorderable", verticalScrollVisible: "verticalScrollVisible", headerHeight: "headerHeight", columns: "columns", offsetX: "offsetX" }, outputs: { sort: "sort", reorder: "reorder", resize: "resize", resizing: "resizing", select: "select", columnContextmenu: "columnContextmenu" }, host: { properties: { "style.height": "this.headerHeight", "style.width": "this.headerWidth" }, classAttribute: "datatable-header" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       role="row"
       orderable
@@ -4768,15 +4186,17 @@ class DataTableHeaderComponent {
       [style.width.px]="_columnGroupWidths.total"
       class="datatable-header-inner"
     >
-      @for (colGroup of _columnsByPin; track colGroup.type) {
-      <div [class]="'datatable-row-' + colGroup.type" [ngStyle]="_styleByGroup[colGroup.type]">
+      @for (colGroup of _columnsByPin; track colGroup.type) { @if (colGroup.columns.length) {
+      <div
+        class="datatable-row-group"
+        [ngClass]="'datatable-row-' + colGroup.type"
+        [ngStyle]="_styleByGroup[colGroup.type]"
+      >
         @for (column of colGroup.columns; track column.$$id) {
         <datatable-header-cell
           role="columnheader"
-          resizeable
-          [resizeEnabled]="column.resizeable"
-          (resize)="onColumnResized($event, column)"
-          (resizing)="onColumnResizing($event, column)"
+          (resize)="onColumnResized($event)"
+          (resizing)="onColumnResizing($event)"
           long-press
           [pressModel]="column"
           [pressEnabled]="reorderable && column.draggable"
@@ -4807,15 +4227,13 @@ class DataTableHeaderComponent {
         </datatable-header-cell>
         }
       </div>
-      }
+      } }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: OrderableDirective, selector: "[orderable]", outputs: ["reorder", "targetChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DataTableHeaderCellComponent, selector: "datatable-header-cell", inputs: ["sortType", "sortAscendingIcon", "sortDescendingIcon", "sortUnsetIcon", "isTarget", "targetMarkerTemplate", "targetMarkerContext", "enableClearingSortState", "allRowsSelected", "selectionType", "column", "headerHeight", "sorts"], outputs: ["sort", "select", "columnContextmenu"] }, { kind: "directive", type: ResizeableDirective, selector: "[resizeable]", inputs: ["resizeEnabled", "minWidth", "maxWidth"], outputs: ["resize", "resizing"] }, { kind: "directive", type: LongPressDirective, selector: "[long-press]", inputs: ["pressEnabled", "pressModel", "duration"], outputs: ["longPressStart", "longPressing", "longPressEnd"] }, { kind: "directive", type: DraggableDirective, selector: "[draggable]", inputs: ["dragEventTarget", "dragModel", "dragX", "dragY"], outputs: ["dragStart", "dragging", "dragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;overflow:hidden}.datatable-header-inner{display:flex}:host-context(ngx-datatable.fixed-header) .datatable-header-inner{white-space:nowrap}.datatable-row-group{display:flex}.datatable-row-left,.datatable-row-right{position:sticky;z-index:9}.datatable-row-left{left:0}.datatable-row-right{right:0}\n"], dependencies: [{ kind: "directive", type: OrderableDirective, selector: "[orderable]", outputs: ["reorder", "targetChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DataTableHeaderCellComponent, selector: "datatable-header-cell", inputs: ["sortType", "sortAscendingIcon", "sortDescendingIcon", "sortUnsetIcon", "isTarget", "targetMarkerTemplate", "targetMarkerContext", "enableClearingSortState", "allRowsSelected", "selectionType", "column", "headerHeight", "sorts"], outputs: ["sort", "select", "columnContextmenu", "resize", "resizing"] }, { kind: "directive", type: LongPressDirective, selector: "[long-press]", inputs: ["pressEnabled", "pressModel", "duration"], outputs: ["longPressStart", "longPressEnd"] }, { kind: "directive", type: DraggableDirective, selector: "[draggable]", inputs: ["dragEventTarget", "dragModel", "dragX", "dragY"], outputs: ["dragStart", "dragging", "dragEnd"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableHeaderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-header',
-                    template: `
+            args: [{ selector: 'datatable-header', template: `
     <div
       role="row"
       orderable
@@ -4824,15 +4242,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
       [style.width.px]="_columnGroupWidths.total"
       class="datatable-header-inner"
     >
-      @for (colGroup of _columnsByPin; track colGroup.type) {
-      <div [class]="'datatable-row-' + colGroup.type" [ngStyle]="_styleByGroup[colGroup.type]">
+      @for (colGroup of _columnsByPin; track colGroup.type) { @if (colGroup.columns.length) {
+      <div
+        class="datatable-row-group"
+        [ngClass]="'datatable-row-' + colGroup.type"
+        [ngStyle]="_styleByGroup[colGroup.type]"
+      >
         @for (column of colGroup.columns; track column.$$id) {
         <datatable-header-cell
           role="columnheader"
-          resizeable
-          [resizeEnabled]="column.resizeable"
-          (resize)="onColumnResized($event, column)"
-          (resizing)="onColumnResizing($event, column)"
+          (resize)="onColumnResized($event)"
+          (resizing)="onColumnResizing($event)"
           long-press
           [pressModel]="column"
           [pressEnabled]="reorderable && column.draggable"
@@ -4863,22 +4283,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
         </datatable-header-cell>
         }
       </div>
-      }
+      } }
     </div>
-  `,
-                    host: {
+  `, host: {
                         class: 'datatable-header'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         OrderableDirective,
                         NgStyle,
                         DataTableHeaderCellComponent,
-                        ResizeableDirective,
                         LongPressDirective,
-                        DraggableDirective
-                    ]
-                }]
+                        DraggableDirective,
+                        NgClass
+                    ], styles: [":host{display:block;overflow:hidden}.datatable-header-inner{display:flex}:host-context(ngx-datatable.fixed-header) .datatable-header-inner{white-space:nowrap}.datatable-row-group{display:flex}.datatable-row-left,.datatable-row-right{position:sticky;z-index:9}.datatable-row-left{left:0}.datatable-row-right{right:0}\n"] }]
         }], propDecorators: { sortAscendingIcon: [{
                 type: Input
             }], sortDescendingIcon: [{
@@ -4987,7 +4403,7 @@ function throttleable(duration, options) {
                     enumerable: descriptor.enumerable,
                     value: throttle(descriptor.value, duration, options)
                 });
-                return this[key];
+                return target[key];
             }
         };
     };
@@ -5008,7 +4424,7 @@ function getTotalFlexGrow(columns) {
  * Inspired by: https://github.com/facebook/fixed-data-table/blob/master/src/FixedDataTableWidthHelper.js
  */
 function adjustColumnWidths(allColumns, expectedWidth) {
-    const columnsWidth = columnsTotalWidth(allColumns);
+    const columnsWidth = columnTotalWidth(allColumns);
     const totalFlexGrow = getTotalFlexGrow(allColumns);
     const colsByGroup = columnsByPin(allColumns);
     if (columnsWidth !== expectedWidth) {
@@ -5020,21 +4436,17 @@ function adjustColumnWidths(allColumns, expectedWidth) {
  */
 function scaleColumns(colsByGroup, maxWidth, totalFlexGrow) {
     // calculate total width and flexgrow points for columns that can be resized
-    for (const attr in colsByGroup) {
-        if (attr in colsByGroup) {
-            for (const column of colsByGroup[attr]) {
-                if (column.$$oldWidth) {
-                    // when manually resized, switch off auto-resize
-                    column.canAutoResize = false;
-                }
-                if (!column.canAutoResize) {
-                    maxWidth -= column.width;
-                    totalFlexGrow -= column.flexGrow ? column.flexGrow : 0;
-                }
-                else {
-                    column.width = 0;
-                }
-            }
+    for (const column of Object.values(colsByGroup).flat()) {
+        if (column.$$oldWidth) {
+            // when manually resized, switch off auto-resize
+            column.canAutoResize = false;
+        }
+        if (!column.canAutoResize) {
+            maxWidth -= column.width;
+            totalFlexGrow -= column.flexGrow ? column.flexGrow : 0;
+        }
+        else {
+            column.width = 0;
         }
     }
     const hasMinWidth = {};
@@ -5043,21 +4455,17 @@ function scaleColumns(colsByGroup, maxWidth, totalFlexGrow) {
     do {
         const widthPerFlexPoint = remainingWidth / totalFlexGrow;
         remainingWidth = 0;
-        for (const attr in colsByGroup) {
-            if (attr in colsByGroup) {
-                for (const column of colsByGroup[attr]) {
-                    // if the column can be resize and it hasn't reached its minimum width yet
-                    if (column.canAutoResize && !hasMinWidth[column.prop]) {
-                        const newWidth = column.width + column.flexGrow * widthPerFlexPoint;
-                        if (column.minWidth !== undefined && newWidth < column.minWidth) {
-                            remainingWidth += newWidth - column.minWidth;
-                            column.width = column.minWidth;
-                            hasMinWidth[column.prop] = true;
-                        }
-                        else {
-                            column.width = newWidth;
-                        }
-                    }
+        for (const column of Object.values(colsByGroup).flat()) {
+            // if the column can be resize and it hasn't reached its minimum width yet
+            if (column.canAutoResize && !hasMinWidth[column.prop]) {
+                const newWidth = column.width + column.flexGrow * widthPerFlexPoint;
+                if (column.minWidth !== undefined && newWidth < column.minWidth) {
+                    remainingWidth += newWidth - column.minWidth;
+                    column.width = column.minWidth;
+                    hasMinWidth[column.prop] = true;
+                }
+                else {
+                    column.width = newWidth;
                 }
             }
         }
@@ -5169,11 +4577,15 @@ function getContentWidth(allColumns, defaultColWidth = 150) {
 
 class DataTablePagerComponent {
     constructor() {
+        this.dataTable = inject(DatatableComponent, { optional: true });
         this.change = new EventEmitter();
         this._count = 0;
         this._page = 1;
         this._size = 0;
     }
+    get messages() {
+        return this.dataTable?.messages ?? {};
+    }
     set size(val) {
         this._size = val;
         this.pages = this.calcPages();
@@ -5246,90 +4658,114 @@ class DataTablePagerComponent {
         }
         return pages;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTablePagerComponent, isStandalone: true, selector: "datatable-pager", inputs: { pagerLeftArrowIcon: "pagerLeftArrowIcon", pagerRightArrowIcon: "pagerRightArrowIcon", pagerPreviousIcon: "pagerPreviousIcon", pagerNextIcon: "pagerNextIcon", size: "size", count: "count", page: "page" }, outputs: { change: "change" }, host: { classAttribute: "datatable-pager" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTablePagerComponent, isStandalone: true, selector: "datatable-pager", inputs: { pagerLeftArrowIcon: "pagerLeftArrowIcon", pagerRightArrowIcon: "pagerRightArrowIcon", pagerPreviousIcon: "pagerPreviousIcon", pagerNextIcon: "pagerNextIcon", size: "size", count: "count", page: "page" }, outputs: { change: "change" }, host: { classAttribute: "datatable-pager" }, ngImport: i0, template: `
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
-        <a role="button" aria-label="go to first page" (click)="selectPage(1)">
-          <i class="{{ pagerPreviousIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaFirstPageMessage ?? 'go to first page'"
+          (click)="selectPage(1)"
+        >
+          <i class="{{ pagerPreviousIcon ?? 'datatable-icon-prev' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canPrevious()">
-        <a role="button" aria-label="go to previous page" (click)="prevPage()">
-          <i class="{{ pagerLeftArrowIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaPreviousPageMessage ?? 'go to previous page'"
+          (click)="prevPage()"
+        >
+          <i class="{{ pagerLeftArrowIcon ?? 'datatable-icon-left' }}"></i>
         </a>
       </li>
       @for (pg of pages; track pg.number) {
       <li
-        role="button"
-        [attr.aria-label]="'page ' + pg.number"
+        [attr.aria-label]="(messages.ariaPageNMessage ?? 'page') + ' ' + pg.number"
         class="pages"
         [class.active]="pg.number === page"
       >
-        <a (click)="selectPage(pg.number)">
+        <a role="button" (click)="selectPage(pg.number)">
           {{ pg.text }}
         </a>
       </li>
       }
       <li [class.disabled]="!canNext()">
-        <a role="button" aria-label="go to next page" (click)="nextPage()">
-          <i class="{{ pagerRightArrowIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaNextPageMessage ?? 'go to next page'"
+          (click)="nextPage()"
+        >
+          <i class="{{ pagerRightArrowIcon ?? 'datatable-icon-right' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canNext()">
-        <a role="button" aria-label="go to last page" (click)="selectPage(totalPages)">
-          <i class="{{ pagerNextIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaLastPageMessage ?? 'go to last page'"
+          (click)="selectPage(totalPages)"
+        >
+          <i class="{{ pagerNextIcon ?? 'datatable-icon-skip' }}"></i>
         </a>
       </li>
     </ul>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host-context(datatable-footer .selected-count) .datatable-pager{flex:1 1 60%}:host{flex:1 1 80%;text-align:right}.pager,.pager li{padding:0;margin:0;display:inline-block;list-style:none}.pager li,.pager li a{outline:none}.pager li a{cursor:pointer;display:inline-block}.pager li.disabled a{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTablePagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTablePagerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-pager',
-                    template: `
+            args: [{ selector: 'datatable-pager', template: `
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
-        <a role="button" aria-label="go to first page" (click)="selectPage(1)">
-          <i class="{{ pagerPreviousIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaFirstPageMessage ?? 'go to first page'"
+          (click)="selectPage(1)"
+        >
+          <i class="{{ pagerPreviousIcon ?? 'datatable-icon-prev' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canPrevious()">
-        <a role="button" aria-label="go to previous page" (click)="prevPage()">
-          <i class="{{ pagerLeftArrowIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaPreviousPageMessage ?? 'go to previous page'"
+          (click)="prevPage()"
+        >
+          <i class="{{ pagerLeftArrowIcon ?? 'datatable-icon-left' }}"></i>
         </a>
       </li>
       @for (pg of pages; track pg.number) {
       <li
-        role="button"
-        [attr.aria-label]="'page ' + pg.number"
+        [attr.aria-label]="(messages.ariaPageNMessage ?? 'page') + ' ' + pg.number"
         class="pages"
         [class.active]="pg.number === page"
       >
-        <a (click)="selectPage(pg.number)">
+        <a role="button" (click)="selectPage(pg.number)">
           {{ pg.text }}
         </a>
       </li>
       }
       <li [class.disabled]="!canNext()">
-        <a role="button" aria-label="go to next page" (click)="nextPage()">
-          <i class="{{ pagerRightArrowIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaNextPageMessage ?? 'go to next page'"
+          (click)="nextPage()"
+        >
+          <i class="{{ pagerRightArrowIcon ?? 'datatable-icon-right' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canNext()">
-        <a role="button" aria-label="go to last page" (click)="selectPage(totalPages)">
-          <i class="{{ pagerNextIcon }}"></i>
+        <a
+          role="button"
+          [attr.aria-label]="messages.ariaLastPageMessage ?? 'go to last page'"
+          (click)="selectPage(totalPages)"
+        >
+          <i class="{{ pagerNextIcon ?? 'datatable-icon-skip' }}"></i>
         </a>
       </li>
     </ul>
-  `,
-                    host: {
+  `, host: {
                         class: 'datatable-pager'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host-context(datatable-footer .selected-count) .datatable-pager{flex:1 1 60%}:host{flex:1 1 80%;text-align:right}.pager,.pager li{padding:0;margin:0;display:inline-block;list-style:none}.pager li,.pager li a{outline:none}.pager li a{cursor:pointer;display:inline-block}.pager li.disabled a{cursor:not-allowed}\n"] }]
         }], propDecorators: { pagerLeftArrowIcon: [{
                 type: Input
             }], pagerRightArrowIcon: [{
@@ -5359,16 +4795,16 @@ class DataTableFooterComponent {
     get curPage() {
         return this.offset + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DataTableFooterComponent, isStandalone: true, selector: "datatable-footer", inputs: { footerHeight: "footerHeight", rowCount: "rowCount", pageSize: "pageSize", offset: "offset", pagerLeftArrowIcon: "pagerLeftArrowIcon", pagerRightArrowIcon: "pagerRightArrowIcon", pagerPreviousIcon: "pagerPreviousIcon", pagerNextIcon: "pagerNextIcon", totalMessage: "totalMessage", footerTemplate: "footerTemplate", selectedCount: "selectedCount", selectedMessage: "selectedMessage" }, outputs: { page: "page" }, host: { classAttribute: "datatable-footer" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DataTableFooterComponent, isStandalone: true, selector: "datatable-footer", inputs: { footerHeight: "footerHeight", rowCount: "rowCount", pageSize: "pageSize", offset: "offset", pagerLeftArrowIcon: "pagerLeftArrowIcon", pagerRightArrowIcon: "pagerRightArrowIcon", pagerPreviousIcon: "pagerPreviousIcon", pagerNextIcon: "pagerNextIcon", totalMessage: "totalMessage", footerTemplate: "footerTemplate", selectedCount: "selectedCount", selectedMessage: "selectedMessage" }, outputs: { page: "page" }, host: { classAttribute: "datatable-footer" }, ngImport: i0, template: `
     <div
       class="datatable-footer-inner"
       [ngClass]="{ 'selected-count': selectedMessage }"
       [style.height.px]="footerHeight"
     >
-      @if (footerTemplate) {
+      @if (footerTemplate?.template) {
       <ng-template
-        [ngTemplateOutlet]="footerTemplate.template"
+        [ngTemplateOutlet]="footerTemplate!.template!"
         [ngTemplateOutletContext]="{
           rowCount: rowCount,
           pageSize: pageSize,
@@ -5385,6 +4821,7 @@ class DataTableFooterComponent {
         }
         {{ rowCount?.toLocaleString() }} {{ totalMessage }}
       </div>
+      @if (isVisible) {
       <datatable-pager
         [pagerLeftArrowIcon]="pagerLeftArrowIcon"
         [pagerRightArrowIcon]="pagerRightArrowIcon"
@@ -5393,27 +4830,24 @@ class DataTableFooterComponent {
         [page]="curPage"
         [size]="pageSize"
         [count]="rowCount"
-        [hidden]="!isVisible"
         (change)="page.emit($event)"
       >
       </datatable-pager>
-      }
+      } }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataTablePagerComponent, selector: "datatable-pager", inputs: ["pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "size", "count", "page"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;overflow:auto}.datatable-footer-inner{display:flex;align-items:center;width:100%}.page-count{flex:1 1 20%}.selected-count .page-count{flex:1 1 40%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataTablePagerComponent, selector: "datatable-pager", inputs: ["pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "size", "count", "page"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DataTableFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DataTableFooterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'datatable-footer',
-                    template: `
+            args: [{ selector: 'datatable-footer', template: `
     <div
       class="datatable-footer-inner"
       [ngClass]="{ 'selected-count': selectedMessage }"
       [style.height.px]="footerHeight"
     >
-      @if (footerTemplate) {
+      @if (footerTemplate?.template) {
       <ng-template
-        [ngTemplateOutlet]="footerTemplate.template"
+        [ngTemplateOutlet]="footerTemplate!.template!"
         [ngTemplateOutletContext]="{
           rowCount: rowCount,
           pageSize: pageSize,
@@ -5430,6 +4864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
         }
         {{ rowCount?.toLocaleString() }} {{ totalMessage }}
       </div>
+      @if (isVisible) {
       <datatable-pager
         [pagerLeftArrowIcon]="pagerLeftArrowIcon"
         [pagerRightArrowIcon]="pagerRightArrowIcon"
@@ -5438,19 +4873,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
         [page]="curPage"
         [size]="pageSize"
         [count]="rowCount"
-        [hidden]="!isVisible"
         (change)="page.emit($event)"
       >
       </datatable-pager>
-      }
+      } }
     </div>
-  `,
-                    host: {
+  `, host: {
                         class: 'datatable-footer'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgClass, NgTemplateOutlet, DataTablePagerComponent]
-                }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgTemplateOutlet, DataTablePagerComponent], styles: [":host{display:block;width:100%;overflow:auto}.datatable-footer-inner{display:flex;align-items:center;width:100%}.page-count{flex:1 1 20%}.selected-count .page-count{flex:1 1 40%}\n"] }]
         }], propDecorators: { footerHeight: [{
                 type: Input
             }], rowCount: [{
@@ -5527,14 +4957,13 @@ class VisibilityDirective {
         };
         this.timeout = setTimeout(() => check());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: VisibilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: VisibilityDirective, isStandalone: true, selector: "[visibilityObserver]", outputs: { visible: "visible" }, host: { properties: { "class.visible": "this.isVisible" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: VisibilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: VisibilityDirective, isStandalone: true, selector: "[visibilityObserver]", outputs: { visible: "visible" }, host: { properties: { "class.visible": "this.isVisible" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: VisibilityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: VisibilityDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[visibilityObserver]',
-                    standalone: true
+                    selector: '[visibilityObserver]'
                 }]
         }], propDecorators: { isVisible: [{
                 type: HostBinding,
@@ -5544,8 +4973,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
             }] } });
 
 class ProgressBarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ProgressBarComponent, isStandalone: true, selector: "datatable-progress", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: ProgressBarComponent, isStandalone: true, selector: "datatable-progress", ngImport: i0, template: `
     <div class="progress-linear" role="progressbar">
       <div class="container">
         <div class="bar"></div>
@@ -5553,7 +4982,7 @@ class ProgressBarComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'datatable-progress',
@@ -5564,17 +4993,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
       </div>
     </div>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
+/**
+ * Converts strings from something to camel case
+ * http://stackoverflow.com/questions/10425287/convert-dash-separated-string-to-camelcase
+ */
+function camelCase(str) {
+    // Replace special characters with a space
+    str = str.replace(/[^a-zA-Z0-9 ]/g, ' ');
+    // put a space before an uppercase letter
+    str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');
+    // Lower case first character and some other stuff
+    str = str
+        .replace(/([^a-zA-Z0-9 ])|^[0-9]+/g, '')
+        .trim()
+        .toLowerCase();
+    // uppercase characters preceded by a space or number
+    str = str.replace(/([ 0-9]+)([a-zA-Z])/g, function (a, b, c) {
+        return b.trim() + c.toUpperCase();
+    });
+    return str;
+}
+/**
+ * Converts strings from camel case to words
+ * http://stackoverflow.com/questions/7225407/convert-camelcasetext-to-camel-case-text
+ */
+function deCamelCase(str) {
+    return str.replace(/([A-Z])/g, match => ` ${match}`).replace(/^./, match => match.toUpperCase());
+}
+
+/**
+ * Creates a unique object id.
+ * http://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js
+ */
+function id() {
+    return ('0000' + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4);
+}
+
+function toInternalColumn(columns, defaultColumnWidth = 150) {
+    let hasTreeColumn = false;
+    // TS fails to infer the type here.
+    return columns.map(column => {
+        const prop = column.prop ?? (column.name ? camelCase(column.name) : undefined);
+        // Only one column should hold the tree view,
+        // Thus if multiple columns are provided with
+        // isTreeColumn as true, we take only the first one
+        const isTreeColumn = !!column.isTreeColumn && !hasTreeColumn;
+        hasTreeColumn = hasTreeColumn || isTreeColumn;
+        // TODO: add check if prop or name is provided if sorting is enabled.
+        return {
+            ...column,
+            $$id: id(),
+            $$valueGetter: getterForProp(prop),
+            prop,
+            name: column.name ?? (prop ? deCamelCase(String(prop)) : ''),
+            resizeable: column.resizeable ?? true,
+            sortable: column.sortable ?? true,
+            comparator: column.comparator ?? orderByComparator,
+            draggable: column.draggable ?? true,
+            canAutoResize: column.canAutoResize ?? true,
+            width: column.width ?? defaultColumnWidth,
+            isTreeColumn,
+            // in case of the directive, those are getters, so call them explicitly.
+            headerTemplate: column.headerTemplate,
+            cellTemplate: column.cellTemplate,
+            summaryTemplate: column.summaryTemplate,
+            ghostCellTemplate: column.ghostCellTemplate
+        }; // TS cannot cast here
+    });
+}
+
+const NGX_DATATABLE_CONFIG = new InjectionToken('ngx-datatable.config');
+/**
+ * Provides a global configuration for ngx-datatable.
+ *
+ * @param overrides The overrides of the table configuration.
+ */
+function providedNgxDatatableConfig(overrides) {
+    return {
+        provide: NGX_DATATABLE_CONFIG,
+        useValue: overrides
+    };
+}
+
 class DatatableComponent {
     /**
      * Rows that are displayed in the table.
      */
     set rows(val) {
-        this._rows = val;
+        this._rows = val ?? [];
         // This will ensure that datatable detects changes on doing like this rows = [...rows];
         this.rowDiffer.diff([]);
         if (val) {
@@ -5593,7 +5103,7 @@ class DatatableComponent {
     set groupRowsBy(val) {
         if (val) {
             this._groupRowsBy = val;
-            if (this._rows && this._groupRowsBy) {
+            if (this._groupRowsBy) {
                 // creates a new array with the data grouped
                 this.groupedRows = this.groupArrayBy(this._rows, this._groupRowsBy);
             }
@@ -5607,8 +5117,7 @@ class DatatableComponent {
      */
     set columns(val) {
         if (val) {
-            this._internalColumns = [...val];
-            setColumnDefaults(this._internalColumns, this._defaultColumnWidth);
+            this._internalColumns = toInternalColumn(val, this._defaultColumnWidth);
             this.recalculateColumns();
         }
         this._columns = val;
@@ -5667,7 +5176,7 @@ class DatatableComponent {
         this._ghostLoadingIndicator = val;
         if (val && this.scrollbarV && !this.externalPaging) {
             // in case where we don't have predefined total page length
-            this.rows = [...(this.rows ?? []), undefined]; // undefined row will render ghost cell row at the end of the page
+            this.rows = [...this.rows, undefined]; // undefined row will render ghost cell row at the end of the page
         }
     }
     get ghostLoadingIndicator() {
@@ -5760,7 +5269,9 @@ class DatatableComponent {
         this.scrollbarHelper = inject(ScrollbarHelper);
         this.cd = inject(ChangeDetectorRef);
         this.columnChangesService = inject(ColumnChangesService);
-        this.configuration = inject('configuration', { optional: true });
+        this.configuration = inject(NGX_DATATABLE_CONFIG, { optional: true }) ??
+            // This is the old injection token for backward compatibility.
+            inject('configuration', { optional: true });
         /**
          * List of row objects that should be
          * represented as selected in the grid.
@@ -5839,31 +5350,25 @@ class DatatableComponent {
         /**
          * Css class overrides
          */
-        this.cssClasses = {
-            sortAscending: 'datatable-icon-up',
-            sortDescending: 'datatable-icon-down',
-            sortUnset: 'datatable-icon-sort-unset',
-            pagerLeftArrow: 'datatable-icon-left',
-            pagerRightArrow: 'datatable-icon-right',
-            pagerPrevious: 'datatable-icon-prev',
-            pagerNext: 'datatable-icon-skip'
-        };
+        this.cssClasses = {};
         /**
          * Message overrides for localization
          *
-         * emptyMessage     [default] = 'No data to display'
-         * totalMessage     [default] = 'total'
-         * selectedMessage  [default] = 'selected'
+         * @defaultValue
+         * ```
+         * {
+         *   emptyMessage: 'No data to display',
+         *   totalMessage: 'total',
+         *   selectedMessage: 'selected',
+         *   ariaFirstPageMessage: 'go to first page',
+         *   ariaPreviousPageMessage: 'go to previous page',
+         *   ariaPageNMessage: 'page',
+         *   ariaNextPageMessage: 'go to next page',
+         *   ariaLastPageMessage: 'go to last page'
+         * }
+         * ```
          */
-        this.messages = {
-            // Message to show when array is presented
-            // but contains no values
-            emptyMessage: 'No data to display',
-            // Footer total message
-            totalMessage: 'total',
-            // Footer selected message
-            selectedMessage: 'selected'
-        };
+        this.messages = {};
         /**
          * A boolean you can use to set the detault behaviour of rows and groups
          * whether they will start expanded or not. If ommited the default is NOT expanded.
@@ -5949,9 +5454,11 @@ class DatatableComponent {
         this.element = inject(ElementRef).nativeElement;
         this.rowDiffer = inject(KeyValueDiffers).find([]).create();
         this.rowCount = 0;
-        this._offsetX = new BehaviorSubject(0);
+        this._offsetX = 0;
         this._count = 0;
         this._offset = 0;
+        this._rows = [];
+        this._internalRows = [];
         this._subscriptions = [];
         this._ghostLoadingIndicator = false;
         this.verticalScrollVisible = false;
@@ -6018,7 +5525,8 @@ class DatatableComponent {
                     count: this.count,
                     pageSize: this.pageSize,
                     limit: this.limit,
-                    offset: 0
+                    offset: 0,
+                    sorts: this.sorts
                 });
             }
         });
@@ -6039,10 +5547,8 @@ class DatatableComponent {
      */
     translateColumns(val) {
         if (val) {
-            const arr = val.toArray();
-            if (arr.length) {
-                this._internalColumns = translateTemplates(arr);
-                setColumnDefaults(this._internalColumns, this._defaultColumnWidth);
+            if (val.length) {
+                this._internalColumns = toInternalColumn(val, this._defaultColumnWidth);
                 this.recalculateColumns();
                 if (!this.externalSorting && this.rows?.length) {
                     this.sortInternalRows();
@@ -6062,12 +5568,17 @@ class DatatableComponent {
         const map = new Map();
         let i = 0;
         originalArray.forEach(item => {
+            if (!item) {
+                // skip undefined items
+                return;
+            }
             const key = item[groupBy];
-            if (!map.has(key)) {
+            const value = map.get(key);
+            if (!value) {
                 map.set(key, [item]);
             }
             else {
-                map.get(key).push(item);
+                value.push(item);
             }
             i++;
         });
@@ -6090,7 +5601,7 @@ class DatatableComponent {
             }
             // auto group by parent on new update
             this._internalRows = groupRowsByParents(this._internalRows, optionalGetterForProp(this.treeFromRelation), optionalGetterForProp(this.treeToRelation));
-            if (this._rows && this._groupRowsBy) {
+            if (this._groupRowsBy) {
                 // If a column has been specified in _groupRowsBy create a new array with the data grouped by that row
                 this.groupedRows = this.groupArrayBy(this._rows, this._groupRowsBy);
             }
@@ -6201,7 +5712,8 @@ class DatatableComponent {
                 count: this.count,
                 pageSize: this.pageSize,
                 limit: this.limit,
-                offset: this.offset
+                offset: this.offset,
+                sorts: this.sorts
             });
         }
     }
@@ -6209,9 +5721,8 @@ class DatatableComponent {
      * The body triggered a scroll event.
      */
     onBodyScroll(event) {
-        this._offsetX.next(event.offsetX);
+        this._offsetX = event.offsetX;
         this.scroll.emit(event);
-        this.cd.detectChanges();
     }
     /**
      * The footer triggered a page event.
@@ -6223,7 +5734,8 @@ class DatatableComponent {
             count: this.count,
             pageSize: this.pageSize,
             limit: this.limit,
-            offset: this.offset
+            offset: this.offset,
+            sorts: this.sorts
         });
         if (this.selectAllRowsOnPage) {
             this.selected = [];
@@ -6259,9 +5771,6 @@ class DatatableComponent {
      */
     calcRowCount() {
         if (!this.externalPaging) {
-            if (!this.rows) {
-                return 0;
-            }
             if (this.groupedRows) {
                 return this.groupedRows.length;
             }
@@ -6294,18 +5803,12 @@ class DatatableComponent {
         if (column === undefined) {
             return;
         }
-        let idx;
-        const cols = this._internalColumns.map((c, i) => {
-            c = { ...c };
-            if (c.$$id === column.$$id) {
-                idx = i;
-                c.width = newValue;
-                // set this so we can force the column
-                // width distribution to be to this value
-                c.$$oldWidth = newValue;
-            }
-            return c;
-        });
+        const idx = this._internalColumns.indexOf(column);
+        const cols = this._internalColumns.map(col => ({ ...col }));
+        cols[idx].width = newValue;
+        // set this so we can force the column
+        // width distribution to be to this value
+        cols[idx].$$oldWidth = newValue;
         this.recalculateColumns(cols, idx);
         this._internalColumns = cols;
         this.resize.emit({
@@ -6326,7 +5829,8 @@ class DatatableComponent {
     /**
      * The header triggered a column re-order event.
      */
-    onColumnReorder({ column, newValue, prevValue }) {
+    onColumnReorder(event) {
+        const { column, newValue, prevValue } = event;
         const cols = this._internalColumns.map(c => ({ ...c }));
         if (this.swapColumns) {
             const prevCol = cols[newValue];
@@ -6350,11 +5854,7 @@ class DatatableComponent {
             }
         }
         this._internalColumns = cols;
-        this.reorder.emit({
-            column,
-            newValue,
-            prevValue
-        });
+        this.reorder.emit(event);
     }
     /**
      * The header triggered a column sort event.
@@ -6384,7 +5884,8 @@ class DatatableComponent {
             count: this.count,
             pageSize: this.pageSize,
             limit: this.limit,
-            offset: this.offset
+            offset: this.offset,
+            sorts: this.sorts
         });
         this.sort.emit(event);
     }
@@ -6401,16 +5902,16 @@ class DatatableComponent {
             this.selected = [];
             // do the opposite here
             if (!allSelected) {
-                this.selected.push(...this._internalRows.slice(first, last));
+                this.selected.push(...this._internalRows.slice(first, last).filter(row => !!row));
             }
         }
         else {
             let relevantRows;
             if (this.disableRowCheck) {
-                relevantRows = this.rows.filter(row => !this.disableRowCheck(row));
+                relevantRows = this.rows.filter((row => row && !this.disableRowCheck(row)));
             }
             else {
-                relevantRows = this.rows;
+                relevantRows = this.rows.filter(row => !!row);
             }
             // before we splice, chk if we currently have all selected
             const allSelected = this.selected.length === relevantRows.length;
@@ -6437,7 +5938,7 @@ class DatatableComponent {
     onTreeAction(event) {
         const row = event.row;
         // TODO: For duplicated items this will not work
-        const rowIndex = this._rows.findIndex(r => r[this.treeToRelation] === event.row[this.treeToRelation]);
+        const rowIndex = this._rows.findIndex(r => r && r[this.treeToRelation] === event.row[this.treeToRelation]);
         this.treeAction.emit({ row, rowIndex });
     }
     ngOnDestroy() {
@@ -6473,21 +5974,21 @@ class DatatableComponent {
             this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: DatatableComponent, isStandalone: true, selector: "ngx-datatable", inputs: { targetMarkerTemplate: "targetMarkerTemplate", rows: "rows", groupRowsBy: "groupRowsBy", groupedRows: "groupedRows", columns: "columns", selected: "selected", scrollbarV: ["scrollbarV", "scrollbarV", booleanAttribute], scrollbarVDynamic: ["scrollbarVDynamic", "scrollbarVDynamic", booleanAttribute], scrollbarH: ["scrollbarH", "scrollbarH", booleanAttribute], rowHeight: "rowHeight", columnMode: "columnMode", headerHeight: ["headerHeight", "headerHeight", numberAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute], externalPaging: ["externalPaging", "externalPaging", booleanAttribute], externalSorting: ["externalSorting", "externalSorting", booleanAttribute], limit: ["limit", "limit", numberAttribute], count: ["count", "count", numberAttribute], offset: ["offset", "offset", numberAttribute], loadingIndicator: ["loadingIndicator", "loadingIndicator", booleanAttribute], ghostLoadingIndicator: ["ghostLoadingIndicator", "ghostLoadingIndicator", booleanAttribute], selectionType: "selectionType", reorderable: ["reorderable", "reorderable", booleanAttribute], swapColumns: ["swapColumns", "swapColumns", booleanAttribute], sortType: "sortType", sorts: "sorts", cssClasses: "cssClasses", messages: "messages", rowClass: "rowClass", selectCheck: "selectCheck", displayCheck: "displayCheck", groupExpansionDefault: ["groupExpansionDefault", "groupExpansionDefault", booleanAttribute], trackByProp: "trackByProp", selectAllRowsOnPage: ["selectAllRowsOnPage", "selectAllRowsOnPage", booleanAttribute], virtualization: ["virtualization", "virtualization", booleanAttribute], treeFromRelation: "treeFromRelation", treeToRelation: "treeToRelation", summaryRow: ["summaryRow", "summaryRow", booleanAttribute], summaryHeight: ["summaryHeight", "summaryHeight", numberAttribute], summaryPosition: "summaryPosition", disableRowCheck: "disableRowCheck", rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], enableClearingSortState: ["enableClearingSortState", "enableClearingSortState", booleanAttribute], rowIdentity: "rowIdentity" }, outputs: { scroll: "scroll", activate: "activate", select: "select", sort: "sort", page: "page", reorder: "reorder", resize: "resize", tableContextmenu: "tableContextmenu", treeAction: "treeAction", rowDragEvents: "rowDragEvents" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.fixed-header": "this.isFixedHeader", "class.fixed-row": "this.isFixedRow", "class.scroll-vertical": "this.isVertScroll", "class.virtualized": "this.isVirtualized", "class.scroll-horz": "this.isHorScroll", "class.selectable": "this.isSelectable", "class.checkbox-selection": "this.isCheckboxSelection", "class.cell-selection": "this.isCellSelection", "class.single-selection": "this.isSingleSelection", "class.multi-selection": "this.isMultiSelection", "class.multi-click-selection": "this.isMultiClickSelection" }, classAttribute: "ngx-datatable" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: DatatableComponent, isStandalone: true, selector: "ngx-datatable", inputs: { targetMarkerTemplate: "targetMarkerTemplate", rows: "rows", groupRowsBy: "groupRowsBy", groupedRows: "groupedRows", columns: "columns", selected: "selected", scrollbarV: ["scrollbarV", "scrollbarV", booleanAttribute], scrollbarVDynamic: ["scrollbarVDynamic", "scrollbarVDynamic", booleanAttribute], scrollbarH: ["scrollbarH", "scrollbarH", booleanAttribute], rowHeight: "rowHeight", columnMode: "columnMode", headerHeight: ["headerHeight", "headerHeight", numberAttribute], footerHeight: ["footerHeight", "footerHeight", numberAttribute], externalPaging: ["externalPaging", "externalPaging", booleanAttribute], externalSorting: ["externalSorting", "externalSorting", booleanAttribute], limit: ["limit", "limit", numberAttribute], count: ["count", "count", numberAttribute], offset: ["offset", "offset", numberAttribute], loadingIndicator: ["loadingIndicator", "loadingIndicator", booleanAttribute], ghostLoadingIndicator: ["ghostLoadingIndicator", "ghostLoadingIndicator", booleanAttribute], selectionType: "selectionType", reorderable: ["reorderable", "reorderable", booleanAttribute], swapColumns: ["swapColumns", "swapColumns", booleanAttribute], sortType: "sortType", sorts: "sorts", cssClasses: "cssClasses", messages: "messages", rowClass: "rowClass", selectCheck: "selectCheck", displayCheck: "displayCheck", groupExpansionDefault: ["groupExpansionDefault", "groupExpansionDefault", booleanAttribute], trackByProp: "trackByProp", selectAllRowsOnPage: ["selectAllRowsOnPage", "selectAllRowsOnPage", booleanAttribute], virtualization: ["virtualization", "virtualization", booleanAttribute], treeFromRelation: "treeFromRelation", treeToRelation: "treeToRelation", summaryRow: ["summaryRow", "summaryRow", booleanAttribute], summaryHeight: ["summaryHeight", "summaryHeight", numberAttribute], summaryPosition: "summaryPosition", disableRowCheck: "disableRowCheck", rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], enableClearingSortState: ["enableClearingSortState", "enableClearingSortState", booleanAttribute], rowIdentity: "rowIdentity" }, outputs: { scroll: "scroll", activate: "activate", select: "select", sort: "sort", page: "page", reorder: "reorder", resize: "resize", tableContextmenu: "tableContextmenu", treeAction: "treeAction", rowDragEvents: "rowDragEvents" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.fixed-header": "this.isFixedHeader", "class.fixed-row": "this.isFixedRow", "class.scroll-vertical": "this.isVertScroll", "class.virtualized": "this.isVirtualized", "class.scroll-horz": "this.isHorScroll", "class.selectable": "this.isSelectable", "class.checkbox-selection": "this.isCheckboxSelection", "class.cell-selection": "this.isCellSelection", "class.single-selection": "this.isSingleSelection", "class.multi-selection": "this.isMultiSelection", "class.multi-click-selection": "this.isMultiClickSelection" }, classAttribute: "ngx-datatable" }, providers: [
             {
                 provide: DatatableComponentToken,
                 useExisting: DatatableComponent
             },
             ColumnChangesService
-        ], queries: [{ propertyName: "rowDetail", first: true, predicate: DatatableRowDetailDirective, descendants: true }, { propertyName: "groupHeader", first: true, predicate: DatatableGroupHeaderDirective, descendants: true }, { propertyName: "footer", first: true, predicate: DatatableFooterDirective, descendants: true }, { propertyName: "rowDefTemplate", first: true, predicate: DatatableRowDefDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: DataTableColumnDirective }], viewQueries: [{ propertyName: "bodyComponent", first: true, predicate: DataTableBodyComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: DataTableHeaderComponent, descendants: true }, { propertyName: "bodyElement", first: true, predicate: DataTableBodyComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div visibilityObserver (visible)=\"recalculate()\">\n  <div role=\"table\">\n    @if (headerHeight) {\n      <datatable-header\n        role=\"rowgroup\"\n        [sorts]=\"sorts\"\n        [sortType]=\"sortType\"\n        [scrollbarH]=\"scrollbarH\"\n        [innerWidth]=\"_innerWidth\"\n        [offsetX]=\"_offsetX | async\"\n        [dealsWithGroup]=\"groupedRows !== undefined\"\n        [columns]=\"_internalColumns\"\n        [headerHeight]=\"headerHeight\"\n        [reorderable]=\"reorderable\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [sortAscendingIcon]=\"cssClasses.sortAscending\"\n        [sortDescendingIcon]=\"cssClasses.sortDescending\"\n        [sortUnsetIcon]=\"cssClasses.sortUnset\"\n        [allRowsSelected]=\"allRowsSelected\"\n        [selectionType]=\"selectionType\"\n        [verticalScrollVisible]=\"verticalScrollVisible\"\n        [enableClearingSortState]=\"enableClearingSortState\"\n        (sort)=\"onColumnSort($event)\"\n        (resize)=\"onColumnResize($event)\"\n        (resizing)=\"onColumnResizing($event)\"\n        (reorder)=\"onColumnReorder($event)\"\n        (select)=\"onHeaderSelect()\"\n        (columnContextmenu)=\"onColumnContextmenu($event)\"\n      >\n      </datatable-header>\n    }\n    <datatable-body\n      tabindex=\"0\"\n      role=\"rowgroup\"\n      [groupRowsBy]=\"groupRowsBy\"\n      [groupedRows]=\"groupedRows\"\n      [rows]=\"_internalRows\"\n      [groupExpansionDefault]=\"groupExpansionDefault\"\n      [scrollbarV]=\"scrollbarV\"\n      [scrollbarH]=\"scrollbarH\"\n      [virtualization]=\"virtualization\"\n      [loadingIndicator]=\"loadingIndicator\"\n      [ghostLoadingIndicator]=\"ghostLoadingIndicator\"\n      [externalPaging]=\"externalPaging\"\n      [rowHeight]=\"rowHeight\"\n      [rowCount]=\"rowCount\"\n      [offset]=\"offset\"\n      [trackByProp]=\"trackByProp\"\n      [columns]=\"_internalColumns\"\n      [pageSize]=\"pageSize\"\n      [offsetX]=\"_offsetX | async\"\n      [rowDetail]=\"rowDetail\"\n      [groupHeader]=\"groupHeader\"\n      [selected]=\"selected\"\n      [innerWidth]=\"_innerWidth\"\n      [bodyHeight]=\"bodyHeight\"\n      [selectionType]=\"selectionType\"\n      [rowIdentity]=\"rowIdentity\"\n      [rowClass]=\"rowClass\"\n      [selectCheck]=\"selectCheck\"\n      [displayCheck]=\"displayCheck\"\n      [summaryRow]=\"summaryRow\"\n      [summaryHeight]=\"summaryHeight\"\n      [summaryPosition]=\"summaryPosition\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      (page)=\"onBodyPage($event)\"\n      (activate)=\"activate.emit($event)\"\n      (rowContextmenu)=\"onRowContextmenu($event)\"\n      (select)=\"onBodySelect($event)\"\n      (scroll)=\"onBodyScroll($event)\"\n      (treeAction)=\"onTreeAction($event)\"\n      [disableRowCheck]=\"disableRowCheck\"\n      [rowDraggable]=\"rowDraggable\"\n      [rowDragEvents]=\"rowDragEvents\"\n      [rowDefTemplate]=\"rowDefTemplate\"\n    >\n      <ng-content select=\"[loading-indicator]\" ngProjectAs=\"[loading-indicator]\">\n        <datatable-progress></datatable-progress>\n      </ng-content>\n      <ng-content select=\"[empty-content]\" ngProjectAs=\"[empty-content]\">\n        <div class=\"empty-row\" [innerHTML]=\"messages.emptyMessage\"></div>\n      </ng-content>\n    </datatable-body>\n  </div>\n  @if (footerHeight) {\n    <datatable-footer\n      [rowCount]=\"groupedRows !== undefined ? _internalRows.length : rowCount\"\n      [pageSize]=\"pageSize\"\n      [offset]=\"offset\"\n      [footerHeight]=\"footerHeight\"\n      [footerTemplate]=\"footer\"\n      [totalMessage]=\"messages.totalMessage\"\n      [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n      [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n      [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n      [selectedCount]=\"selected.length\"\n      [selectedMessage]=\"!!selectionType && messages.selectedMessage\"\n      [pagerNextIcon]=\"cssClasses.pagerNext\"\n      (page)=\"onFooterPage($event)\"\n    >\n    </datatable-footer>\n  }\n</div>\n", styles: [".ngx-datatable{display:block;overflow:hidden;justify-content:center;position:relative;transform:translateZ(0)}.ngx-datatable [hidden]{display:none!important}.ngx-datatable *,.ngx-datatable *:before,.ngx-datatable *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.ngx-datatable.scroll-vertical .datatable-body{overflow-y:auto}.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper{position:absolute}.ngx-datatable.scroll-horz .datatable-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{white-space:nowrap}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-datatable.fixed-row .datatable-scroll,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row{white-space:nowrap}.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ngx-datatable .datatable-body-row,.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-header-inner{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:row;-webkit-flex-flow:row;-moz-flex-flow:row;-ms-flex-flow:row;-o-flex-flow:row;flex-flow:row}.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-header-cell{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}.ngx-datatable .datatable-body-cell:focus,.ngx-datatable .datatable-header-cell:focus{outline:none}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right,.ngx-datatable .datatable-group-header{z-index:9;position:sticky!important}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-group-header{left:0}.ngx-datatable .datatable-row-right{right:0}.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-row-group{position:relative}.ngx-datatable .datatable-header{display:block;overflow:hidden}.ngx-datatable .datatable-header .datatable-header-inner{align-items:stretch;-webkit-align-items:stretch}.ngx-datatable .datatable-header .datatable-header-cell{position:relative;display:inline-block}.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper{cursor:move}.ngx-datatable .datatable-header .datatable-header-cell .sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle{cursor:ew-resize}.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable{visibility:visible}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker{position:absolute;top:0;bottom:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft{right:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight{left:0}.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{height:inherit}.ngx-datatable .datatable-body{position:relative;z-index:10;display:block;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll{display:inline-block}.ngx-datatable .datatable-body .datatable-row-detail{overflow-y:hidden}.ngx-datatable .datatable-body .datatable-row-wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ngx-datatable .datatable-body .datatable-body-row{outline:none}.ngx-datatable .datatable-body .datatable-body-row>div{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ngx-datatable .datatable-footer{display:block;width:100%;overflow:auto}.ngx-datatable .datatable-footer .datatable-footer-inner{display:flex;align-items:center;width:100%}.ngx-datatable .datatable-footer .selected-count .page-count{flex:1 1 40%}.ngx-datatable .datatable-footer .selected-count .datatable-pager{flex:1 1 60%}.ngx-datatable .datatable-footer .page-count{flex:1 1 20%}.ngx-datatable .datatable-footer .datatable-pager{flex:1 1 80%;text-align:right}.ngx-datatable .datatable-footer .datatable-pager .pager,.ngx-datatable .datatable-footer .datatable-pager .pager li{padding:0;margin:0;display:inline-block;list-style:none}.ngx-datatable .datatable-footer .datatable-pager .pager li,.ngx-datatable .datatable-footer .datatable-pager .pager li a{outline:none}.ngx-datatable .datatable-footer .datatable-pager .pager li a{cursor:pointer;display:inline-block}.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: VisibilityDirective, selector: "[visibilityObserver]", outputs: ["visible"] }, { kind: "component", type: DataTableHeaderComponent, selector: "datatable-header", inputs: ["sortAscendingIcon", "sortDescendingIcon", "sortUnsetIcon", "scrollbarH", "dealsWithGroup", "targetMarkerTemplate", "enableClearingSortState", "innerWidth", "sorts", "sortType", "allRowsSelected", "selectionType", "reorderable", "verticalScrollVisible", "headerHeight", "columns", "offsetX"], outputs: ["sort", "reorder", "resize", "resizing", "select", "columnContextmenu"] }, { kind: "component", type: DataTableBodyComponent, selector: "datatable-body", inputs: ["rowDefTemplate", "scrollbarV", "scrollbarH", "loadingIndicator", "ghostLoadingIndicator", "externalPaging", "rowHeight", "offsetX", "selectionType", "selected", "rowIdentity", "rowDetail", "groupHeader", "selectCheck", "displayCheck", "trackByProp", "rowClass", "groupedRows", "groupExpansionDefault", "innerWidth", "groupRowsBy", "virtualization", "summaryRow", "summaryPosition", "summaryHeight", "rowDraggable", "rowDragEvents", "disableRowCheck", "pageSize", "rows", "columns", "offset", "rowCount", "bodyHeight", "verticalScrollVisible"], outputs: ["scroll", "page", "activate", "select", "detailToggle", "rowContextmenu", "treeAction"] }, { kind: "component", type: DataTableFooterComponent, selector: "datatable-footer", inputs: ["footerHeight", "rowCount", "pageSize", "offset", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "totalMessage", "footerTemplate", "selectedCount", "selectedMessage"], outputs: ["page"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ProgressBarComponent, selector: "datatable-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "rowDetail", first: true, predicate: DatatableRowDetailDirective, descendants: true }, { propertyName: "groupHeader", first: true, predicate: DatatableGroupHeaderDirective, descendants: true }, { propertyName: "footer", first: true, predicate: DatatableFooterDirective, descendants: true }, { propertyName: "rowDefTemplate", first: true, predicate: DatatableRowDefDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: DataTableColumnDirective }], viewQueries: [{ propertyName: "bodyComponent", first: true, predicate: DataTableBodyComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: DataTableHeaderComponent, descendants: true }, { propertyName: "bodyElement", first: true, predicate: DataTableBodyComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div visibilityObserver (visible)=\"recalculate()\">\n  <div role=\"table\">\n    @if (headerHeight) {\n    <datatable-header\n      role=\"rowgroup\"\n      [sorts]=\"sorts\"\n      [sortType]=\"sortType\"\n      [scrollbarH]=\"scrollbarH\"\n      [innerWidth]=\"_innerWidth\"\n      [offsetX]=\"_offsetX\"\n      [dealsWithGroup]=\"groupedRows !== undefined\"\n      [columns]=\"_internalColumns\"\n      [headerHeight]=\"headerHeight\"\n      [reorderable]=\"reorderable\"\n      [targetMarkerTemplate]=\"targetMarkerTemplate\"\n      [sortAscendingIcon]=\"cssClasses.sortAscending\"\n      [sortDescendingIcon]=\"cssClasses.sortDescending\"\n      [sortUnsetIcon]=\"cssClasses.sortUnset\"\n      [allRowsSelected]=\"allRowsSelected\"\n      [selectionType]=\"selectionType\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      [enableClearingSortState]=\"enableClearingSortState\"\n      (sort)=\"onColumnSort($event)\"\n      (resize)=\"onColumnResize($event)\"\n      (resizing)=\"onColumnResizing($event)\"\n      (reorder)=\"onColumnReorder($event)\"\n      (select)=\"onHeaderSelect()\"\n      (columnContextmenu)=\"onColumnContextmenu($event)\"\n    >\n    </datatable-header>\n    }\n    <datatable-body\n      tabindex=\"0\"\n      role=\"rowgroup\"\n      [groupRowsBy]=\"groupRowsBy\"\n      [groupedRows]=\"groupedRows\"\n      [rows]=\"_internalRows\"\n      [groupExpansionDefault]=\"groupExpansionDefault\"\n      [scrollbarV]=\"scrollbarV\"\n      [scrollbarH]=\"scrollbarH\"\n      [virtualization]=\"virtualization\"\n      [loadingIndicator]=\"loadingIndicator\"\n      [ghostLoadingIndicator]=\"ghostLoadingIndicator\"\n      [externalPaging]=\"externalPaging\"\n      [rowHeight]=\"rowHeight\"\n      [rowCount]=\"rowCount\"\n      [offset]=\"offset\"\n      [trackByProp]=\"trackByProp\"\n      [columns]=\"_internalColumns\"\n      [pageSize]=\"pageSize\"\n      [offsetX]=\"_offsetX\"\n      [rowDetail]=\"rowDetail\"\n      [groupHeader]=\"groupHeader\"\n      [selected]=\"selected\"\n      [innerWidth]=\"_innerWidth\"\n      [bodyHeight]=\"bodyHeight\"\n      [selectionType]=\"selectionType\"\n      [rowIdentity]=\"rowIdentity\"\n      [rowClass]=\"rowClass\"\n      [selectCheck]=\"selectCheck\"\n      [displayCheck]=\"displayCheck\"\n      [summaryRow]=\"summaryRow\"\n      [summaryHeight]=\"summaryHeight\"\n      [summaryPosition]=\"summaryPosition\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      (page)=\"onBodyPage($event)\"\n      (activate)=\"activate.emit($event)\"\n      (rowContextmenu)=\"onRowContextmenu($event)\"\n      (select)=\"onBodySelect($event)\"\n      (scroll)=\"onBodyScroll($event)\"\n      (treeAction)=\"onTreeAction($event)\"\n      [disableRowCheck]=\"disableRowCheck\"\n      [rowDraggable]=\"rowDraggable\"\n      [rowDragEvents]=\"rowDragEvents\"\n      [rowDefTemplate]=\"rowDefTemplate\"\n    >\n      <ng-content select=\"[loading-indicator]\" ngProjectAs=\"[loading-indicator]\">\n        <datatable-progress></datatable-progress>\n      </ng-content>\n      <ng-content select=\"[empty-content]\" ngProjectAs=\"[empty-content]\">\n        <div role=\"row\">\n          <div\n            role=\"cell\"\n            class=\"empty-row\"\n            [innerHTML]=\"messages.emptyMessage ?? 'No data to display'\"\n          ></div>\n        </div>\n      </ng-content>\n    </datatable-body>\n  </div>\n  @if (footerHeight) {\n  <datatable-footer\n    [rowCount]=\"groupedRows !== undefined ? _internalRows.length : rowCount\"\n    [pageSize]=\"pageSize\"\n    [offset]=\"offset\"\n    [footerHeight]=\"footerHeight\"\n    [footerTemplate]=\"footer\"\n    [totalMessage]=\"messages.totalMessage ?? 'total'\"\n    [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n    [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n    [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n    [selectedCount]=\"selected.length\"\n    [selectedMessage]=\"!!selectionType && (messages.selectedMessage ?? 'selected')\"\n    [pagerNextIcon]=\"cssClasses.pagerNext\"\n    (page)=\"onFooterPage($event)\"\n  >\n  </datatable-footer>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;justify-content:center;position:relative;transform:translateZ(0)}\n"], dependencies: [{ kind: "directive", type: VisibilityDirective, selector: "[visibilityObserver]", outputs: ["visible"] }, { kind: "component", type: DataTableHeaderComponent, selector: "datatable-header", inputs: ["sortAscendingIcon", "sortDescendingIcon", "sortUnsetIcon", "scrollbarH", "dealsWithGroup", "targetMarkerTemplate", "enableClearingSortState", "innerWidth", "sorts", "sortType", "allRowsSelected", "selectionType", "reorderable", "verticalScrollVisible", "headerHeight", "columns", "offsetX"], outputs: ["sort", "reorder", "resize", "resizing", "select", "columnContextmenu"] }, { kind: "component", type: DataTableBodyComponent, selector: "datatable-body", inputs: ["rowDefTemplate", "scrollbarV", "scrollbarH", "loadingIndicator", "ghostLoadingIndicator", "externalPaging", "rowHeight", "offsetX", "selectionType", "selected", "rowIdentity", "rowDetail", "groupHeader", "selectCheck", "displayCheck", "trackByProp", "rowClass", "groupedRows", "groupExpansionDefault", "innerWidth", "groupRowsBy", "virtualization", "summaryRow", "summaryPosition", "summaryHeight", "rowDraggable", "rowDragEvents", "disableRowCheck", "pageSize", "rows", "columns", "offset", "rowCount", "bodyHeight", "verticalScrollVisible"], outputs: ["scroll", "page", "activate", "select", "rowContextmenu", "treeAction"] }, { kind: "component", type: DataTableFooterComponent, selector: "datatable-footer", inputs: ["footerHeight", "rowCount", "pageSize", "offset", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "totalMessage", "footerTemplate", "selectedCount", "selectedMessage"], outputs: ["page"] }, { kind: "component", type: ProgressBarComponent, selector: "datatable-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     throttleable(5)
 ], DatatableComponent.prototype, "onWindowResize", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DatatableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-datatable', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'ngx-datatable', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-datatable'
                     }, providers: [
                         {
@@ -6500,9 +6001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         DataTableHeaderComponent,
                         DataTableBodyComponent,
                         DataTableFooterComponent,
-                        AsyncPipe,
                         ProgressBarComponent
-                    ], template: "<div visibilityObserver (visible)=\"recalculate()\">\n  <div role=\"table\">\n    @if (headerHeight) {\n      <datatable-header\n        role=\"rowgroup\"\n        [sorts]=\"sorts\"\n        [sortType]=\"sortType\"\n        [scrollbarH]=\"scrollbarH\"\n        [innerWidth]=\"_innerWidth\"\n        [offsetX]=\"_offsetX | async\"\n        [dealsWithGroup]=\"groupedRows !== undefined\"\n        [columns]=\"_internalColumns\"\n        [headerHeight]=\"headerHeight\"\n        [reorderable]=\"reorderable\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [sortAscendingIcon]=\"cssClasses.sortAscending\"\n        [sortDescendingIcon]=\"cssClasses.sortDescending\"\n        [sortUnsetIcon]=\"cssClasses.sortUnset\"\n        [allRowsSelected]=\"allRowsSelected\"\n        [selectionType]=\"selectionType\"\n        [verticalScrollVisible]=\"verticalScrollVisible\"\n        [enableClearingSortState]=\"enableClearingSortState\"\n        (sort)=\"onColumnSort($event)\"\n        (resize)=\"onColumnResize($event)\"\n        (resizing)=\"onColumnResizing($event)\"\n        (reorder)=\"onColumnReorder($event)\"\n        (select)=\"onHeaderSelect()\"\n        (columnContextmenu)=\"onColumnContextmenu($event)\"\n      >\n      </datatable-header>\n    }\n    <datatable-body\n      tabindex=\"0\"\n      role=\"rowgroup\"\n      [groupRowsBy]=\"groupRowsBy\"\n      [groupedRows]=\"groupedRows\"\n      [rows]=\"_internalRows\"\n      [groupExpansionDefault]=\"groupExpansionDefault\"\n      [scrollbarV]=\"scrollbarV\"\n      [scrollbarH]=\"scrollbarH\"\n      [virtualization]=\"virtualization\"\n      [loadingIndicator]=\"loadingIndicator\"\n      [ghostLoadingIndicator]=\"ghostLoadingIndicator\"\n      [externalPaging]=\"externalPaging\"\n      [rowHeight]=\"rowHeight\"\n      [rowCount]=\"rowCount\"\n      [offset]=\"offset\"\n      [trackByProp]=\"trackByProp\"\n      [columns]=\"_internalColumns\"\n      [pageSize]=\"pageSize\"\n      [offsetX]=\"_offsetX | async\"\n      [rowDetail]=\"rowDetail\"\n      [groupHeader]=\"groupHeader\"\n      [selected]=\"selected\"\n      [innerWidth]=\"_innerWidth\"\n      [bodyHeight]=\"bodyHeight\"\n      [selectionType]=\"selectionType\"\n      [rowIdentity]=\"rowIdentity\"\n      [rowClass]=\"rowClass\"\n      [selectCheck]=\"selectCheck\"\n      [displayCheck]=\"displayCheck\"\n      [summaryRow]=\"summaryRow\"\n      [summaryHeight]=\"summaryHeight\"\n      [summaryPosition]=\"summaryPosition\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      (page)=\"onBodyPage($event)\"\n      (activate)=\"activate.emit($event)\"\n      (rowContextmenu)=\"onRowContextmenu($event)\"\n      (select)=\"onBodySelect($event)\"\n      (scroll)=\"onBodyScroll($event)\"\n      (treeAction)=\"onTreeAction($event)\"\n      [disableRowCheck]=\"disableRowCheck\"\n      [rowDraggable]=\"rowDraggable\"\n      [rowDragEvents]=\"rowDragEvents\"\n      [rowDefTemplate]=\"rowDefTemplate\"\n    >\n      <ng-content select=\"[loading-indicator]\" ngProjectAs=\"[loading-indicator]\">\n        <datatable-progress></datatable-progress>\n      </ng-content>\n      <ng-content select=\"[empty-content]\" ngProjectAs=\"[empty-content]\">\n        <div class=\"empty-row\" [innerHTML]=\"messages.emptyMessage\"></div>\n      </ng-content>\n    </datatable-body>\n  </div>\n  @if (footerHeight) {\n    <datatable-footer\n      [rowCount]=\"groupedRows !== undefined ? _internalRows.length : rowCount\"\n      [pageSize]=\"pageSize\"\n      [offset]=\"offset\"\n      [footerHeight]=\"footerHeight\"\n      [footerTemplate]=\"footer\"\n      [totalMessage]=\"messages.totalMessage\"\n      [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n      [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n      [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n      [selectedCount]=\"selected.length\"\n      [selectedMessage]=\"!!selectionType && messages.selectedMessage\"\n      [pagerNextIcon]=\"cssClasses.pagerNext\"\n      (page)=\"onFooterPage($event)\"\n    >\n    </datatable-footer>\n  }\n</div>\n", styles: [".ngx-datatable{display:block;overflow:hidden;justify-content:center;position:relative;transform:translateZ(0)}.ngx-datatable [hidden]{display:none!important}.ngx-datatable *,.ngx-datatable *:before,.ngx-datatable *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.ngx-datatable.scroll-vertical .datatable-body{overflow-y:auto}.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper{position:absolute}.ngx-datatable.scroll-horz .datatable-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{white-space:nowrap}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-datatable.fixed-row .datatable-scroll,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row{white-space:nowrap}.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ngx-datatable .datatable-body-row,.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-header-inner{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-direction:row;-webkit-flex-flow:row;-moz-flex-flow:row;-ms-flex-flow:row;-o-flex-flow:row;flex-flow:row}.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-header-cell{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}.ngx-datatable .datatable-body-cell:focus,.ngx-datatable .datatable-header-cell:focus{outline:none}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right,.ngx-datatable .datatable-group-header{z-index:9;position:sticky!important}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-group-header{left:0}.ngx-datatable .datatable-row-right{right:0}.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-row-group{position:relative}.ngx-datatable .datatable-header{display:block;overflow:hidden}.ngx-datatable .datatable-header .datatable-header-inner{align-items:stretch;-webkit-align-items:stretch}.ngx-datatable .datatable-header .datatable-header-cell{position:relative;display:inline-block}.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper{cursor:move}.ngx-datatable .datatable-header .datatable-header-cell .sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle{cursor:ew-resize}.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable{visibility:visible}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker{position:absolute;top:0;bottom:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft{right:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight{left:0}.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{height:inherit}.ngx-datatable .datatable-body{position:relative;z-index:10;display:block;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll{display:inline-block}.ngx-datatable .datatable-body .datatable-row-detail{overflow-y:hidden}.ngx-datatable .datatable-body .datatable-row-wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ngx-datatable .datatable-body .datatable-body-row{outline:none}.ngx-datatable .datatable-body .datatable-body-row>div{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ngx-datatable .datatable-footer{display:block;width:100%;overflow:auto}.ngx-datatable .datatable-footer .datatable-footer-inner{display:flex;align-items:center;width:100%}.ngx-datatable .datatable-footer .selected-count .page-count{flex:1 1 40%}.ngx-datatable .datatable-footer .selected-count .datatable-pager{flex:1 1 60%}.ngx-datatable .datatable-footer .page-count{flex:1 1 20%}.ngx-datatable .datatable-footer .datatable-pager{flex:1 1 80%;text-align:right}.ngx-datatable .datatable-footer .datatable-pager .pager,.ngx-datatable .datatable-footer .datatable-pager .pager li{padding:0;margin:0;display:inline-block;list-style:none}.ngx-datatable .datatable-footer .datatable-pager .pager li,.ngx-datatable .datatable-footer .datatable-pager .pager li a{outline:none}.ngx-datatable .datatable-footer .datatable-pager .pager li a{cursor:pointer;display:inline-block}.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a{cursor:not-allowed}\n"] }]
+                    ], template: "<div visibilityObserver (visible)=\"recalculate()\">\n  <div role=\"table\">\n    @if (headerHeight) {\n    <datatable-header\n      role=\"rowgroup\"\n      [sorts]=\"sorts\"\n      [sortType]=\"sortType\"\n      [scrollbarH]=\"scrollbarH\"\n      [innerWidth]=\"_innerWidth\"\n      [offsetX]=\"_offsetX\"\n      [dealsWithGroup]=\"groupedRows !== undefined\"\n      [columns]=\"_internalColumns\"\n      [headerHeight]=\"headerHeight\"\n      [reorderable]=\"reorderable\"\n      [targetMarkerTemplate]=\"targetMarkerTemplate\"\n      [sortAscendingIcon]=\"cssClasses.sortAscending\"\n      [sortDescendingIcon]=\"cssClasses.sortDescending\"\n      [sortUnsetIcon]=\"cssClasses.sortUnset\"\n      [allRowsSelected]=\"allRowsSelected\"\n      [selectionType]=\"selectionType\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      [enableClearingSortState]=\"enableClearingSortState\"\n      (sort)=\"onColumnSort($event)\"\n      (resize)=\"onColumnResize($event)\"\n      (resizing)=\"onColumnResizing($event)\"\n      (reorder)=\"onColumnReorder($event)\"\n      (select)=\"onHeaderSelect()\"\n      (columnContextmenu)=\"onColumnContextmenu($event)\"\n    >\n    </datatable-header>\n    }\n    <datatable-body\n      tabindex=\"0\"\n      role=\"rowgroup\"\n      [groupRowsBy]=\"groupRowsBy\"\n      [groupedRows]=\"groupedRows\"\n      [rows]=\"_internalRows\"\n      [groupExpansionDefault]=\"groupExpansionDefault\"\n      [scrollbarV]=\"scrollbarV\"\n      [scrollbarH]=\"scrollbarH\"\n      [virtualization]=\"virtualization\"\n      [loadingIndicator]=\"loadingIndicator\"\n      [ghostLoadingIndicator]=\"ghostLoadingIndicator\"\n      [externalPaging]=\"externalPaging\"\n      [rowHeight]=\"rowHeight\"\n      [rowCount]=\"rowCount\"\n      [offset]=\"offset\"\n      [trackByProp]=\"trackByProp\"\n      [columns]=\"_internalColumns\"\n      [pageSize]=\"pageSize\"\n      [offsetX]=\"_offsetX\"\n      [rowDetail]=\"rowDetail\"\n      [groupHeader]=\"groupHeader\"\n      [selected]=\"selected\"\n      [innerWidth]=\"_innerWidth\"\n      [bodyHeight]=\"bodyHeight\"\n      [selectionType]=\"selectionType\"\n      [rowIdentity]=\"rowIdentity\"\n      [rowClass]=\"rowClass\"\n      [selectCheck]=\"selectCheck\"\n      [displayCheck]=\"displayCheck\"\n      [summaryRow]=\"summaryRow\"\n      [summaryHeight]=\"summaryHeight\"\n      [summaryPosition]=\"summaryPosition\"\n      [verticalScrollVisible]=\"verticalScrollVisible\"\n      (page)=\"onBodyPage($event)\"\n      (activate)=\"activate.emit($event)\"\n      (rowContextmenu)=\"onRowContextmenu($event)\"\n      (select)=\"onBodySelect($event)\"\n      (scroll)=\"onBodyScroll($event)\"\n      (treeAction)=\"onTreeAction($event)\"\n      [disableRowCheck]=\"disableRowCheck\"\n      [rowDraggable]=\"rowDraggable\"\n      [rowDragEvents]=\"rowDragEvents\"\n      [rowDefTemplate]=\"rowDefTemplate\"\n    >\n      <ng-content select=\"[loading-indicator]\" ngProjectAs=\"[loading-indicator]\">\n        <datatable-progress></datatable-progress>\n      </ng-content>\n      <ng-content select=\"[empty-content]\" ngProjectAs=\"[empty-content]\">\n        <div role=\"row\">\n          <div\n            role=\"cell\"\n            class=\"empty-row\"\n            [innerHTML]=\"messages.emptyMessage ?? 'No data to display'\"\n          ></div>\n        </div>\n      </ng-content>\n    </datatable-body>\n  </div>\n  @if (footerHeight) {\n  <datatable-footer\n    [rowCount]=\"groupedRows !== undefined ? _internalRows.length : rowCount\"\n    [pageSize]=\"pageSize\"\n    [offset]=\"offset\"\n    [footerHeight]=\"footerHeight\"\n    [footerTemplate]=\"footer\"\n    [totalMessage]=\"messages.totalMessage ?? 'total'\"\n    [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n    [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n    [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n    [selectedCount]=\"selected.length\"\n    [selectedMessage]=\"!!selectionType && (messages.selectedMessage ?? 'selected')\"\n    [pagerNextIcon]=\"cssClasses.pagerNext\"\n    (page)=\"onFooterPage($event)\"\n  >\n  </datatable-footer>\n  }\n</div>\n", styles: [":host{display:block;overflow:hidden;justify-content:center;position:relative;transform:translateZ(0)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { targetMarkerTemplate: [{
                 type: Input
             }], rows: [{
@@ -6707,40 +6207,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
  */
 class DisableRowDirective {
     constructor() {
-        this.element = inject(ElementRef);
-        this._disabled = false;
-    }
-    set disabled(val) {
-        this._disabled = val;
-        if (val) {
-            this.disableAllElements();
-        }
-    }
-    get disabled() {
-        return this._disabled;
+        this.elementRef = inject(ElementRef);
+        this.disabled = input(false, {
+            transform: booleanAttribute
+        });
+        effect(() => {
+            if (this.disabled()) {
+                this.disableAllElements();
+            }
+        });
     }
     disableAllElements() {
-        const el = this.element?.nativeElement;
-        if (!el) {
+        const hostElement = this.elementRef?.nativeElement;
+        if (!hostElement) {
             return;
         }
-        Array.from(el.querySelectorAll('*')).forEach(child => {
-            child?.setAttribute('disabled', '');
+        Array.from(hostElement.querySelectorAll('*')).forEach(child => {
+            child.setAttribute('disabled', '');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DisableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.9", type: DisableRowDirective, isStandalone: true, selector: "[disable-row]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DisableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: DisableRowDirective, isStandalone: true, selector: "[disable-row]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: DisableRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: DisableRowDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[disable-row]',
-                    standalone: true
+                    selector: '[disable-row]'
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class NgxDatatableModule {
     /**
@@ -6750,14 +6244,13 @@ class NgxDatatableModule {
     static forRoot(configuration) {
         return {
             ngModule: NgxDatatableModule,
-            providers: [{ provide: 'configuration', useValue: configuration }]
+            providers: [providedNgxDatatableConfig(configuration)]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NgxDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: NgxDatatableModule, imports: [DataTableFooterTemplateDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: NgxDatatableModule, imports: [DataTableFooterTemplateDirective,
             DatatableComponent,
             DataTableColumnDirective,
-            DataTablePagerComponent,
             DatatableRowDetailDirective,
             DatatableGroupHeaderDirective,
             DatatableRowDetailTemplateDirective,
@@ -6780,21 +6273,19 @@ class NgxDatatableModule {
             DataTableColumnCellTreeToggle,
             DataTableFooterTemplateDirective,
             DatatableFooterDirective,
-            DataTablePagerComponent,
             DatatableGroupHeaderTemplateDirective,
             DisableRowDirective,
             DatatableRowDefComponent,
             DatatableRowDefDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NgxDatatableModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxDatatableModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: NgxDatatableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgxDatatableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         DataTableFooterTemplateDirective,
                         DatatableComponent,
                         DataTableColumnDirective,
-                        DataTablePagerComponent,
                         DatatableRowDetailDirective,
                         DatatableGroupHeaderDirective,
                         DatatableRowDetailTemplateDirective,
@@ -6820,7 +6311,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         DataTableColumnCellTreeToggle,
                         DataTableFooterTemplateDirective,
                         DatatableFooterDirective,
-                        DataTablePagerComponent,
                         DatatableGroupHeaderTemplateDirective,
                         DisableRowDirective,
                         DatatableRowDefComponent,
@@ -6838,5 +6328,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColumnChangesService, ColumnMode, ContextmenuType, DataTableBodyCellComponent, DataTableBodyComponent, DataTableBodyRowComponent, DataTableColumnCellDirective, DataTableColumnCellTreeToggle, DataTableColumnDirective, DataTableColumnGhostCellDirective, DataTableColumnHeaderDirective, DataTableFooterComponent, DataTableFooterTemplateDirective, DataTableHeaderCellComponent, DataTableHeaderComponent, DataTablePagerComponent, DataTableRowWrapperComponent, DataTableSelectionComponent, DataTableSummaryRowComponent, DatatableComponent, DatatableFooterDirective, DatatableGroupHeaderDirective, DatatableGroupHeaderTemplateDirective, DatatableRowDefComponent, DatatableRowDefDirective, DatatableRowDefInternalDirective, DatatableRowDetailDirective, DatatableRowDetailTemplateDirective, DisableRowDirective, DraggableDirective, Keys, LongPressDirective, NgxDatatableModule, OrderableDirective, ProgressBarComponent, ResizeableDirective, RowHeightCache, ScrollbarHelper, ScrollerComponent, SelectionType, SortDirection, SortType, VisibilityDirective, adjustColumnWidths, camelCase, columnGroupWidths, columnTotalWidth, columnsByPin, columnsByPinArr, columnsTotalWidth, deCamelCase, deepValueGetter, emptyStringGetter, forceFillColumnWidths, getTotalFlexGrow, getterForProp, groupRowsByParents, id, isNullOrUndefined, nextSortDir, numericIndexGetter, optionalGetterForProp, orderByComparator, selectRows, selectRowsBetween, setColumnDefaults, shallowValueGetter, sortGroupedRows, sortRows, throttle, throttleable, translateTemplates };
+export { ColumnMode, ContextmenuType, DataTableColumnCellDirective, DataTableColumnCellTreeToggle, DataTableColumnDirective, DataTableColumnGhostCellDirective, DataTableColumnHeaderDirective, DataTableFooterTemplateDirective, DatatableComponent, DatatableFooterDirective, DatatableGroupHeaderDirective, DatatableGroupHeaderTemplateDirective, DatatableRowDefComponent, DatatableRowDefDirective, DatatableRowDefInternalDirective, DatatableRowDetailDirective, DatatableRowDetailTemplateDirective, DisableRowDirective, NgxDatatableModule, SelectionType, SortDirection, SortType, providedNgxDatatableConfig };
 //# sourceMappingURL=swimlane-ngx-datatable.mjs.map