@siemens/ngx-datatable
Version:
ngx-datatable is an Angular table grid component for presenting large and complex data.
1,169 lines (1,151 loc) • 57.6 kB
TypeScript
import * as _angular_core from '@angular/core';
import { Provider, PipeTransform, TemplateRef, Signal, OnInit, DoCheck, AfterViewInit, OnDestroy, IterableDiffer, ViewContainerRef, ModuleWithProviders } from '@angular/core';
import * as _siemens_ngx_datatable from '@siemens/ngx-datatable';
import { Subscription } from 'rxjs';
/** Interface for messages to override default table texts. */
interface NgxDatatableMessages {
/** Message to show when the array is present but empty */
emptyMessage: string;
/** Footer total message */
totalMessage: string;
/** Footer selected message */
selectedMessage: string;
/** Pager screen reader message for the first page button */
ariaFirstPageMessage: string;
/**
* Pager screen reader message for the n-th page button.
* It will be rendered as: `{{ariaPageNMessage}} {{n}}`.
*/
ariaPageNMessage: string;
/** Pager screen reader message for the previous page button */
ariaPreviousPageMessage: string;
/** Pager screen reader message for the next page button */
ariaNextPageMessage: string;
/** Pager screen reader message for the last page button */
ariaLastPageMessage: string;
/** Row checkbox aria label */
ariaRowCheckboxMessage: string;
/** Header checkbox aria label */
ariaHeaderCheckboxMessage: string;
/** Group header checkbox aria label */
ariaGroupHeaderCheckboxMessage: string;
}
/** CSS classes for icons that override the default table icons. */
interface NgxDatatableCssClasses {
sortAscending: string;
sortDescending: string;
sortUnset: string;
pagerLeftArrow: string;
pagerRightArrow: string;
pagerPrevious: string;
pagerNext: string;
treeStatusLoading: string;
treeStatusExpanded: string;
treeStatusCollapsed: string;
}
/**
* Interface definition for ngx-datatable global configuration
*/
interface NgxDatatableConfig {
messages?: NgxDatatableMessages;
cssClasses?: NgxDatatableCssClasses;
headerHeight?: number;
footerHeight?: number;
rowHeight?: number;
defaultColumnWidth?: number;
}
/**
* This makes all properties recursively optional.
*
* @internal
*/
type AllPartial<T> = {
[K in keyof T]?: AllPartial<T[K]>;
};
/**
* Provides a global configuration for ngx-datatable.
*
* @param overrides The overrides of the table configuration.
*/
declare const providedNgxDatatableConfig: (overrides: AllPartial<NgxDatatableConfig>) => Provider;
/**
* Column property that indicates how to retrieve this column's
* value from a row.
* 'a.deep.value', 'normalprop', 0 (numeric)
*/
type TableColumnProp = string | number;
/**
* Column Type
*/
interface TableColumn<TRow extends Row = any> {
/**
* Determines if column is checkbox
*/
checkboxable?: boolean;
/**
* Determines if the column is frozen to the left
*/
frozenLeft?: boolean;
/**
* Determines if the column is frozen to the right
*/
frozenRight?: boolean;
/**
* The grow factor relative to other columns. Same as the flex-grow
* API from http =//www.w3.org/TR/css3-flexbox/. Basically;
* take any available extra width and distribute it proportionally
* according to all columns' flexGrow values.
*/
flexGrow?: number;
/**
* Min width of the column
*/
minWidth?: number;
/**
* Max width of the column
*/
maxWidth?: number;
/**
* The default width of the column, in pixels
*/
width?: number;
/**
* Can the column be resized
*/
resizeable?: boolean;
/**
* Custom sort comparator
*/
comparator?: (valueA: any, valueB: any, rowA: TRow, rowB: TRow) => number;
/**
* Custom pipe transforms
*/
pipe?: PipeTransform;
/**
* Can the column be sorted
*/
sortable?: boolean;
/**
* Can the column be re-arranged by dragging
*/
draggable?: boolean;
/**
* Whether the column can automatically resize to fill space in the table.
*/
canAutoResize?: boolean;
/**
* Column name or label
*/
name?: string;
/**
* Property to bind to the row. Example:
*
* `someField` or `some.field.nested`, 0 (numeric)
*
* If left blank, will use the name as camel case conversion
*/
prop?: TableColumnProp;
/**
* By default, the property is bound using normal data binding `<span>{{content}}</span>`.
* If this property is set to true, the property will be bound as `<span [innerHTML]="content" />`.
*
* **DANGER** If enabling this feature, make sure the source of the data is trusted. This can be a vector for HTML injection attacks.
*/
bindAsUnsafeHtml?: boolean;
/**
* Cell template ref
*/
cellTemplate?: TemplateRef<CellContext<TRow>>;
/**
* Ghost Cell template ref
*/
ghostCellTemplate?: TemplateRef<any>;
/**
* Header template ref
*/
headerTemplate?: TemplateRef<HeaderCellContext>;
/**
* Tree toggle template ref
*/
treeToggleTemplate?: any;
/**
* CSS Classes for the cell
*/
cellClass?: string | ((data: {
row: TRow;
group?: TRow[];
column: TableColumn<TRow>;
value: any;
rowHeight: number;
}) => string | Record<string, boolean>);
/**
* CSS classes for the header
*/
headerClass?: string | ((data: {
column: TableColumn;
}) => string | Record<string, boolean>);
/**
* Header checkbox enabled
*/
headerCheckboxable?: boolean;
/**
* Is tree displayed on this column
*/
isTreeColumn?: boolean;
/**
* Width of the tree level indent
*/
treeLevelIndent?: number;
/**
* Summary function
*
* Null and undefined have different meanings:
* - undefined will use the default summary function
* - null will not compute a summary
*/
summaryFunc?: ((cells: any[]) => any) | null;
/**
* Summary cell template ref
*/
summaryTemplate?: TemplateRef<any>;
}
interface SortPropDir {
dir: SortDirection | 'desc' | 'asc';
prop: TableColumnProp;
}
/**
* @deprecated The constant `SortDirection` should no longer be used. Instead use the value directly:
* ```
* // old
* const sortDir: SortDirection = SortDirection.asc;
* // new
* const sortDir: SortDirection = 'asc';
* ```
*/
declare const SortDirection: {
readonly asc: "asc";
readonly desc: "desc";
};
type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];
/** @deprecated See {@link DatatableComponent.sort} */
interface SortEvent {
column: TableColumn;
prevValue: SortDirection | undefined;
newValue: SortDirection | undefined;
sorts: SortPropDir[];
}
/**
* @deprecated The constant `SortType` should no longer be used. Instead use the value directly:
* ```
* // old
* const sortType: SortType = SortType.single;
* // new
* const sortType: SortType = 'single';
* ```
*/
declare const SortType: {
readonly single: "single";
readonly multi: "multi";
};
type SortType = (typeof SortType)[keyof typeof SortType];
/**
* @deprecated The constant `ColumnMode` should no longer be used. Instead use the value directly:
* ```
* // old
* <ngx-datatable [columnMode]="ColumnMode.force"></ngx-datatable>
* // new
* <ngx-datatable [columnMode]="'force'"></ngx-datatable>
* ```
*/
declare const ColumnMode: {
readonly standard: "standard";
readonly flex: "flex";
readonly force: "force";
};
type ColumnMode = (typeof ColumnMode)[keyof typeof ColumnMode];
type TreeStatus = 'collapsed' | 'expanded' | 'loading' | 'disabled';
interface ActivateEvent<TRow> {
type: 'checkbox' | 'click' | 'dblclick' | 'keydown' | 'mouseenter';
event: Event;
row: TRow;
group?: TRow[];
rowHeight?: number;
column?: TableColumn;
value?: any;
cellElement?: HTMLElement;
treeStatus?: TreeStatus;
cellIndex?: number;
rowElement: HTMLElement;
}
interface HeaderCellContext {
column: TableColumn;
sortDir: SortDirection | 'asc' | 'desc' | undefined;
sortFn: () => void;
allRowsSelected?: boolean;
selectFn: () => void;
}
interface GroupContext<TRow extends Row = any> {
group: Group<TRow>;
expanded: boolean;
rowIndex: number;
}
interface CellContext<TRow extends Row = any> {
onCheckboxChangeFn: (event: Event) => void;
activateFn: (event: ActivateEvent<TRow>) => void;
row: TRow;
group?: TRow[];
value: any;
column: TableColumn;
rowHeight: number;
isSelected?: boolean;
rowIndex: number;
rowInGroupIndex?: number;
treeStatus?: TreeStatus;
disabled?: boolean;
onTreeAction: () => void;
expanded?: boolean;
}
interface FooterContext {
rowCount: number;
pageSize: number;
selectedCount: number;
curPage: number;
offset: number;
}
/**
* @deprecated The constant `ContextmenuType` should no longer be used. Instead use the value directly:
* ```
* // old
* const contextmenuType: ContextmenuType = ContextmenuType.header;
* // new
* const contextmenuType: ContextmenuType = 'header';
* ```
*/
declare const ContextmenuType: {
readonly header: "header";
readonly body: "body";
};
type ContextmenuType = (typeof ContextmenuType)[keyof typeof ContextmenuType];
/** A Group row */
interface Group<TRow> {
/** The value by which to rows are grouped. */
key: TRow[keyof TRow];
/** All rows that are part of the group. */
value: TRow[];
}
/** Type for either a row or a group */
type RowOrGroup<TRow> = TRow | Group<TRow>;
interface RowDetailContext<TRow extends Row = any> {
row: TRow;
expanded: boolean;
rowIndex: number;
disabled?: boolean;
}
/**
* Consumer provided rows should extend this interface
* to get access to implicit row properties which are set by the datatable if required.
*/
interface Row {
[key: TableColumnProp]: any;
treeStatus?: TreeStatus;
level?: number;
}
interface ReorderEvent {
column: TableColumn;
prevValue: number;
newValue: number;
}
interface PageEvent {
count: number;
pageSize: number;
/** @deprecated Use {@link pageSize} instead. */
limit: number | undefined;
offset: number;
sorts: SortPropDir[];
}
interface PagerPageEvent {
page: number;
}
interface ColumnResizeEvent {
column: TableColumn;
prevValue: number;
newValue: number;
}
interface ScrollEvent {
offsetY: number;
offsetX: number;
}
interface GroupToggleEvent<TRow> {
type: 'group';
value: Group<TRow>;
}
interface AllGroupsToggleEvent {
type: 'all';
value: boolean;
}
type GroupToggleEvents<TRow> = GroupToggleEvent<TRow> | AllGroupsToggleEvent;
interface DetailToggleEvent<TRow> {
type: 'row';
value: TRow;
}
interface AllDetailToggleEvent {
type: 'all';
value: boolean;
}
type DetailToggleEvents<TRow> = DetailToggleEvent<TRow> | AllDetailToggleEvent;
/**
* @deprecated The constant `SelectionType` should no longer be used. Instead use the value directly:
* ```
* // old
* <ngx-datatable [selectionType]="SelectionType.multi"></ngx-datatable>
* // new
* <ngx-datatable [selectionType]="'multi'"></ngx-datatable>
* ```
*/
declare const SelectionType: {
readonly single: "single";
readonly multi: "multi";
readonly multiClick: "multiClick";
readonly cell: "cell";
readonly checkbox: "checkbox";
};
type SelectionType = (typeof SelectionType)[keyof typeof SelectionType];
/** @deprecated. Use two-way binding instead. See {@link DatatableComponent.select} */
interface SelectEvent<TRow> {
selected: TRow[];
}
interface ContextMenuEventBody<TRow> {
event: MouseEvent;
type: 'body';
content: RowOrGroup<TRow>;
}
interface ContextMenuEvenHeader {
event: MouseEvent;
type: 'header';
content: TableColumn;
}
type ContextMenuEvent<TRow> = ContextMenuEventBody<TRow> | ContextMenuEvenHeader;
type DragEventType = 'drag' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'dragstart' | 'drop';
interface DragEventData {
event: DragEvent;
srcElement: HTMLElement;
targetElement?: HTMLElement;
eventType: DragEventType;
dragRow: any;
dropRow?: any;
}
declare class DataTableFooterTemplateDirective {
static ngTemplateContextGuard(directive: DataTableFooterTemplateDirective, context: unknown): context is FooterContext;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableFooterTemplateDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableFooterTemplateDirective, "[ngx-datatable-footer-template]", never, {}, {}, never, never, true, never>;
}
type ValueGetter = (obj: any, prop: TableColumnProp) => any;
interface ColumnResizeEventInternal {
column: TableColumnInternal;
prevValue: number;
newValue: number;
}
interface ReorderEventInternal {
column: TableColumnInternal;
prevValue: number;
newValue: number;
}
interface Page {
number: number;
text: string;
}
interface BaseTableColumnInternal<TRow extends Row = any> extends TableColumn<TRow> {
/** Internal unique id */
$$id: string;
/** Internal for column width distributions */
$$oldWidth?: number;
/** Internal for setColumnDefaults */
$$valueGetter: ValueGetter;
dragging?: boolean;
isTarget?: boolean;
targetMarkerContext?: any;
name: string;
width: number;
}
interface StandardTableColumnInternal<TRow extends Row = any> extends BaseTableColumnInternal<TRow> {
sortable?: false;
}
interface SortableTableColumnInternal<TRow extends Row = any> extends BaseTableColumnInternal<TRow> {
comparator: Exclude<TableColumn['comparator'], undefined>;
prop: TableColumnProp;
sortable: true;
}
type TableColumnInternal<TRow extends Row = any> = StandardTableColumnInternal<TRow> | SortableTableColumnInternal<TRow>;
declare class DatatableGroupHeaderDirective<TRow extends Row = any> {
/**
* Row height is required when virtual scroll is enabled.
*/
readonly rowHeight: _angular_core.InputSignal<number | ((group?: Group<TRow>, index?: number) => number)>;
/**
* Show checkbox at group header to select all rows of the group.
*/
readonly checkboxable: _angular_core.InputSignal<boolean>;
readonly _templateInput: _angular_core.InputSignal<TemplateRef<GroupContext<TRow>> | undefined>;
readonly _templateQuery: _angular_core.Signal<TemplateRef<any> | undefined>;
readonly template: _angular_core.Signal<TemplateRef<any> | null>;
/**
* Track toggling of group visibility
*/
readonly toggle: _angular_core.OutputEmitterRef<GroupToggleEvents<TRow>>;
/**
* Toggle the expansion of a group
*/
toggleExpandGroup(group: Group<TRow>): void;
/**
* Expand all groups
*/
expandAllGroups(): void;
/**
* Collapse all groups
*/
collapseAllGroups(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableGroupHeaderDirective<any>, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DatatableGroupHeaderDirective<any>, "ngx-datatable-group-header", never, { "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "checkboxable": { "alias": "checkboxable"; "required": false; "isSignal": true; }; "_templateInput": { "alias": "template"; "required": false; "isSignal": true; }; }, { "toggle": "toggle"; }, ["_templateQuery"], never, true, never>;
}
declare class DataTableColumnDirective<TRow extends Row> {
readonly name: _angular_core.InputSignal<string | undefined>;
readonly prop: _angular_core.InputSignal<TableColumnProp | undefined>;
readonly bindAsUnsafeHtml: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly frozenLeft: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly frozenRight: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly flexGrow: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
readonly resizeable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
readonly comparator: _angular_core.InputSignal<((valueA: any, valueB: any, rowA: TRow, rowB: TRow) => number) | undefined>;
readonly pipe: _angular_core.InputSignal<PipeTransform | undefined>;
readonly sortable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
readonly draggable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
readonly canAutoResize: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
readonly minWidth: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
readonly width: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
readonly maxWidth: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
readonly checkboxable: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly headerCheckboxable: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly headerClass: _angular_core.InputSignal<string | ((data: {
column: TableColumn;
}) => string | Record<string, boolean>) | undefined>;
readonly cellClass: _angular_core.InputSignal<string | ((data: {
row: TRow;
group?: TRow[];
column: TableColumn<TRow>;
value: any;
rowHeight: number;
}) => string | Record<string, boolean>) | undefined>;
readonly isTreeColumn: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly treeLevelIndent: _angular_core.InputSignal<number | undefined>;
readonly summaryFunc: _angular_core.InputSignal<((cells: any[]) => any) | undefined>;
readonly summaryTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
readonly cellTemplateInput: _angular_core.InputSignal<TemplateRef<CellContext<TRow>> | undefined>;
readonly cellTemplateQuery: Signal<TemplateRef<any> | undefined>;
readonly headerTemplateInput: _angular_core.InputSignal<TemplateRef<HeaderCellContext> | undefined>;
readonly headerTemplateQuery: Signal<TemplateRef<any> | undefined>;
readonly treeToggleTemplateInput: _angular_core.InputSignal<TemplateRef<any> | undefined>;
readonly treeToggleTemplateQuery: Signal<TemplateRef<any> | undefined>;
readonly ghostCellTemplateInput: _angular_core.InputSignal<TemplateRef<void> | undefined>;
readonly ghostCellTemplateQuery: Signal<TemplateRef<any> | undefined>;
/**
* Computed property that returns the column configuration as a TableColumn object
*/
readonly column: Signal<TableColumn<TRow>>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableColumnDirective<any>, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableColumnDirective<any>, "ngx-datatable-column", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "prop": { "alias": "prop"; "required": false; "isSignal": true; }; "bindAsUnsafeHtml": { "alias": "bindAsUnsafeHtml"; "required": false; "isSignal": true; }; "frozenLeft": { "alias": "frozenLeft"; "required": false; "isSignal": true; }; "frozenRight": { "alias": "frozenRight"; "required": false; "isSignal": true; }; "flexGrow": { "alias": "flexGrow"; "required": false; "isSignal": true; }; "resizeable": { "alias": "resizeable"; "required": false; "isSignal": true; }; "comparator": { "alias": "comparator"; "required": false; "isSignal": true; }; "pipe": { "alias": "pipe"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "canAutoResize": { "alias": "canAutoResize"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "checkboxable": { "alias": "checkboxable"; "required": false; "isSignal": true; }; "headerCheckboxable": { "alias": "headerCheckboxable"; "required": false; "isSignal": true; }; "headerClass": { "alias": "headerClass"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "isTreeColumn": { "alias": "isTreeColumn"; "required": false; "isSignal": true; }; "treeLevelIndent": { "alias": "treeLevelIndent"; "required": false; "isSignal": true; }; "summaryFunc": { "alias": "summaryFunc"; "required": false; "isSignal": true; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; "isSignal": true; }; "cellTemplateInput": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "headerTemplateInput": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "treeToggleTemplateInput": { "alias": "treeToggleTemplate"; "required": false; "isSignal": true; }; "ghostCellTemplateInput": { "alias": "ghostCellTemplate"; "required": false; "isSignal": true; }; }, {}, ["cellTemplateQuery", "headerTemplateQuery", "treeToggleTemplateQuery", "ghostCellTemplateQuery"], never, true, never>;
}
declare class DatatableFooterDirective {
readonly _templateInput: _angular_core.InputSignal<TemplateRef<FooterContext> | undefined>;
private readonly _templateQuery;
readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableFooterDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DatatableFooterDirective, "ngx-datatable-footer", never, { "_templateInput": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, ["_templateQuery"], never, true, never>;
}
declare class DataTableFooterComponent {
readonly footerHeight: _angular_core.InputSignal<number>;
readonly rowCount: _angular_core.InputSignal<number>;
readonly groupCount: _angular_core.InputSignal<number | undefined>;
readonly pageSize: _angular_core.InputSignal<number>;
readonly offset: _angular_core.InputSignal<number>;
readonly pagerLeftArrowIcon: _angular_core.InputSignal<string | undefined>;
readonly pagerRightArrowIcon: _angular_core.InputSignal<string | undefined>;
readonly pagerPreviousIcon: _angular_core.InputSignal<string | undefined>;
readonly pagerNextIcon: _angular_core.InputSignal<string | undefined>;
readonly totalMessage: _angular_core.InputSignal<string>;
readonly footerTemplate: _angular_core.InputSignal<DatatableFooterDirective | undefined>;
readonly selectedCount: _angular_core.InputSignal<number>;
readonly selectedMessage: _angular_core.InputSignal<string | boolean | undefined>;
readonly page: _angular_core.OutputEmitterRef<PagerPageEvent>;
protected readonly isVisible: Signal<boolean>;
readonly curPage: Signal<number>;
protected readonly templateContext: Signal<FooterContext>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableFooterComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTableFooterComponent, "datatable-footer", never, { "footerHeight": { "alias": "footerHeight"; "required": true; "isSignal": true; }; "rowCount": { "alias": "rowCount"; "required": true; "isSignal": true; }; "groupCount": { "alias": "groupCount"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": true; "isSignal": true; }; "offset": { "alias": "offset"; "required": true; "isSignal": true; }; "pagerLeftArrowIcon": { "alias": "pagerLeftArrowIcon"; "required": false; "isSignal": true; }; "pagerRightArrowIcon": { "alias": "pagerRightArrowIcon"; "required": false; "isSignal": true; }; "pagerPreviousIcon": { "alias": "pagerPreviousIcon"; "required": false; "isSignal": true; }; "pagerNextIcon": { "alias": "pagerNextIcon"; "required": false; "isSignal": true; }; "totalMessage": { "alias": "totalMessage"; "required": true; "isSignal": true; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; "isSignal": true; }; "selectedCount": { "alias": "selectedCount"; "required": false; "isSignal": true; }; "selectedMessage": { "alias": "selectedMessage"; "required": false; "isSignal": true; }; }, { "page": "page"; }, never, never, true, never>;
}
declare class DatatableRowDetailDirective<TRow extends Row = any> {
/**
* The detail row height is required especially
* when virtual scroll is enabled.
*/
readonly rowHeight: _angular_core.InputSignal<number | ((row?: TRow, index?: number) => number)>;
readonly _templateInput: _angular_core.InputSignal<TemplateRef<RowDetailContext<TRow>> | undefined>;
readonly _templateQuery: _angular_core.Signal<TemplateRef<any> | undefined>;
readonly template: _angular_core.Signal<TemplateRef<RowDetailContext<TRow>> | undefined>;
/**
* Row detail row visbility was toggled.
*/
readonly toggle: _angular_core.OutputEmitterRef<DetailToggleEvents<TRow>>;
/**
* Toggle the expansion of the row
*/
toggleExpandRow(row: TRow): void;
/**
* API method to expand all the rows.
*/
expandAllRows(): void;
/**
* API method to collapse all the rows.
*/
collapseAllRows(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableRowDetailDirective<any>, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DatatableRowDetailDirective<any>, "ngx-datatable-row-detail", never, { "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "_templateInput": { "alias": "template"; "required": false; "isSignal": true; }; }, { "toggle": "toggle"; }, ["_templateQuery"], never, true, never>;
}
declare class DatatableComponent<TRow extends Row = any> implements OnInit, DoCheck, AfterViewInit, OnDestroy {
private scrollbarHelper;
private cd;
private configuration;
/**
* Template for the target marker of drag target columns.
*/
readonly targetMarkerTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
/**
* Rows that are displayed in the table.
*/
readonly rows: _angular_core.InputSignal<(TRow | undefined)[] | null | undefined>;
/**
* This attribute allows the user to set the name of the column to group the data with
*/
readonly groupRowsBy: _angular_core.InputSignal<keyof TRow | undefined>;
/**
* This attribute allows the user to set a grouped array in the following format:
* [
* {groupid=1} [
* {id=1 name="test1"},
* {id=2 name="test2"},
* {id=3 name="test3"}
* ]},
* {groupid=2>[
* {id=4 name="test4"},
* {id=5 name="test5"},
* {id=6 name="test6"}
* ]}
* ]
*/
readonly groupedRows: _angular_core.InputSignal<Group<TRow>[] | undefined>;
/**
* Columns to be displayed.
*/
readonly columns: _angular_core.InputSignal<TableColumn<any>[] | undefined>;
/**
* List of row objects that should be
* represented as selected in the grid.
* Default value: `[]`
*/
readonly selected: _angular_core.ModelSignal<TRow[]>;
/**
* Enable vertical scrollbars
*/
readonly scrollbarV: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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.
*/
readonly scrollbarVDynamic: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Enable horz scrollbars
*/
readonly scrollbarH: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* The row height; which is necessary
* to calculate the height for the lazy rendering.
*/
readonly rowHeight: _angular_core.InputSignal<number | "auto" | ((row: TRow) => number)>;
/**
* Type of column width distribution formula.
* Example: flex, force, standard
*/
readonly columnMode: _angular_core.InputSignal<ColumnMode>;
/**
* The minimum header height in pixels.
* Pass a falsey for no header
*/
readonly headerHeight: _angular_core.InputSignal<number | "auto">;
/**
* The minimum footer height in pixels.
* Pass falsey for no footer
*/
readonly footerHeight: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* If the table should use external paging
* otherwise its assumed that all data is preloaded.
*/
readonly externalPaging: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* If the table should use external sorting or
* the built-in basic sorting.
*/
readonly externalSorting: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* The page size to be shown.
* Default value: `undefined`
*/
readonly limit: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* The total count of all rows.
* Default value: `0`
*/
readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* The current offset ( page - 1 ) shown.
* Default value: `0`
*/
readonly offset: _angular_core.ModelSignal<number>;
/**
* Show the linear loading bar.
* Default value: `false`
*/
readonly loadingIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Show ghost loaders on each cell.
* Default value: `false`
*/
readonly ghostLoadingIndicator: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Type of row selection. Options are:
*
* - `single`
* - `multi`
* - `checkbox`
* - `multiClick`
* - `cell`
*
* For no selection pass a `falsey`.
* Default value: `undefined`
*/
readonly selectionType: _angular_core.InputSignal<SelectionType | undefined>;
/**
* Enable/Disable ability to re-order columns
* by dragging them.
*/
readonly reorderable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Swap columns on re-order columns or
* move them.
*/
readonly swapColumns: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* The type of sorting
*/
readonly sortType: _angular_core.InputSignal<SortType>;
/**
* Array of sorted columns by property and type.
* Default value: `[]`
*/
readonly sorts: _angular_core.ModelSignal<SortPropDir[]>;
/**
* Css class overrides
*/
readonly cssClasses: _angular_core.InputSignal<Partial<_siemens_ngx_datatable.NgxDatatableCssClasses>>;
/**
* Message overrides for localization
*
* @defaultValue
* ```
* {
* emptyMessage: 'No data to display',
* totalMessage: 'total',
* selectedMessage: 'selected',
* ariaFirstPageMessage: 'go to first page',
* ariaPreviousPageMessage: 'go to previous page',
* ariaPageNMessage: 'page',
* ariaNextPageMessage: 'go to next page',
* ariaLastPageMessage: 'go to last page',
* ariaRowCheckboxMessage: 'Select row',
* ariaHeaderCheckboxMessage: 'Select all rows',
* ariaGroupHeaderCheckboxMessage: 'Select row group'
* }
* ```
*/
readonly messages: _angular_core.InputSignal<Partial<_siemens_ngx_datatable.NgxDatatableMessages>>;
/**
* 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 }`
*/
readonly rowClass: _angular_core.InputSignal<((row: TRow) => string | Record<string, boolean>) | undefined>;
/**
* A boolean/function you can use to check whether you want
* to select a particular row based on a criteria. Example:
*
* (selection) => {
* return selection !== 'Ethel Price';
* }
*/
readonly selectCheck: _angular_core.InputSignal<((value: TRow, index: number, array: TRow[]) => boolean) | undefined>;
/**
* A function you can use to check whether you want
* to show the checkbox for a particular row based on a criteria. Example:
*
* (row, column, value) => {
* return row.name !== 'Ethel Price';
* }
*/
readonly displayCheck: _angular_core.InputSignal<((row: TRow, column: TableColumn, value?: any) => boolean) | undefined>;
/**
* 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.
*
*/
readonly groupExpansionDefault: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Property to which you can use for custom tracking of rows.
* Example: 'name'
*/
readonly trackByProp: _angular_core.InputSignal<string | undefined>;
/**
* Property to which you can use for determining select all
* rows on current page or not.
*/
readonly selectAllRowsOnPage: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* A flag for row virtualization on / off
*/
readonly virtualization: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Tree from relation
*/
readonly treeFromRelation: _angular_core.InputSignal<string | undefined>;
/**
* Tree to relation
*/
readonly treeToRelation: _angular_core.InputSignal<string | undefined>;
/**
* A flag for switching summary row on / off
*/
readonly summaryRow: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* A height of summary row
*/
readonly summaryHeight: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* A property holds a summary row position: top/bottom
*/
readonly summaryPosition: _angular_core.InputSignal<string>;
/**
* A function you can use to check whether you want
* to disable a row. Example:
*
* (row) => {
* return row.name !== 'Ethel Price';
* }
*/
readonly disableRowCheck: _angular_core.InputSignal<((row: TRow) => boolean) | undefined>;
/**
* 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.
*/
readonly rowDraggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* 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.
*/
readonly enableClearingSortState: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Body was scrolled typically in a `scrollbarV:true` scenario.
*/
readonly scroll: _angular_core.OutputEmitterRef<ScrollEvent>;
/**
* A cell or row was focused via keyboard or mouse click.
*/
readonly activate: _angular_core.OutputEmitterRef<ActivateEvent<TRow>>;
/**
* A cell or row was selected.
* @deprecated Use two-way binding on `selected` instead.
*
* Before:
* ```html
* <ngx-datatable [selected]="mySelection" (select)="onSelect($event)"></ngx-datatable>
* ```
*
* After:
* ```html
* <ngx-datatable [selected]="mySelection" (selectedChange)="onSelect({selected: $event})"></ngx-datatable>
* <!-- or -->
* <ngx-datatable [(selected)]="mySelection"></ngx-datatable>
* ```
*/
readonly select: _angular_core.OutputEmitterRef<SelectEvent<TRow>>;
/**
* Column sort was invoked.
* @deprecated Use two-way binding on `sorts` instead.
*
* Before:
* ```html
* <ngx-datatable [sorts]="mySorts" (sort)="onSort($event)"></ngx-datatable>
* ```
*
* After:
* ```html
* <ngx-datatable [sorts]="mySorts" (sortsChange)="onSort({sorts: $event})"></ngx-datatable>
* <!-- or -->
* <ngx-datatable [(sorts)]="mySorts"></ngx-datatable>
*/
readonly sort: _angular_core.OutputEmitterRef<SortEvent>;
/**
* The table was paged either triggered by the pager or the body scroll.
*/
readonly page: _angular_core.OutputEmitterRef<PageEvent>;
/**
* Columns were re-ordered.
*/
readonly reorder: _angular_core.OutputEmitterRef<ReorderEvent>;
/**
* Column was resized.
*/
readonly resize: _angular_core.OutputEmitterRef<ColumnResizeEvent>;
/**
* The context menu was invoked on the table.
* type indicates whether the header or the body was clicked.
* content contains either the column or the row that was clicked.
*/
readonly tableContextmenu: _angular_core.OutputEmitterRef<ContextMenuEvent<TRow>>;
/**
* A row was expanded ot collapsed for tree
*/
readonly treeAction: _angular_core.OutputEmitterRef<{
row: TRow;
rowIndex: number;
}>;
/**
* Emits HTML5 native drag events.
* Only emits dragenter, dragover, drop events by default.
* Set {@link rowDraggable} to true for dragstart and dragend.
*/
readonly rowDragEvents: _angular_core.OutputEmitterRef<DragEventData>;
/**
* Column templates gathered from `ContentChildren`
* if described in your markup.
*/
readonly columnTemplates: _angular_core.Signal<readonly DataTableColumnDirective<TRow>[]>;
/**
* Row Detail templates gathered from the ContentChild
*/
rowDetail?: DatatableRowDetailDirective;
/**
* Group Header templates gathered from the ContentChild
*/
groupHeader?: DatatableGroupHeaderDirective;
/**
* Footer template gathered from the ContentChild
* @internal
*/
readonly _footer: _angular_core.Signal<DatatableFooterDirective | undefined>;
private readonly _bodyComponent;
private readonly _headerElement;
private readonly _bodyElement;
/** @internal */
readonly _rowDefTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
/**
* Returns if all rows are selected.
*/
readonly allRowsSelected: _angular_core.Signal<boolean>;
element: HTMLElement;
readonly _innerWidth: _angular_core.Signal<number>;
readonly pageSize: _angular_core.Signal<number>;
readonly _isFixedHeader: _angular_core.Signal<boolean>;
readonly bodyHeight: _angular_core.Signal<number>;
readonly rowCount: _angular_core.Signal<number>;
rowDiffer: IterableDiffer<TRow | undefined>;
/** This counter is increased, when the rowDiffer detects a change. This will cause an update of _internalRows. */
private readonly _rowDiffCount;
_offsetX: number;
readonly _internalRows: _angular_core.Signal<(TRow | undefined)[]>;
readonly _internalGroupedRows: _angular_core.Signal<Group<TRow>[] | undefined>;
readonly _internalColumns: _angular_core.WritableSignal<TableColumnInternal[]>;
/**
* Computed signal that returns the corrected offset value.
* It ensures the offset is within valid bounds based on rowCount and pageSize.
*/
readonly correctedOffset: _angular_core.Signal<number>;
_subscriptions: Subscription[];
_defaultColumnWidth: number;
/**
* To have this available for all components.
* The Footer itself is not available in the injection context in templates,
* so we need to get if from here until we have a state service.
*/
readonly _footerComponent: _angular_core.Signal<DataTableFooterComponent | undefined>;
protected verticalScrollVisible: boolean;
private readonly _rowInitDone;
private readonly dimensions;
constructor();
/**
* Lifecycle hook that is called after data-bound
* properties of a directive are initialized.
*/
ngOnInit(): void;
ngDoCheck(): void;
/**
* Lifecycle hook that is called after a component's
* view has been fully initialized.
*/
ngAfterViewInit(): void;
/**
* This will be used when displaying or selecting rows.
* when tracking/comparing them, we'll use the value of this fn,
*
* (`fn(x) === fn(y)` instead of `x === y`)
*/
readonly rowIdentity: _angular_core.InputSignal<(x: RowOrGroup<TRow>) => unknown>;
/**
* Creates a map with the data grouped by the user choice of grouping index
*
* @param originalArray the original array passed via parameter
* @param groupBy the key of the column to group the data by
*/
groupArrayBy(originalArray: (TRow | undefined)[], groupBy: keyof TRow): {
key: TRow[keyof TRow];
value: TRow[];
}[];
/**
* Recalc's the sizes of the grid.
*
* Updated automatically on changes to:
*
* - Columns
* - Rows
* - Paging related
*
* Also can be manually invoked or upon window resize.
*/
recalculate(): void;
/**
* Window resize handler to update sizes.
*/
onWindowResize(): void;
/**
* Recalulcates the column widths based on column width
* distribution mode and scrollbar offsets.
*/
recalculateColumns(columns: TableColumnInternal[], forceIdx?: number, allowBleed?: boolean): TableColumnInternal[];
/**
* Recalculates the dimensions of the table size.
* Internally calls the page size and row count calcs too.
*
*/
recalculateDims(): void;
/**
* Body triggered a page event.
*/
onBodyPage(offset: number): void;
/**
* The body triggered a scroll event.
*/
onBodyScroll(event: ScrollEvent): void;
/**
* The footer triggered a page event.
*/
onFooterPage(event: PagerPageEvent): void;
/**
* Recalculates the sizes of the page
*/
calcPageSize(): number;
/**
* Calculates the row count.
*/
calcRowCount(): number;
/**
* The header triggered a contextmenu event.
*/
onColumnContextmenu({ event, column }: {
event: MouseEvent;
column: TableColumn;
}): void;
/**
* The body triggered a contextmenu event.
*/
onRowContextmenu({ event, row }: {
event: MouseEvent;
row: RowOrGroup<TRow>;
}): void;
/**
* The header triggered a column resize event.
*/
onColumnResize({ column, newValue, prevValue }: ColumnResizeEventInternal): void;
onColumnResizing({ column, newValue }: ColumnResizeEventInternal): void;
/**
* The header triggered a column re-order event.
*/
onColumnReorder(event: ReorderEventInternal): void;
/**
* The header triggered a column sort event.
*/
onColumnSort(event: SortEvent): void;
/**
* Toggle all row selection
*/
onHeaderSelect(): void;
/**
* A row was selected from body
*/
onBodySelect(selected: TRow[]): void;
/**
* A row was expanded or collapsed for tree
*/
onTreeAction(event: {
row: TRow;
}): void;
ngOnDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableComponent<any>, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatatableComponent<any>, "ngx-datatable", never, { "targetMarkerTemplate": { "alias": "targetMarkerTemplate"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "groupRowsBy": { "alias": "groupRowsBy"; "required": false; "isSignal": true; }; "groupedRows": { "alias": "groupedRows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "scrollbarV": { "alias": "scrollbarV"; "required": false; "isSignal": true; }; "scrollbarVDynamic": { "alias": "scrollbarVDynamic"; "required": false; "isSignal": true; }; "scrollbarH": { "alias": "scrollbarH"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "columnMode": { "alias": "columnMode"; "required": false; "isSignal": true; }; "headerHeight": { "alias": "headerHeight"; "required": false; "isSignal": true; }; "footerHeight": { "alias": "footerHeight"; "required": false; "isSignal": true; }; "externalPaging": { "alias": "externalPaging"; "required": false; "isSignal": true; }; "externalSorting": { "alias": "externalSorting"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; "isSignal": true; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; "isSignal": true; }; "selectionType": { "alias": "selectionType"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "swapColumns": { "alias": "swapColumns"; "required": false; "isSignal": true; }; "sortType": { "alias": "sortType"; "required": false; "isSignal": true; }; "sorts": { "alias": "sorts"; "required": false; "isSignal": true; }; "cssClasses": { "alias": "cssClasses"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "selectCheck": { "alias": "selectCheck"; "required": false; "isSignal": true; }; "displayCheck": { "alias": "displayCheck"; "required": false; "isSignal": true; }; "groupExpansionDefault": { "alias": "groupExpansionDefault"; "required": false; "isSignal": true; }; "trackByProp": { "alias": "trackByProp"; "required": false; "isSignal": true; }; "selectAllRowsOnPage": { "alias": "selectAllRowsOnPage"; "required": false; "isSignal": true; }; "virtualization": { "alias": "virtualization"; "required": false; "isSignal": true; }; "treeFromRelation": { "alias": "treeFromRelation"; "required": false; "isSignal": true; }; "treeToRelation": { "alias": "treeToRelation"; "required": false; "isSignal": true; }; "summaryRow": { "alias": "summaryRow"; "required": false; "isSignal": true; }; "summaryHeight": { "alias": "summaryHeight"; "required": false; "isSignal": true; }; "summaryPosition": { "alias": "summaryPosition"; "required": false; "isSignal": true; }; "disableRowCheck": { "alias": "disableRowCheck"; "required": false; "isSignal": true; }; "rowDraggable": { "alias": "rowDraggable"; "required": false; "isSignal": true; }; "enableClearingSortState": { "alias": "enableClearingSortState"; "required": false; "isSignal": true; }; "rowIdentity": { "alias": "rowIdentity"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "offset": "offsetChange"; "sorts": "sortsChange"; "scroll": "scroll"; "activate": "activate"; "select": "select"; "sort": "sort"; "page": "page"; "reorder": "reorder"; "resize": "resize"; "tableContextmenu": "tableContextmenu"; "treeAction": "treeAction"; "rowDragEvents": "rowDragEvents"; }, ["columnTemplates", "_footer", "_rowDefTemplate", "rowDetail", "groupHeader"], ["[loading-indicator]", "[empty-content]"], true, never>;
}
declare class DatatableRowDetailTemplateDirective {
static ngTemplateContextGuard(directive: DatatableRowDetailTemplateDirective, context: unknown): context is RowDetailContext;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableRowDetailTemplateDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DatatableRowDetailTemplateDirective, "[ngx-datatable-row-detail-template]", never, {}, {}, never, never, true, never>;
}
declare class DataTableColumnHeaderDirective {
static ngTemplateContextGuard(directive: DataTableColumnHeaderDirective, context: unknown): context is HeaderCellContext;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableColumnHeaderDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableColumnHeaderDirective, "[ngx-datatable-header-template]", never, {}, {}, never, never, true, never>;
}
declare class DataTableColumnCellDirective {
template: TemplateRef<CellContext<any>>;
static ngTemplateContextGuard(dir: DataTableColumnCellDirective, ctx: any): ctx is CellContext;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableColumnCellDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableColumnCellDirective, "[ngx-datatable-cell-template]", never, {}, {}, never, never, true, never>;
}
declare class DataTableColumnGhostCellDirective {
static ngTemplateContextGuard(directive: DataTableColumnGhostCellDirective, context: unknown): context is void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableColumnGhostCellDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableColumnGhostCellDirective, "[ngx-datatable-ghost-cell-template]", never, {}, {}, never, never, true, never>;
}
declare class DataTableColumnCellTreeToggle {
template: TemplateRef<any>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableColumnCellTreeToggle, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataTableColumnCellTreeToggle, "[ngx-datatable-tree-toggle]", never, {}, {}, never, never, true, never>;
}
/**
* Use this component to construct custom table footer with standard pagination.
*
* It must be used inside the `ngx-datatable-footer`
*
* @example
* ```html
*
* <ngx-datatable>
* ...
* <ngx-datatable