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

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;
 }

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

@@ -1,4 +1,6 @@
 import { EventEmitter } from '@angular/core';
+import { PagerPageEvent } from '../../types/public.types';
+import { Page } from '../../types/internal.types';
 import * as i0 from "@angular/core";
 export declare class DataTablePagerComponent {
     pagerLeftArrowIcon: string;
@@ -12,17 +14,17 @@ export declare class DataTablePagerComponent {
     set page(val: number);
     get page(): number;
     get totalPages(): number;
-    change: EventEmitter<any>;
+    change: EventEmitter<PagerPageEvent>;
     _count: number;
     _page: number;
     _size: number;
-    pages: any;
+    pages: Page[];
     canPrevious(): boolean;
     canNext(): boolean;
     prevPage(): void;
     nextPage(): void;
     selectPage(page: number): void;
-    calcPages(page?: number): any[];
+    calcPages(page?: number): Page[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTablePagerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTablePagerComponent, "datatable-pager", never, { "pagerLeftArrowIcon": "pagerLeftArrowIcon"; "pagerRightArrowIcon": "pagerRightArrowIcon"; "pagerPreviousIcon": "pagerPreviousIcon"; "pagerNextIcon": "pagerNextIcon"; "size": "size"; "count": "count"; "page": "page"; }, { "change": "change"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTablePagerComponent, "datatable-pager", never, { "pagerLeftArrowIcon": { "alias": "pagerLeftArrowIcon"; "required": false; }; "pagerRightArrowIcon": { "alias": "pagerRightArrowIcon"; "required": false; }; "pagerPreviousIcon": { "alias": "pagerPreviousIcon"; "required": false; }; "pagerNextIcon": { "alias": "pagerNextIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "count": { "alias": "count"; "required": false; }; "page": { "alias": "page"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }

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

@@ -1,18 +1,17 @@
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { SortType } from '../../types/sort.type';
-import { SelectionType } from '../../types/selection.type';
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { TableColumn } from '../../types/table-column.type';
-import { SortDirection } from '../../types/sort-direction.type';
+import { HeaderCellContext, InnerSortEvent, SelectionType, SortDirection, SortPropDir, SortType } from '../../types/public.types';
 import * as i0 from "@angular/core";
-export declare class DataTableHeaderCellComponent {
+export declare class DataTableHeaderCellComponent implements OnInit {
     private cd;
     sortType: SortType;
     sortAscendingIcon: string;
     sortDescendingIcon: string;
     sortUnsetIcon: string;
     isTarget: boolean;
-    targetMarkerTemplate: any;
+    targetMarkerTemplate: TemplateRef<any>;
     targetMarkerContext: any;
+    enableClearingSortState: boolean;
     _allRowsSelected: boolean;
     set allRowsSelected(value: boolean);
     get allRowsSelected(): boolean;
@@ -20,33 +19,34 @@ export declare class DataTableHeaderCellComponent {
     set column(column: TableColumn);
     get column(): TableColumn;
     headerHeight: number;
-    set sorts(val: any[]);
-    get sorts(): any[];
-    sort: EventEmitter<any>;
-    select: EventEmitter<any>;
+    set sorts(val: SortPropDir[]);
+    get sorts(): SortPropDir[];
+    sort: EventEmitter<InnerSortEvent>;
+    select: EventEmitter<void>;
     columnContextmenu: EventEmitter<{
         event: MouseEvent;
-        column: any;
+        column: TableColumn;
     }>;
-    get columnCssClasses(): any;
+    get columnCssClasses(): string;
     get name(): string;
     get minWidth(): number;
     get maxWidth(): number;
     get width(): number;
+    get tabindex(): number;
     get isCheckboxable(): boolean;
-    sortFn: any;
     sortClass: string;
     sortDir: SortDirection;
-    selectFn: any;
-    cellContext: any;
+    cellContext: HeaderCellContext;
     private _column;
     private _sorts;
-    constructor(cd: ChangeDetectorRef);
+    constructor();
     onContextmenu($event: MouseEvent): void;
+    enter(): void;
     ngOnInit(): void;
-    calcSortDir(sorts: any[]): any;
+    calcSortDir(sorts: SortPropDir[]): any;
+    private totalSortStatesApplied;
     onSort(): void;
     calcSortClass(sortDir: SortDirection): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTableHeaderCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableHeaderCellComponent, "datatable-header-cell", never, { "sortType": "sortType"; "sortAscendingIcon": "sortAscendingIcon"; "sortDescendingIcon": "sortDescendingIcon"; "sortUnsetIcon": "sortUnsetIcon"; "isTarget": "isTarget"; "targetMarkerTemplate": "targetMarkerTemplate"; "targetMarkerContext": "targetMarkerContext"; "allRowsSelected": "allRowsSelected"; "selectionType": "selectionType"; "column": "column"; "headerHeight": "headerHeight"; "sorts": "sorts"; }, { "sort": "sort"; "select": "select"; "columnContextmenu": "columnContextmenu"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableHeaderCellComponent, "datatable-header-cell", never, { "sortType": { "alias": "sortType"; "required": false; }; "sortAscendingIcon": { "alias": "sortAscendingIcon"; "required": false; }; "sortDescendingIcon": { "alias": "sortDescendingIcon"; "required": false; }; "sortUnsetIcon": { "alias": "sortUnsetIcon"; "required": false; }; "isTarget": { "alias": "isTarget"; "required": false; }; "targetMarkerTemplate": { "alias": "targetMarkerTemplate"; "required": false; }; "targetMarkerContext": { "alias": "targetMarkerContext"; "required": false; }; "enableClearingSortState": { "alias": "enableClearingSortState"; "required": false; }; "allRowsSelected": { "alias": "allRowsSelected"; "required": false; }; "selectionType": { "alias": "selectionType"; "required": false; }; "column": { "alias": "column"; "required": false; }; "headerHeight": { "alias": "headerHeight"; "required": false; }; "sorts": { "alias": "sorts"; "required": false; }; }, { "sort": "sort"; "select": "select"; "columnContextmenu": "columnContextmenu"; }, never, never, true, never>;
 }