UNPKG

@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
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