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

package/lib/components/columns/column.directive.d.ts

@@ -1,17 +1,18 @@
-import { TemplateRef, OnChanges } from '@angular/core';
-import { ColumnChangesService } from '../../services/column-changes.service';
-import { TableColumnProp } from '../../types/table-column.type';
+import { OnChanges, PipeTransform, TemplateRef } from '@angular/core';
+import { TableColumn, TableColumnProp } from '../../types/table-column.type';
+import { CellContext, HeaderCellContext } from '../../types/public.types';
 import * as i0 from "@angular/core";
-export declare class DataTableColumnDirective implements OnChanges {
+export declare class DataTableColumnDirective<TRow> implements TableColumn, OnChanges {
     private columnChangesService;
     name: string;
     prop: TableColumnProp;
-    frozenLeft: any;
-    frozenRight: any;
+    bindAsUnsafeHtml?: boolean;
+    frozenLeft: boolean;
+    frozenRight: boolean;
     flexGrow: number;
     resizeable: boolean;
     comparator: any;
-    pipe: any;
+    pipe: PipeTransform;
     sortable: boolean;
     draggable: boolean;
     canAutoResize: boolean;
@@ -20,24 +21,48 @@ export declare class DataTableColumnDirective implements OnChanges {
     maxWidth: number;
     checkboxable: boolean;
     headerCheckboxable: boolean;
-    headerClass: string | ((data: any) => string | any);
-    cellClass: string | ((data: any) => string | any);
+    headerClass: string | ((data: {
+        column: TableColumn;
+    }) => string | Record<string, boolean>);
+    cellClass?: string | ((data: {
+        row: TRow;
+        group?: TRow[];
+        column: TableColumn<TRow>;
+        value: any;
+        rowHeight: number;
+    }) => string | Record<string, boolean>);
     isTreeColumn: boolean;
     treeLevelIndent: number;
     summaryFunc: (cells: any[]) => any;
     summaryTemplate: TemplateRef<any>;
-    _cellTemplateInput: TemplateRef<any>;
-    _cellTemplateQuery: TemplateRef<any>;
-    get cellTemplate(): TemplateRef<any>;
-    _headerTemplateInput: TemplateRef<any>;
-    _headerTemplateQuery: TemplateRef<any>;
-    get headerTemplate(): TemplateRef<any>;
+    _cellTemplateInput: TemplateRef<CellContext<TRow>>;
+    _cellTemplateQuery: TemplateRef<CellContext<TRow>>;
+    get cellTemplate(): TemplateRef<CellContext<TRow>>;
+    _headerTemplateInput: TemplateRef<HeaderCellContext>;
+    _headerTemplateQuery: TemplateRef<HeaderCellContext>;
+    get headerTemplate(): TemplateRef<HeaderCellContext>;
     _treeToggleTemplateInput: TemplateRef<any>;
     _treeToggleTemplateQuery: TemplateRef<any>;
     get treeToggleTemplate(): TemplateRef<any>;
+    _ghostCellTemplateInput: TemplateRef<void>;
+    _ghostCellTemplateQuery: TemplateRef<void>;
+    get ghostCellTemplate(): TemplateRef<void>;
     private isFirstChange;
-    constructor(columnChangesService: ColumnChangesService);
     ngOnChanges(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableColumnDirective, "ngx-datatable-column", never, { "name": "name"; "prop": "prop"; "frozenLeft": "frozenLeft"; "frozenRight": "frozenRight"; "flexGrow": "flexGrow"; "resizeable": "resizeable"; "comparator": "comparator"; "pipe": "pipe"; "sortable": "sortable"; "draggable": "draggable"; "canAutoResize": "canAutoResize"; "minWidth": "minWidth"; "width": "width"; "maxWidth": "maxWidth"; "checkboxable": "checkboxable"; "headerCheckboxable": "headerCheckboxable"; "headerClass": "headerClass"; "cellClass": "cellClass"; "isTreeColumn": "isTreeColumn"; "treeLevelIndent": "treeLevelIndent"; "summaryFunc": "summaryFunc"; "summaryTemplate": "summaryTemplate"; "_cellTemplateInput": "cellTemplate"; "_headerTemplateInput": "headerTemplate"; "_treeToggleTemplateInput": "treeToggleTemplate"; }, {}, ["_cellTemplateQuery", "_headerTemplateQuery", "_treeToggleTemplateQuery"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableColumnDirective<any>, "ngx-datatable-column", never, { "name": { "alias": "name"; "required": false; }; "prop": { "alias": "prop"; "required": false; }; "bindAsUnsafeHtml": { "alias": "bindAsUnsafeHtml"; "required": false; }; "frozenLeft": { "alias": "frozenLeft"; "required": false; }; "frozenRight": { "alias": "frozenRight"; "required": false; }; "flexGrow": { "alias": "flexGrow"; "required": false; }; "resizeable": { "alias": "resizeable"; "required": false; }; "comparator": { "alias": "comparator"; "required": false; }; "pipe": { "alias": "pipe"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "canAutoResize": { "alias": "canAutoResize"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "checkboxable": { "alias": "checkboxable"; "required": false; }; "headerCheckboxable": { "alias": "headerCheckboxable"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "isTreeColumn": { "alias": "isTreeColumn"; "required": false; }; "treeLevelIndent": { "alias": "treeLevelIndent"; "required": false; }; "summaryFunc": { "alias": "summaryFunc"; "required": false; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; }; "_cellTemplateInput": { "alias": "cellTemplate"; "required": false; }; "_headerTemplateInput": { "alias": "headerTemplate"; "required": false; }; "_treeToggleTemplateInput": { "alias": "treeToggleTemplate"; "required": false; }; "_ghostCellTemplateInput": { "alias": "ghostCellTemplate"; "required": false; }; }, {}, ["_cellTemplateQuery", "_headerTemplateQuery", "_treeToggleTemplateQuery", "_ghostCellTemplateQuery"], never, true, never>;
+    static ngAcceptInputType_bindAsUnsafeHtml: unknown;
+    static ngAcceptInputType_frozenLeft: unknown;
+    static ngAcceptInputType_frozenRight: unknown;
+    static ngAcceptInputType_flexGrow: unknown;
+    static ngAcceptInputType_resizeable: unknown;
+    static ngAcceptInputType_sortable: unknown;
+    static ngAcceptInputType_draggable: unknown;
+    static ngAcceptInputType_canAutoResize: unknown;
+    static ngAcceptInputType_minWidth: unknown;
+    static ngAcceptInputType_width: unknown;
+    static ngAcceptInputType_maxWidth: unknown;
+    static ngAcceptInputType_checkboxable: unknown;
+    static ngAcceptInputType_headerCheckboxable: unknown;
+    static ngAcceptInputType_isTreeColumn: unknown;
 }

package/lib/components/columns/tree.directive.d.ts

@@ -2,7 +2,6 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class DataTableColumnCellTreeToggle {
     template: TemplateRef<any>;
-    constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTableColumnCellTreeToggle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableColumnCellTreeToggle, "[ngx-datatable-tree-toggle]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataTableColumnCellTreeToggle, "[ngx-datatable-tree-toggle]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,44 +1,37 @@
-import { ElementRef, EventEmitter, OnInit, QueryList, AfterViewInit, DoCheck, KeyValueDiffers, KeyValueDiffer, ChangeDetectorRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DoCheck, EventEmitter, IterableDiffer, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { DatatableGroupHeaderDirective } from './body/body-group-header.directive';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { INgxDatatableConfig } from '../ngx-datatable.module';
 import { TableColumn } from '../types/table-column.type';
-import { ColumnMode } from '../types/column-mode.type';
-import { SelectionType } from '../types/selection.type';
-import { SortType } from '../types/sort.type';
-import { ContextmenuType } from '../types/contextmenu.type';
 import { DataTableColumnDirective } from './columns/column.directive';
 import { DatatableRowDetailDirective } from './row-detail/row-detail.directive';
 import { DatatableFooterDirective } from './footer/footer.directive';
 import { DataTableBodyComponent } from './body/body.component';
 import { DataTableHeaderComponent } from './header/header.component';
-import { ScrollbarHelper } from '../services/scrollbar-helper.service';
-import { ColumnChangesService } from '../services/column-changes.service';
-import { DimensionsHelper } from '../services/dimensions-helper.service';
+import { ActivateEvent, ColumnMode, ColumnResizeEvent, ContextmenuType, DragEventData, Group, PageEvent, PagerPageEvent, ReorderEvent, RowOrGroup, ScrollEvent, SelectionType, SortEvent, SortPropDir, SortType, TreeStatus } from '../types/public.types';
 import * as i0 from "@angular/core";
-export declare class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
+export declare class DatatableComponent<TRow = any> implements OnInit, DoCheck, AfterViewInit, AfterContentInit, OnDestroy {
     private scrollbarHelper;
-    private dimensionsHelper;
     private cd;
     private columnChangesService;
     private configuration;
     /**
      * Template for the target marker of drag target columns.
      */
-    targetMarkerTemplate: any;
+    targetMarkerTemplate: TemplateRef<unknown>;
     /**
      * Rows that are displayed in the table.
      */
-    set rows(val: any);
+    set rows(val: TRow[] | null | undefined);
     /**
      * Gets the rows.
      */
-    get rows(): any;
+    get rows(): TRow[];
     /**
      * This attribute allows the user to set the name of the column to group the data with
      */
-    set groupRowsBy(val: string);
-    get groupRowsBy(): string;
+    set groupRowsBy(val: keyof TRow);
+    get groupRowsBy(): keyof TRow;
     /**
      * This attribute allows the user to set a grouped array in the following format:
      *  [
@@ -54,7 +47,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      *    ]}
      *  ]
      */
-    groupedRows: any[];
+    groupedRows: Group<TRow>[];
     /**
      * Columns to be displayed.
      */
@@ -68,11 +61,18 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * represented as selected in the grid.
      * Default value: `[]`
      */
-    selected: any[];
+    selected: TRow[];
     /**
      * Enable vertical scrollbars
      */
     scrollbarV: boolean;
+    /**
+     * Enable vertical scrollbars dynamically on demand.
+     * Property `scrollbarV` needs to be set `true` too.
+     * Width that is gained when no scrollbar is needed
+     * is added to the inner table width.
+     */
+    scrollbarVDynamic: boolean;
     /**
      * Enable horz scrollbars
      */
@@ -81,7 +81,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * The row height; which is necessary
      * to calculate the height for the lazy rendering.
      */
-    rowHeight: number | 'auto' | ((row?: any) => number);
+    rowHeight: number | 'auto' | ((row?: TRow) => number);
     /**
      * Type of column width distribution formula.
      * Example: flex, force, standard
@@ -136,6 +136,12 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * Default value: `false`
      */
     loadingIndicator: boolean;
+    /**
+     * Show ghost loaders on each cell.
+     * Default value: `false`
+     */
+    set ghostLoadingIndicator(val: boolean);
+    get ghostLoadingIndicator(): boolean;
     /**
      * Type of row selection. Options are:
      *
@@ -167,11 +173,11 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * Array of sorted columns by property and type.
      * Default value: `[]`
      */
-    sorts: any[];
+    sorts: SortPropDir[];
     /**
      * Css class overrides
      */
-    cssClasses: any;
+    cssClasses: Partial<INgxDatatableConfig['cssClasses']>;
     /**
      * Message overrides for localization
      *
@@ -179,15 +185,13 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * totalMessage     [default] = 'total'
      * selectedMessage  [default] = 'selected'
      */
-    messages: any;
+    messages: Partial<INgxDatatableConfig['messages']>;
     /**
-     * Row specific classes.
-     * Similar implementation to ngClass.
-     *
-     *  [rowClass]="'first second'"
-     *  [rowClass]="{ 'first': true, 'second': true, 'third': false }"
+     * A function which is called with the row and should return either:
+     * - a string: `"class-1 class-2`
+     * - a Record<string, boolean>: `{ 'class-1': true, 'class-2': false }`
      */
-    rowClass: any;
+    rowClass: (row: Group<TRow> | TRow) => string | Record<string, boolean>;
     /**
      * A boolean/function you can use to check whether you want
      * to select a particular row based on a criteria. Example:
@@ -196,7 +200,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      *      return selection !== 'Ethel Price';
      *    }
      */
-    selectCheck: any;
+    selectCheck: (value: TRow, index: number, array: TRow[]) => boolean;
     /**
      * A function you can use to check whether you want
      * to show the checkbox for a particular row based on a criteria. Example:
@@ -205,7 +209,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      *      return row.name !== 'Ethel Price';
      *    }
      */
-    displayCheck: (row: any, column?: any, value?: any) => boolean;
+    displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
     /**
      * 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.
@@ -220,8 +224,6 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
     /**
      * Property to which you can use for determining select all
      * rows on current page or not.
-     *
-     * @memberOf DatatableComponent
      */
     selectAllRowsOnPage: boolean;
     /**
@@ -248,34 +250,56 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * A property holds a summary row position: top/bottom
      */
     summaryPosition: string;
+    /**
+     * A function you can use to check whether you want
+     * to disable a row. Example:
+     *
+     *    (row) => {
+     *      return row.name !== 'Ethel Price';
+     *    }
+     */
+    disableRowCheck: (row: TRow) => boolean;
+    /**
+     * A flag to enable drag behavior of native HTML5 drag and drop API on rows.
+     * If set to true, {@link rowDragEvents} will emit dragstart and dragend events.
+     */
+    rowDraggable: boolean;
+    /**
+     * A flag to controll behavior of sort states.
+     * By default sort on column toggles between ascending and descending without getting removed.
+     * Set true to clear sorting of column after performing ascending and descending sort on that column.
+     */
+    enableClearingSortState: boolean;
     /**
      * Body was scrolled typically in a `scrollbarV:true` scenario.
      */
-    scroll: EventEmitter<any>;
+    scroll: EventEmitter<ScrollEvent>;
     /**
      * A cell or row was focused via keyboard or mouse click.
      */
-    activate: EventEmitter<any>;
+    activate: EventEmitter<ActivateEvent<TRow>>;
     /**
      * A cell or row was selected.
      */
-    select: EventEmitter<any>;
+    select: EventEmitter<{
+        selected: TRow[];
+    }>;
     /**
      * Column sort was invoked.
      */
-    sort: EventEmitter<any>;
+    sort: EventEmitter<SortEvent>;
     /**
      * The table was paged either triggered by the pager or the body scroll.
      */
-    page: EventEmitter<any>;
+    page: EventEmitter<PageEvent>;
     /**
      * Columns were re-ordered.
      */
-    reorder: EventEmitter<any>;
+    reorder: EventEmitter<ReorderEvent>;
     /**
      * Column was resized.
      */
-    resize: EventEmitter<any>;
+    resize: EventEmitter<ColumnResizeEvent>;
     /**
      * The context menu was invoked on the table.
      * type indicates whether the header or the body was clicked.
@@ -284,12 +308,21 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
     tableContextmenu: EventEmitter<{
         event: MouseEvent;
         type: ContextmenuType;
-        content: any;
+        content: TableColumn | RowOrGroup<TRow>;
     }>;
     /**
      * A row was expanded ot collapsed for tree
      */
-    treeAction: EventEmitter<any>;
+    treeAction: EventEmitter<{
+        row: TRow;
+        rowIndex: number;
+    }>;
+    /**
+     * Emits HTML5 native drag events.
+     * Only emits dragenter, dragover, drop events by default.
+     * Set {@link rowDraggble} to true for dragstart and dragend.
+     */
+    rowDragEvents: EventEmitter<DragEventData>;
     /**
      * CSS class applied if the header height if fixed height.
      */
@@ -342,11 +375,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * Column templates gathered from `ContentChildren`
      * if described in your markup.
      */
-    set columnTemplates(val: QueryList<DataTableColumnDirective>);
-    /**
-     * Returns the column templates.
-     */
-    get columnTemplates(): QueryList<DataTableColumnDirective>;
+    columnTemplates: QueryList<DataTableColumnDirective<TRow>>;
     /**
      * Row Detail templates gathered from the ContentChild
      */
@@ -363,14 +392,16 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * Reference to the body component for manually
      * invoking functions on the body.
      */
-    bodyComponent: DataTableBodyComponent;
+    bodyComponent: DataTableBodyComponent<TRow & {
+        treeStatus?: TreeStatus;
+    }>;
     /**
      * Reference to the header component for manually
      * invoking functions on the header.
-     *
-     * @memberOf DatatableComponent
      */
     headerComponent: DataTableHeaderComponent;
+    private bodyElement;
+    rowDefTemplate?: TemplateRef<any>;
     /**
      * Returns if all rows are selected.
      */
@@ -380,19 +411,22 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
     pageSize: number;
     bodyHeight: number;
     rowCount: number;
-    rowDiffer: KeyValueDiffer<{}, {}>;
+    rowDiffer: IterableDiffer<TRow>;
     _offsetX: BehaviorSubject<number>;
     _limit: number | undefined;
     _count: number;
     _offset: number;
-    _rows: any[];
-    _groupRowsBy: string;
-    _internalRows: any[];
+    _rows: TRow[] | null | undefined;
+    _groupRowsBy: keyof TRow;
+    _internalRows: TRow[];
     _internalColumns: TableColumn[];
     _columns: TableColumn[];
-    _columnTemplates: QueryList<DataTableColumnDirective>;
     _subscriptions: Subscription[];
-    constructor(scrollbarHelper: ScrollbarHelper, dimensionsHelper: DimensionsHelper, cd: ChangeDetectorRef, element: ElementRef, differs: KeyValueDiffers, columnChangesService: ColumnChangesService, configuration: INgxDatatableConfig);
+    _ghostLoadingIndicator: boolean;
+    _defaultColumnWidth?: number;
+    protected verticalScrollVisible: boolean;
+    private _rowInitDone;
+    constructor();
     /**
      * Lifecycle hook that is called after data-bound
      * properties of a directive are initialized.
@@ -414,20 +448,20 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      *
      * (`fn(x) === fn(y)` instead of `x === y`)
      */
-    rowIdentity: (x: any) => any;
+    rowIdentity: (x: TRow | Group<TRow>) => unknown;
     /**
      * Translates the templates to the column objects
      */
-    translateColumns(val: any): void;
+    translateColumns(val: QueryList<DataTableColumnDirective<TRow>>): void;
     /**
      * Creates a map with the data grouped by the user choice of grouping index
      *
      * @param originalArray the original array passed via parameter
-     * @param groupByIndex  the index of the column to group the data by
+     * @param groupBy the key of the column to group the data by
      */
-    groupArrayBy(originalArray: any, groupBy: any): {
-        key: any;
-        value: any;
+    groupArrayBy(originalArray: TRow[], groupBy: keyof TRow): {
+        key: TRow[keyof TRow];
+        value: TRow[];
     }[];
     ngDoCheck(): void;
     /**
@@ -450,7 +484,7 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      * Recalulcates the column widths based on column width
      * distribution mode and scrollbar offsets.
      */
-    recalculateColumns(columns?: any[], forceIdx?: number, allowBleed?: boolean): any[] | undefined;
+    recalculateColumns(columns?: TableColumn[], forceIdx?: number, allowBleed?: boolean): TableColumn[] | undefined;
     /**
      * Recalculates the dimensions of the table size.
      * Internally calls the page size and row count calcs too.
@@ -464,55 +498,66 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
     /**
      * Body triggered a page event.
      */
-    onBodyPage({ offset }: any): void;
+    onBodyPage(offset: number): void;
     /**
      * The body triggered a scroll event.
      */
-    onBodyScroll(event: MouseEvent): void;
+    onBodyScroll(event: ScrollEvent): void;
     /**
      * The footer triggered a page event.
      */
-    onFooterPage(event: any): void;
+    onFooterPage(event: PagerPageEvent): void;
     /**
      * Recalculates the sizes of the page
      */
-    calcPageSize(val?: any[]): number;
+    calcPageSize(): number;
     /**
      * Calculates the row count.
      */
-    calcRowCount(val?: any[]): number;
+    calcRowCount(): number;
     /**
      * The header triggered a contextmenu event.
      */
-    onColumnContextmenu({ event, column }: any): void;
+    onColumnContextmenu({ event, column }: {
+        event: MouseEvent;
+        column: TableColumn;
+    }): void;
     /**
      * The body triggered a contextmenu event.
      */
-    onRowContextmenu({ event, row }: any): void;
+    onRowContextmenu({ event, row }: {
+        event: MouseEvent;
+        row: RowOrGroup<TRow>;
+    }): void;
     /**
      * The header triggered a column resize event.
      */
-    onColumnResize({ column, newValue }: any): void;
+    onColumnResize({ column, newValue, prevValue }: ColumnResizeEvent): void;
+    onColumnResizing({ column, newValue }: ColumnResizeEvent): void;
     /**
      * The header triggered a column re-order event.
      */
-    onColumnReorder({ column, newValue, prevValue }: any): void;
+    onColumnReorder({ column, newValue, prevValue }: ReorderEvent): void;
     /**
      * The header triggered a column sort event.
      */
-    onColumnSort(event: any): void;
+    onColumnSort(event: SortEvent): void;
     /**
      * Toggle all row selection
      */
-    onHeaderSelect(event: any): void;
+    onHeaderSelect(): void;
     /**
      * A row was selected from body
      */
-    onBodySelect(event: any): void;
+    onBodySelect(event: {
+        selected: TRow[];
+    }): void;
     /**
      * A row was expanded or collapsed for tree
      */
-    onTreeAction(event: any): void;
+    onTreeAction(event: {
+        row: TRow;
+    }): void;
     ngOnDestroy(): void;
     /**
      * listen for changes to input bindings of all DataTableColumnDirective and
@@ -520,6 +565,27 @@ export declare class DatatableComponent implements OnInit, DoCheck, AfterViewIni
      */
     private listenForColumnInputChanges;
     private sortInternalRows;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableComponent, [{ skipSelf: true; }, { skipSelf: true; }, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableComponent, "ngx-datatable", never, { "targetMarkerTemplate": "targetMarkerTemplate"; "rows": "rows"; "groupRowsBy": "groupRowsBy"; "groupedRows": "groupedRows"; "columns": "columns"; "selected": "selected"; "scrollbarV": "scrollbarV"; "scrollbarH": "scrollbarH"; "rowHeight": "rowHeight"; "columnMode": "columnMode"; "headerHeight": "headerHeight"; "footerHeight": "footerHeight"; "externalPaging": "externalPaging"; "externalSorting": "externalSorting"; "limit": "limit"; "count": "count"; "offset": "offset"; "loadingIndicator": "loadingIndicator"; "selectionType": "selectionType"; "reorderable": "reorderable"; "swapColumns": "swapColumns"; "sortType": "sortType"; "sorts": "sorts"; "cssClasses": "cssClasses"; "messages": "messages"; "rowClass": "rowClass"; "selectCheck": "selectCheck"; "displayCheck": "displayCheck"; "groupExpansionDefault": "groupExpansionDefault"; "trackByProp": "trackByProp"; "selectAllRowsOnPage": "selectAllRowsOnPage"; "virtualization": "virtualization"; "treeFromRelation": "treeFromRelation"; "treeToRelation": "treeToRelation"; "summaryRow": "summaryRow"; "summaryHeight": "summaryHeight"; "summaryPosition": "summaryPosition"; "rowIdentity": "rowIdentity"; }, { "scroll": "scroll"; "activate": "activate"; "select": "select"; "sort": "sort"; "page": "page"; "reorder": "reorder"; "resize": "resize"; "tableContextmenu": "tableContextmenu"; "treeAction": "treeAction"; }, ["rowDetail", "groupHeader", "footer", "columnTemplates"], never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatatableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatatableComponent<any>, "ngx-datatable", never, { "targetMarkerTemplate": { "alias": "targetMarkerTemplate"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "groupRowsBy": { "alias": "groupRowsBy"; "required": false; }; "groupedRows": { "alias": "groupedRows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "scrollbarV": { "alias": "scrollbarV"; "required": false; }; "scrollbarVDynamic": { "alias": "scrollbarVDynamic"; "required": false; }; "scrollbarH": { "alias": "scrollbarH"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "columnMode": { "alias": "columnMode"; "required": false; }; "headerHeight": { "alias": "headerHeight"; "required": false; }; "footerHeight": { "alias": "footerHeight"; "required": false; }; "externalPaging": { "alias": "externalPaging"; "required": false; }; "externalSorting": { "alias": "externalSorting"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "count": { "alias": "count"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; "selectionType": { "alias": "selectionType"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "swapColumns": { "alias": "swapColumns"; "required": false; }; "sortType": { "alias": "sortType"; "required": false; }; "sorts": { "alias": "sorts"; "required": false; }; "cssClasses": { "alias": "cssClasses"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "selectCheck": { "alias": "selectCheck"; "required": false; }; "displayCheck": { "alias": "displayCheck"; "required": false; }; "groupExpansionDefault": { "alias": "groupExpansionDefault"; "required": false; }; "trackByProp": { "alias": "trackByProp"; "required": false; }; "selectAllRowsOnPage": { "alias": "selectAllRowsOnPage"; "required": false; }; "virtualization": { "alias": "virtualization"; "required": false; }; "treeFromRelation": { "alias": "treeFromRelation"; "required": false; }; "treeToRelation": { "alias": "treeToRelation"; "required": false; }; "summaryRow": { "alias": "summaryRow"; "required": false; }; "summaryHeight": { "alias": "summaryHeight"; "required": false; }; "summaryPosition": { "alias": "summaryPosition"; "required": false; }; "disableRowCheck": { "alias": "disableRowCheck"; "required": false; }; "rowDraggable": { "alias": "rowDraggable"; "required": false; }; "enableClearingSortState": { "alias": "enableClearingSortState"; "required": false; }; "rowIdentity": { "alias": "rowIdentity"; "required": false; }; }, { "scroll": "scroll"; "activate": "activate"; "select": "select"; "sort": "sort"; "page": "page"; "reorder": "reorder"; "resize": "resize"; "tableContextmenu": "tableContextmenu"; "treeAction": "treeAction"; "rowDragEvents": "rowDragEvents"; }, ["rowDetail", "groupHeader", "footer", "rowDefTemplate", "columnTemplates"], ["[loading-indicator]", "[empty-content]"], true, never>;
+    static ngAcceptInputType_scrollbarV: unknown;
+    static ngAcceptInputType_scrollbarVDynamic: unknown;
+    static ngAcceptInputType_scrollbarH: unknown;
+    static ngAcceptInputType_headerHeight: unknown;
+    static ngAcceptInputType_footerHeight: unknown;
+    static ngAcceptInputType_externalPaging: unknown;
+    static ngAcceptInputType_externalSorting: unknown;
+    static ngAcceptInputType_limit: unknown;
+    static ngAcceptInputType_count: unknown;
+    static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_loadingIndicator: unknown;
+    static ngAcceptInputType_ghostLoadingIndicator: unknown;
+    static ngAcceptInputType_reorderable: unknown;
+    static ngAcceptInputType_swapColumns: unknown;
+    static ngAcceptInputType_groupExpansionDefault: unknown;
+    static ngAcceptInputType_selectAllRowsOnPage: unknown;
+    static ngAcceptInputType_virtualization: unknown;
+    static ngAcceptInputType_summaryRow: unknown;
+    static ngAcceptInputType_summaryHeight: unknown;
+    static ngAcceptInputType_rowDraggable: unknown;
+    static ngAcceptInputType_enableClearingSortState: unknown;
 }

package/lib/components/footer/footer-template.directive.d.ts

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

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { DatatableFooterDirective } from './footer.directive';
+import { PagerPageEvent } from '../../types/public.types';
 import * as i0 from "@angular/core";
 export declare class DataTableFooterComponent {
     footerHeight: number;
@@ -14,9 +15,9 @@ export declare class DataTableFooterComponent {
     footerTemplate: DatatableFooterDirective;
     selectedCount: number;
     selectedMessage: string | boolean;
-    page: EventEmitter<any>;
+    page: EventEmitter<PagerPageEvent>;
     get isVisible(): boolean;
     get curPage(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTableFooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableFooterComponent, "datatable-footer", never, { "footerHeight": "footerHeight"; "rowCount": "rowCount"; "pageSize": "pageSize"; "offset": "offset"; "pagerLeftArrowIcon": "pagerLeftArrowIcon"; "pagerRightArrowIcon": "pagerRightArrowIcon"; "pagerPreviousIcon": "pagerPreviousIcon"; "pagerNextIcon": "pagerNextIcon"; "totalMessage": "totalMessage"; "footerTemplate": "footerTemplate"; "selectedCount": "selectedCount"; "selectedMessage": "selectedMessage"; }, { "page": "page"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableFooterComponent, "datatable-footer", never, { "footerHeight": { "alias": "footerHeight"; "required": false; }; "rowCount": { "alias": "rowCount"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "pagerLeftArrowIcon": { "alias": "pagerLeftArrowIcon"; "required": false; }; "pagerRightArrowIcon": { "alias": "pagerRightArrowIcon"; "required": false; }; "pagerPreviousIcon": { "alias": "pagerPreviousIcon"; "required": false; }; "pagerNextIcon": { "alias": "pagerNextIcon"; "required": false; }; "totalMessage": { "alias": "totalMessage"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "selectedCount": { "alias": "selectedCount"; "required": false; }; "selectedMessage": { "alias": "selectedMessage"; "required": false; }; }, { "page": "page"; }, never, never, true, never>;
 }

package/lib/components/footer/footer.directive.d.ts

@@ -1,4 +1,5 @@
 import { TemplateRef } from '@angular/core';
+import { FooterContext } from '../../types/public.types';
 import * as i0 from "@angular/core";
 export declare class DatatableFooterDirective {
     footerHeight: number;
@@ -8,9 +9,10 @@ export declare class DatatableFooterDirective {
     pagerRightArrowIcon: string;
     pagerPreviousIcon: string;
     pagerNextIcon: string;
-    _templateInput: TemplateRef<any>;
-    _templateQuery: TemplateRef<any>;
-    get template(): TemplateRef<any>;
+    _templateInput: TemplateRef<FooterContext>;
+    _templateQuery: TemplateRef<FooterContext>;
+    get template(): TemplateRef<FooterContext>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatatableFooterDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableFooterDirective, "ngx-datatable-footer", never, { "footerHeight": "footerHeight"; "totalMessage": "totalMessage"; "selectedMessage": "selectedMessage"; "pagerLeftArrowIcon": "pagerLeftArrowIcon"; "pagerRightArrowIcon": "pagerRightArrowIcon"; "pagerPreviousIcon": "pagerPreviousIcon"; "pagerNextIcon": "pagerNextIcon"; "_templateInput": "template"; }, {}, ["_templateQuery"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatatableFooterDirective, "ngx-datatable-footer", never, { "footerHeight": { "alias": "footerHeight"; "required": false; }; "totalMessage": { "alias": "totalMessage"; "required": false; }; "selectedMessage": { "alias": "selectedMessage"; "required": false; }; "pagerLeftArrowIcon": { "alias": "pagerLeftArrowIcon"; "required": false; }; "pagerRightArrowIcon": { "alias": "pagerRightArrowIcon"; "required": false; }; "pagerPreviousIcon": { "alias": "pagerPreviousIcon"; "required": false; }; "pagerNextIcon": { "alias": "pagerNextIcon"; "required": false; }; "_templateInput": { "alias": "template"; "required": false; }; }, {}, ["_templateQuery"], never, true, never>;
+    static ngAcceptInputType_footerHeight: unknown;
 }