@swimlane/ngx-datatable 20.1.0 → 21.0.0-alpha.0

package/lib/components/body/body-cell.component.d.ts

@@ -1,13 +1,18 @@
-import { ChangeDetectorRef, EventEmitter, ElementRef, ViewContainerRef, OnDestroy, DoCheck } from '@angular/core';
+import { DoCheck, EventEmitter, OnDestroy, ViewContainerRef } from '@angular/core';
 import { TableColumn } from '../../types/table-column.type';
-import { SortDirection } from '../../types/sort-direction.type';
+import { BehaviorSubject } from 'rxjs';
+import { ActivateEvent, CellContext, RowOrGroup, SortDirection, SortPropDir, TreeStatus } from '../../types/public.types';
 import * as i0 from "@angular/core";
-export declare type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
-export declare class DataTableBodyCellComponent implements DoCheck, OnDestroy {
+export declare class DataTableBodyCellComponent<TRow extends {
+    level?: number;
+} = any> implements DoCheck, OnDestroy {
     private cd;
-    displayCheck: (row: any, column?: TableColumn, value?: any) => boolean;
-    set group(group: any);
-    get group(): any;
+    displayCheck: (row: RowOrGroup<TRow>, column: TableColumn, value: any) => boolean;
+    _disable$: BehaviorSubject<boolean>;
+    set disable$(val: BehaviorSubject<boolean>);
+    get disable$(): BehaviorSubject<boolean>;
+    set group(group: TRow[]);
+    get group(): TRow[];
     set rowHeight(val: number);
     get rowHeight(): number;
     set isSelected(val: boolean);
@@ -18,27 +23,27 @@ export declare class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     get rowIndex(): number;
     set column(column: TableColumn);
     get column(): TableColumn;
-    set row(row: any);
-    get row(): any;
-    set sorts(val: any[]);
-    get sorts(): any[];
+    set row(row: TRow);
+    get row(): TRow;
+    set sorts(val: SortPropDir[]);
+    get sorts(): SortPropDir[];
     set treeStatus(status: TreeStatus);
     get treeStatus(): TreeStatus;
-    activate: EventEmitter<any>;
+    ghostLoadingIndicator: boolean;
+    activate: EventEmitter<ActivateEvent<TRow>>;
     treeAction: EventEmitter<any>;
     cellTemplate: ViewContainerRef;
-    get columnCssClasses(): any;
+    ghostLoaderTemplate: ViewContainerRef;
+    get columnCssClasses(): string;
     get width(): number;
     get minWidth(): number;
     get maxWidth(): number;
     get height(): string | number;
-    sanitizedValue: any;
+    sanitizedValue: string;
     value: any;
     sortDir: SortDirection;
     isFocused: boolean;
-    onCheckboxChangeFn: any;
-    activateFn: any;
-    cellContext: any;
+    cellContext: CellContext<TRow>;
     private _isSelected;
     private _sorts;
     private _column;
@@ -49,7 +54,7 @@ export declare class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     private _expanded;
     private _element;
     private _treeStatus;
-    constructor(element: ElementRef, cd: ChangeDetectorRef);
+    constructor();
     ngDoCheck(): void;
     ngOnDestroy(): void;
     checkValueUpdates(): void;
@@ -58,11 +63,11 @@ export declare class DataTableBodyCellComponent implements DoCheck, OnDestroy {
     onClick(event: MouseEvent): void;
     onDblClick(event: MouseEvent): void;
     onKeyDown(event: KeyboardEvent): void;
-    onCheckboxChange(event: any): void;
-    calcSortDir(sorts: any[]): any;
+    onCheckboxChange(event: MouseEvent | KeyboardEvent): void;
+    calcSortDir(sorts: SortPropDir[]): SortDirection;
     stripHtml(html: string): string;
     onTreeAction(): void;
-    calcLeftMargin(column: any, row: any): number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyCellComponent, "datatable-body-cell", never, { "displayCheck": "displayCheck"; "group": "group"; "rowHeight": "rowHeight"; "isSelected": "isSelected"; "expanded": "expanded"; "rowIndex": "rowIndex"; "column": "column"; "row": "row"; "sorts": "sorts"; "treeStatus": "treeStatus"; }, { "activate": "activate"; "treeAction": "treeAction"; }, never, never>;
+    calcLeftMargin(column: TableColumn, row: RowOrGroup<TRow>): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyCellComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyCellComponent<any>, "datatable-body-cell", never, { "displayCheck": { "alias": "displayCheck"; "required": false; }; "disable$": { "alias": "disable$"; "required": false; }; "group": { "alias": "group"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "column": { "alias": "column"; "required": false; }; "row": { "alias": "row"; "required": false; }; "sorts": { "alias": "sorts"; "required": false; }; "treeStatus": { "alias": "treeStatus"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; }, { "activate": "activate"; "treeAction": "treeAction"; }, never, never, true, never>;
 }

package/lib/components/body/body-group-header-template.directive.d.ts

@@ -1,8 +1,7 @@
-import { TemplateRef } from '@angular/core';
+import { GroupContext } from '../../types/public.types';
 import * as i0 from "@angular/core";
 export declare class DatatableGroupHeaderTemplateDirective {
-    template: TemplateRef<any>;
-    constructor(template: TemplateRef<any>);
+    static ngTemplateContextGuard(directive: DatatableGroupHeaderTemplateDirective, context: unknown): context is GroupContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderTemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderTemplateDirective, "[ngx-datatable-group-header-template]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderTemplateDirective, "[ngx-datatable-group-header-template]", never, {}, {}, never, never, true, never>;
 }

package/lib/components/body/body-group-header.directive.d.ts

@@ -1,21 +1,26 @@
 import { EventEmitter, TemplateRef } from '@angular/core';
+import { Group, GroupContext, GroupToggleEvents } from '../../types/public.types';
 import * as i0 from "@angular/core";
-export declare class DatatableGroupHeaderDirective {
+export declare class DatatableGroupHeaderDirective<TRow = any> {
     /**
      * Row height is required when virtual scroll is enabled.
      */
-    rowHeight: number | ((group?: any, index?: number) => number);
-    _templateInput: TemplateRef<any>;
-    _templateQuery: TemplateRef<any>;
-    get template(): TemplateRef<any>;
+    rowHeight: number | ((group?: Group<TRow>, index?: number) => number);
+    /**
+     * Show checkbox at group header to select all rows of the group.
+     */
+    checkboxable: boolean;
+    _templateInput: TemplateRef<GroupContext<TRow>>;
+    _templateQuery: TemplateRef<GroupContext<TRow>>;
+    get template(): TemplateRef<GroupContext<TRow>>;
     /**
      * Track toggling of group visibility
      */
-    toggle: EventEmitter<any>;
+    toggle: EventEmitter<GroupToggleEvents<TRow>>;
     /**
      * Toggle the expansion of a group
      */
-    toggleExpandGroup(group: any): void;
+    toggleExpandGroup(group: Group<TRow>): void;
     /**
      * Expand all groups
      */
@@ -24,6 +29,6 @@ export declare class DatatableGroupHeaderDirective {
      * Collapse all groups
      */
     collapseAllGroups(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderDirective, "ngx-datatable-group-header", never, { "rowHeight": "rowHeight"; "_templateInput": "template"; }, { "toggle": "toggle"; }, ["_templateQuery"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableGroupHeaderDirective<any>, "ngx-datatable-group-header", never, { "rowHeight": { "alias": "rowHeight"; "required": false; }; "checkboxable": { "alias": "checkboxable"; "required": false; }; "_templateInput": { "alias": "template"; "required": false; }; }, { "toggle": "toggle"; }, ["_templateQuery"], never, true, never>;
 }

package/lib/components/body/body-row-def.component.d.ts

@@ -0,0 +1,34 @@
+import { OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * This component is passed as ng-template and rendered by BodyComponent.
+ * BodyComponent uses rowDefInternal to first inject actual row template.
+ * This component will render that actual row template.
+ */
+export declare class DatatableRowDefComponent {
+    rowDef: DatatableRowDefInternalDirective;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableRowDefComponent, "datatable-row-def", never, {}, {}, never, never, true, never>;
+}
+export declare class DatatableRowDefDirective {
+    static ngTemplateContextGuard(_dir: DatatableRowDefDirective, ctx: unknown): ctx is RowDefContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableRowDefDirective, "[rowDef]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * @internal To be used internally by ngx-datatable.
+ */
+export declare class DatatableRowDefInternalDirective implements OnInit {
+    vc: ViewContainerRef;
+    rowDefInternal?: RowDefContext;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableRowDefInternalDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableRowDefInternalDirective, "[rowDefInternal]", never, { "rowDefInternal": { "alias": "rowDefInternal"; "required": false; }; }, {}, never, never, true, never>;
+}
+type RowDefContext = {
+    template: TemplateRef<unknown>;
+    rowTemplate: TemplateRef<unknown>;
+    row: any;
+    index: number;
+};
+export {};

package/lib/components/body/body-row-wrapper.component.d.ts

@@ -1,32 +1,44 @@
-import { EventEmitter, DoCheck, ChangeDetectorRef, KeyValueDiffers } from '@angular/core';
+import { DoCheck, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Group, GroupContext, RowDetailContext, RowOrGroup } from '../../types/public.types';
+import { DatatableGroupHeaderDirective } from './body-group-header.directive';
+import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive';
 import * as i0 from "@angular/core";
-export declare class DataTableRowWrapperComponent implements DoCheck {
-    private cd;
-    private differs;
+export declare class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit, OnChanges {
+    checkBoxInput: ElementRef<HTMLInputElement>;
     innerWidth: number;
-    rowDetail: any;
-    groupHeader: any;
+    rowDetail: DatatableRowDetailDirective;
+    groupHeader: DatatableGroupHeaderDirective;
     offsetX: number;
-    detailRowHeight: any;
-    row: any;
-    groupedRows: any;
+    detailRowHeight: number;
+    groupHeaderRowHeight: number;
+    row: RowOrGroup<TRow>;
+    groupedRows: Group<TRow>[];
+    disableCheck: (row: RowOrGroup<TRow>) => boolean;
+    selected: TRow[];
     rowContextmenu: EventEmitter<{
         event: MouseEvent;
-        row: any;
+        row: RowOrGroup<TRow>;
     }>;
-    set rowIndex(val: number);
-    get rowIndex(): number;
-    set expanded(val: boolean);
-    get expanded(): boolean;
-    groupContext: any;
-    rowContext: any;
+    rowIndex?: number;
+    selectedGroupRows: import("@angular/core").WritableSignal<TRow[]>;
+    expanded: boolean;
+    groupContext?: GroupContext<TRow>;
+    rowContext?: RowDetailContext<TRow>;
+    disable$: BehaviorSubject<boolean>;
     private rowDiffer;
-    private _expanded;
-    private _rowIndex;
-    constructor(cd: ChangeDetectorRef, differs: KeyValueDiffers);
+    private iterableDiffers;
+    private selectedRowsDiffer;
+    private tableComponent;
+    private cd;
+    protected group: import("@angular/core").Signal<Group<TRow>>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;
     onContextmenu($event: MouseEvent): void;
-    getGroupHeaderStyle(): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableRowWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableRowWrapperComponent, "datatable-row-wrapper", never, { "innerWidth": "innerWidth"; "rowDetail": "rowDetail"; "groupHeader": "groupHeader"; "offsetX": "offsetX"; "detailRowHeight": "detailRowHeight"; "row": "row"; "groupedRows": "groupedRows"; "rowIndex": "rowIndex"; "expanded": "expanded"; }, { "rowContextmenu": "rowContextmenu"; }, never, ["*"]>;
+    onCheckboxChange(groupSelected: boolean): void;
+    isGroup(row: RowOrGroup<TRow>): row is Group<TRow>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableRowWrapperComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableRowWrapperComponent<any>, "datatable-row-wrapper", never, { "innerWidth": { "alias": "innerWidth"; "required": false; }; "rowDetail": { "alias": "rowDetail"; "required": false; }; "groupHeader": { "alias": "groupHeader"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "detailRowHeight": { "alias": "detailRowHeight"; "required": false; }; "groupHeaderRowHeight": { "alias": "groupHeaderRowHeight"; "required": false; }; "row": { "alias": "row"; "required": false; }; "groupedRows": { "alias": "groupedRows"; "required": false; }; "disableCheck": { "alias": "disableCheck"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "rowContextmenu": "rowContextmenu"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_expanded: unknown;
 }

package/lib/components/body/body-row.component.d.ts

@@ -1,53 +1,47 @@
-import { ElementRef, KeyValueDiffers, EventEmitter, ChangeDetectorRef, DoCheck } from '@angular/core';
-import { TreeStatus } from './body-cell.component';
-import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
+import { DoCheck, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ActivateEvent, RowOrGroup, TreeStatus } from '../../types/public.types';
+import { TableColumn } from '../../types/table-column.type';
+import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
 import * as i0 from "@angular/core";
-export declare class DataTableBodyRowComponent implements DoCheck {
-    private differs;
-    private scrollbarHelper;
+export declare class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges {
     private cd;
-    set columns(val: any[]);
-    get columns(): any[];
+    set columns(val: TableColumn[]);
+    get columns(): TableColumn[];
     set innerWidth(val: number);
     get innerWidth(): number;
     expanded: boolean;
-    rowClass: any;
-    row: any;
-    group: any;
+    rowClass?: (row: RowOrGroup<TRow>) => string | Record<string, boolean>;
+    row: TRow;
+    group: TRow[];
     isSelected: boolean;
     rowIndex: number;
-    displayCheck: any;
-    treeStatus: TreeStatus;
+    displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
+    treeStatus?: TreeStatus;
+    ghostLoadingIndicator: boolean;
+    verticalScrollVisible: boolean;
+    disable$: BehaviorSubject<boolean>;
     set offsetX(val: number);
     get offsetX(): number;
     get cssClass(): string;
     rowHeight: number;
-    get columnsTotalWidths(): string;
-    activate: EventEmitter<any>;
+    get columnsTotalWidths(): number;
+    activate: EventEmitter<ActivateEvent<TRow>>;
     treeAction: EventEmitter<any>;
-    _element: any;
-    _columnGroupWidths: any;
-    _columnsByPin: any;
+    _element: HTMLElement;
+    _columnGroupWidths: ColumnGroupWidth;
+    _columnsByPin: PinnedColumns[];
     _offsetX: number;
-    _columns: any[];
+    _columns: TableColumn[];
     _innerWidth: number;
-    _groupStyles: {
-        [prop: string]: {};
-    };
     private _rowDiffer;
-    constructor(differs: KeyValueDiffers, scrollbarHelper: ScrollbarHelper, cd: ChangeDetectorRef, element: ElementRef);
+    ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;
-    trackByGroups(index: number, colGroup: any): any;
-    columnTrackingFn(index: number, column: any): any;
-    buildStylesByGroup(): void;
-    calcStylesByGroup(group: string): {
-        width: string;
-    };
-    onActivate(event: any, index: number): void;
+    onActivate(event: ActivateEvent<TRow>, index: number): void;
     onKeyDown(event: KeyboardEvent): void;
-    onMouseenter(event: any): void;
-    recalculateColumns(val?: any[]): void;
+    onMouseenter(event: MouseEvent): void;
+    recalculateColumns(val?: TableColumn<TRow>[]): void;
     onTreeAction(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyRowComponent, [null, { skipSelf: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyRowComponent, "datatable-body-row", never, { "columns": "columns"; "innerWidth": "innerWidth"; "expanded": "expanded"; "rowClass": "rowClass"; "row": "row"; "group": "group"; "isSelected": "isSelected"; "rowIndex": "rowIndex"; "displayCheck": "displayCheck"; "treeStatus": "treeStatus"; "offsetX": "offsetX"; "rowHeight": "rowHeight"; }, { "activate": "activate"; "treeAction": "treeAction"; }, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyRowComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyRowComponent<any>, "datatable-body-row", never, { "columns": { "alias": "columns"; "required": false; }; "innerWidth": { "alias": "innerWidth"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "row": { "alias": "row"; "required": false; }; "group": { "alias": "group"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "rowIndex": { "alias": "rowIndex"; "required": false; }; "displayCheck": { "alias": "displayCheck"; "required": false; }; "treeStatus": { "alias": "treeStatus"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; "verticalScrollVisible": { "alias": "verticalScrollVisible"; "required": false; }; "disable$": { "alias": "disable$"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; }, { "activate": "activate"; "treeAction": "treeAction"; }, never, never, true, never>;
 }

package/lib/components/body/body.component.d.ts

@@ -1,57 +1,73 @@
-import { EventEmitter, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, TemplateRef, TrackByFunction } from '@angular/core';
 import { ScrollerComponent } from './scroller.component';
-import { SelectionType } from '../../types/selection.type';
 import { RowHeightCache } from '../../utils/row-height-cache';
+import { TableColumn } from '../../types/table-column.type';
+import { DatatableGroupHeaderDirective } from './body-group-header.directive';
+import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive';
+import { DataTableBodyRowComponent } from './body-row.component';
+import { ColumnGroupWidth } from '../../types/internal.types';
+import { ActivateEvent, DragEventData, Group, RowOrGroup, ScrollEvent, SelectionType, TreeStatus } from '../../types/public.types';
 import * as i0 from "@angular/core";
-export declare class DataTableBodyComponent implements OnInit, OnDestroy {
-    private cd;
+export declare class DataTableBodyComponent<TRow extends {
+    treeStatus?: TreeStatus;
+} = any> implements OnInit, OnDestroy {
+    cd: ChangeDetectorRef;
+    rowDefTemplate?: TemplateRef<any>;
     scrollbarV: boolean;
     scrollbarH: boolean;
     loadingIndicator: boolean;
+    ghostLoadingIndicator: boolean;
     externalPaging: boolean;
     rowHeight: number | 'auto' | ((row?: any) => number);
     offsetX: number;
-    emptyMessage: string;
     selectionType: SelectionType;
     selected: any[];
     rowIdentity: any;
-    rowDetail: any;
-    groupHeader: any;
-    selectCheck: any;
-    displayCheck: any;
+    rowDetail: DatatableRowDetailDirective;
+    groupHeader: DatatableGroupHeaderDirective;
+    selectCheck: (value: TRow, index: number, array: TRow[]) => boolean;
+    displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
     trackByProp: string;
-    rowClass: any;
-    groupedRows: any;
+    rowClass: (row: RowOrGroup<TRow>) => string | Record<string, boolean>;
+    groupedRows: Group<TRow>[];
     groupExpansionDefault: boolean;
     innerWidth: number;
-    groupRowsBy: string;
+    groupRowsBy: keyof TRow;
     virtualization: boolean;
     summaryRow: boolean;
     summaryPosition: string;
     summaryHeight: number;
+    rowDraggable: boolean;
+    rowDragEvents: EventEmitter<DragEventData>;
+    disableRowCheck: (row: TRow) => boolean;
     set pageSize(val: number);
     get pageSize(): number;
-    set rows(val: any[]);
-    get rows(): any[];
-    set columns(val: any[]);
+    set rows(val: TRow[]);
+    get rows(): TRow[];
+    set columns(val: TableColumn[]);
     get columns(): any[];
     set offset(val: number);
     get offset(): number;
     set rowCount(val: number);
     get rowCount(): number;
     get bodyWidth(): string;
-    set bodyHeight(val: any);
-    get bodyHeight(): any;
-    scroll: EventEmitter<any>;
-    page: EventEmitter<any>;
-    activate: EventEmitter<any>;
-    select: EventEmitter<any>;
+    set bodyHeight(val: number | string);
+    get bodyHeight(): number | string;
+    verticalScrollVisible: boolean;
+    scroll: EventEmitter<ScrollEvent>;
+    page: EventEmitter<number>;
+    activate: EventEmitter<ActivateEvent<TRow>>;
+    select: EventEmitter<{
+        selected: TRow[];
+    }>;
     detailToggle: EventEmitter<any>;
     rowContextmenu: EventEmitter<{
         event: MouseEvent;
-        row: any;
+        row: RowOrGroup<TRow>;
+    }>;
+    treeAction: EventEmitter<{
+        row: TRow;
     }>;
-    treeAction: EventEmitter<any>;
     scroller: ScrollerComponent;
     /**
      * Returns if selection is enabled.
@@ -62,31 +78,37 @@ export declare class DataTableBodyComponent implements OnInit, OnDestroy {
      * based on the row heights cache for virtual scroll and virtualization. Other scenarios
      * calculate scroll height automatically (as height will be undefined).
      */
-    get scrollHeight(): number | undefined;
-    rowHeightsCache: RowHeightCache;
-    temp: any[];
+    scrollHeight: import("@angular/core").Signal<number>;
+    rowsToRender: import("@angular/core").Signal<RowOrGroup<TRow>[]>;
+    rowHeightsCache: import("@angular/core").WritableSignal<RowHeightCache>;
     offsetY: number;
-    indexes: any;
-    columnGroupWidths: any;
-    columnGroupWidthsWithoutGroup: any;
-    rowTrackingFn: any;
+    indexes: import("@angular/core").WritableSignal<{
+        first: number;
+        last: number;
+    }>;
+    columnGroupWidths: ColumnGroupWidth;
+    rowTrackingFn: TrackByFunction<RowOrGroup<TRow>>;
     listener: any;
-    rowIndexes: any;
+    rowIndexes: WeakMap<any, any>;
     rowExpansions: any[];
-    _rows: any[];
-    _bodyHeight: any;
-    _columns: any[];
+    _rows: TRow[];
+    _bodyHeight: string;
+    _columns: TableColumn[];
     _rowCount: number;
     _offset: number;
     _pageSize: number;
+    _offsetEvent: number;
+    private _draggedRow;
+    private _draggedRowElement;
     /**
      * Creates an instance of DataTableBodyComponent.
      */
-    constructor(cd: ChangeDetectorRef);
+    constructor();
     /**
      * Called after the constructor, initializing input properties
      */
     ngOnInit(): void;
+    private toggleStateChange;
     /**
      * Called once, before the instance is destroyed.
      */
@@ -107,23 +129,24 @@ export declare class DataTableBodyComponent implements OnInit, OnDestroy {
     /**
      * Updates the rows in the view port
      */
-    updateRows(): void;
+    updateRows(): RowOrGroup<TRow>[];
     /**
      * Get the row height
      */
-    getRowHeight(row: any): number;
+    getRowHeight(row: RowOrGroup<TRow>): number;
     /**
      * @param group the group with all rows
      */
-    getGroupHeight(group: any): number;
+    getGroupHeight(group: Group<TRow>): number;
     /**
      * Calculate row height based on the expanded state of the row.
      */
-    getRowAndDetailHeight(row: any): number;
+    getRowAndDetailHeight(row: TRow): number;
     /**
      * Get the height of the detail row.
      */
-    getDetailRowHeight: (row?: any, index?: any) => number;
+    getDetailRowHeight: (row?: TRow, index?: number) => number;
+    getGroupHeaderRowHeight: (row?: any, index?: any) => number;
     /**
      * 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
@@ -139,26 +162,22 @@ export declare class DataTableBodyComponent implements OnInit, OnDestroy {
      * 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).
      *
-     * @param rows the row that needs to be placed in the 2D space.
      * @returns the CSS3 style to be applied
-     *
-     * @memberOf DataTableBodyComponent
      */
-    getRowsStyles(rows: any): any;
+    rowsStyles: import("@angular/core").Signal<{
+        [klass: string]: any;
+    }[]>;
     /**
      * Calculate bottom summary row offset for scrollbar mode.
      * For more information about cache and offset calculation
-     * see description for `getRowsStyles` method
+     * see description for `rowsStyles` signal
      *
      * @returns the CSS3 style to be applied
-     *
-     * @memberOf DataTableBodyComponent
-     */
-    getBottomSummaryRowStyles(): any;
-    /**
-     * Hides the loading indicator
      */
-    hideIndicator(): void;
+    bottomSummaryRowsStyles: import("@angular/core").Signal<{
+        transform: string;
+        position: string;
+    }>;
     /**
      * Updates the index of the rows in the viewport
      */
@@ -178,7 +197,7 @@ export declare class DataTableBodyComponent implements OnInit, OnDestroy {
      * a part of the row object itself as we have to preserve the expanded row
      * status in case of sorting and filtering of the row set.
      */
-    toggleRowExpansion(row: any): void;
+    toggleRowExpansion(row: TRow): void;
     /**
      * Expand/Collapse all the rows no matter what their state is.
      */
@@ -187,26 +206,26 @@ export declare class DataTableBodyComponent implements OnInit, OnDestroy {
      * Recalculates the table
      */
     recalcLayout(): void;
-    /**
-     * Tracks the column
-     */
-    columnTrackingFn(index: number, column: any): any;
-    /**
-     * Gets the row pinning group styles
-     */
-    stylesByGroup(group: string): {
-        width: string;
-    };
     /**
      * Returns if the row was expanded and set default row expansion when row expansion is empty
      */
-    getRowExpanded(row: any): boolean;
-    getRowExpandedIdx(row: any, expanded: any[]): number;
+    getRowExpanded(row: RowOrGroup<TRow>): boolean;
+    getRowExpandedIdx(row: RowOrGroup<TRow>, expanded: RowOrGroup<TRow>[]): number;
     /**
      * Gets the row index given a row
      */
-    getRowIndex(row: any): number;
-    onTreeAction(row: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyComponent, "datatable-body", never, { "scrollbarV": "scrollbarV"; "scrollbarH": "scrollbarH"; "loadingIndicator": "loadingIndicator"; "externalPaging": "externalPaging"; "rowHeight": "rowHeight"; "offsetX": "offsetX"; "emptyMessage": "emptyMessage"; "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"; "pageSize": "pageSize"; "rows": "rows"; "columns": "columns"; "offset": "offset"; "rowCount": "rowCount"; "bodyHeight": "bodyHeight"; }, { "scroll": "scroll"; "page": "page"; "activate": "activate"; "select": "select"; "detailToggle": "detailToggle"; "rowContextmenu": "rowContextmenu"; "treeAction": "treeAction"; }, never, never>;
+    getRowIndex(row: RowOrGroup<TRow>): number;
+    onTreeAction(row: TRow): void;
+    dragOver(event: DragEvent, dropRow: RowOrGroup<TRow>): void;
+    drag(event: DragEvent, dragRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
+    drop(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
+    dragEnter(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
+    dragLeave(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
+    dragEnd(event: DragEvent, dragRow: RowOrGroup<TRow>): void;
+    updateColumnGroupWidths(): void;
+    protected isGroup(row: RowOrGroup<TRow>[]): row is Group<TRow>[];
+    protected isGroup(row: RowOrGroup<TRow>): row is Group<TRow>;
+    protected isRow(row: RowOrGroup<TRow>): row is TRow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyComponent<any>, "datatable-body", never, { "rowDefTemplate": { "alias": "rowDefTemplate"; "required": false; }; "scrollbarV": { "alias": "scrollbarV"; "required": false; }; "scrollbarH": { "alias": "scrollbarH"; "required": false; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; "externalPaging": { "alias": "externalPaging"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "selectionType": { "alias": "selectionType"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "rowIdentity": { "alias": "rowIdentity"; "required": false; }; "rowDetail": { "alias": "rowDetail"; "required": false; }; "groupHeader": { "alias": "groupHeader"; "required": false; }; "selectCheck": { "alias": "selectCheck"; "required": false; }; "displayCheck": { "alias": "displayCheck"; "required": false; }; "trackByProp": { "alias": "trackByProp"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "groupedRows": { "alias": "groupedRows"; "required": false; }; "groupExpansionDefault": { "alias": "groupExpansionDefault"; "required": false; }; "innerWidth": { "alias": "innerWidth"; "required": false; }; "groupRowsBy": { "alias": "groupRowsBy"; "required": false; }; "virtualization": { "alias": "virtualization"; "required": false; }; "summaryRow": { "alias": "summaryRow"; "required": false; }; "summaryPosition": { "alias": "summaryPosition"; "required": false; }; "summaryHeight": { "alias": "summaryHeight"; "required": false; }; "rowDraggable": { "alias": "rowDraggable"; "required": false; }; "rowDragEvents": { "alias": "rowDragEvents"; "required": false; }; "disableRowCheck": { "alias": "disableRowCheck"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "rowCount": { "alias": "rowCount"; "required": false; }; "bodyHeight": { "alias": "bodyHeight"; "required": false; }; "verticalScrollVisible": { "alias": "verticalScrollVisible"; "required": false; }; }, { "scroll": "scroll"; "page": "page"; "activate": "activate"; "select": "select"; "detailToggle": "detailToggle"; "rowContextmenu": "rowContextmenu"; "treeAction": "treeAction"; }, never, ["[loading-indicator]", "[empty-content]"], true, never>;
 }

package/lib/components/body/ghost-loader/ghost-loader.component.d.ts

@@ -0,0 +1,12 @@
+import { TableColumn } from '../../../types/table-column.type';
+import * as i0 from "@angular/core";
+export declare class DataTableGhostLoaderComponent {
+    columns: TableColumn[];
+    pageSize: number;
+    rowHeight: number | 'auto' | ((row?: any) => number);
+    ghostBodyHeight: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableGhostLoaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableGhostLoaderComponent, "ghost-loader", never, { "columns": { "alias": "columns"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "ghostBodyHeight": { "alias": "ghostBodyHeight"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_pageSize: unknown;
+    static ngAcceptInputType_ghostBodyHeight: unknown;
+}

package/lib/components/body/progress-bar.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ProgressBarComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "datatable-progress", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "datatable-progress", never, {}, {}, never, never, true, never>;
 }