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 = { [K in keyof T]?: AllPartial; }; /** * Provides a global configuration for ngx-datatable. * * @param overrides The overrides of the table configuration. */ declare const providedNgxDatatableConfig: (overrides: AllPartial) => 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 { /** * 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 `{{content}}`. * If this property is set to true, the property will be bound as ``. * * **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>; /** * Ghost Cell template ref */ ghostCellTemplate?: TemplateRef; /** * Header template ref */ headerTemplate?: TemplateRef; /** * Tree toggle template ref */ treeToggleTemplate?: any; /** * CSS Classes for the cell */ cellClass?: string | ((data: { row: TRow; group?: TRow[]; column: TableColumn; value: any; rowHeight: number; }) => string | Record); /** * CSS classes for the header */ headerClass?: string | ((data: { column: TableColumn; }) => string | Record); /** * 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; } 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 * * // new * * ``` */ 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 { 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 { group: Group; expanded: boolean; rowIndex: number; } interface CellContext { onCheckboxChangeFn: (event: Event) => void; activateFn: (event: ActivateEvent) => 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 { /** 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 | Group; interface RowDetailContext { 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 { type: 'group'; value: Group; } interface AllGroupsToggleEvent { type: 'all'; value: boolean; } type GroupToggleEvents = GroupToggleEvent | AllGroupsToggleEvent; interface DetailToggleEvent { type: 'row'; value: TRow; } interface AllDetailToggleEvent { type: 'all'; value: boolean; } type DetailToggleEvents = DetailToggleEvent | AllDetailToggleEvent; /** * @deprecated The constant `SelectionType` should no longer be used. Instead use the value directly: * ``` * // old * * // new * * ``` */ 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 { selected: TRow[]; } interface ContextMenuEventBody { event: MouseEvent; type: 'body'; content: RowOrGroup; } interface ContextMenuEvenHeader { event: MouseEvent; type: 'header'; content: TableColumn; } type ContextMenuEvent = ContextMenuEventBody | 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; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } 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 extends TableColumn { /** 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 extends BaseTableColumnInternal { sortable?: false; } interface SortableTableColumnInternal extends BaseTableColumnInternal { comparator: Exclude; prop: TableColumnProp; sortable: true; } type TableColumnInternal = StandardTableColumnInternal | SortableTableColumnInternal; declare class DatatableGroupHeaderDirective { /** * Row height is required when virtual scroll is enabled. */ readonly rowHeight: _angular_core.InputSignal, index?: number) => number)>; /** * Show checkbox at group header to select all rows of the group. */ readonly checkboxable: _angular_core.InputSignal; readonly _templateInput: _angular_core.InputSignal> | undefined>; readonly _templateQuery: _angular_core.Signal | undefined>; readonly template: _angular_core.Signal | null>; /** * Track toggling of group visibility */ readonly toggle: _angular_core.OutputEmitterRef>; /** * Toggle the expansion of a group */ toggleExpandGroup(group: Group): void; /** * Expand all groups */ expandAllGroups(): void; /** * Collapse all groups */ collapseAllGroups(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "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 { readonly name: _angular_core.InputSignal; readonly prop: _angular_core.InputSignal; readonly bindAsUnsafeHtml: _angular_core.InputSignalWithTransform; readonly frozenLeft: _angular_core.InputSignalWithTransform; readonly frozenRight: _angular_core.InputSignalWithTransform; readonly flexGrow: _angular_core.InputSignalWithTransform; readonly resizeable: _angular_core.InputSignalWithTransform; readonly comparator: _angular_core.InputSignal<((valueA: any, valueB: any, rowA: TRow, rowB: TRow) => number) | undefined>; readonly pipe: _angular_core.InputSignal; readonly sortable: _angular_core.InputSignalWithTransform; readonly draggable: _angular_core.InputSignalWithTransform; readonly canAutoResize: _angular_core.InputSignalWithTransform; readonly minWidth: _angular_core.InputSignalWithTransform; readonly width: _angular_core.InputSignalWithTransform; readonly maxWidth: _angular_core.InputSignalWithTransform; readonly checkboxable: _angular_core.InputSignalWithTransform; readonly headerCheckboxable: _angular_core.InputSignalWithTransform; readonly headerClass: _angular_core.InputSignal string | Record) | undefined>; readonly cellClass: _angular_core.InputSignal; value: any; rowHeight: number; }) => string | Record) | undefined>; readonly isTreeColumn: _angular_core.InputSignalWithTransform; readonly treeLevelIndent: _angular_core.InputSignal; readonly summaryFunc: _angular_core.InputSignal<((cells: any[]) => any) | undefined>; readonly summaryTemplate: _angular_core.InputSignal | undefined>; readonly cellTemplateInput: _angular_core.InputSignal> | undefined>; readonly cellTemplateQuery: Signal | undefined>; readonly headerTemplateInput: _angular_core.InputSignal | undefined>; readonly headerTemplateQuery: Signal | undefined>; readonly treeToggleTemplateInput: _angular_core.InputSignal | undefined>; readonly treeToggleTemplateQuery: Signal | undefined>; readonly ghostCellTemplateInput: _angular_core.InputSignal | undefined>; readonly ghostCellTemplateQuery: Signal | undefined>; /** * Computed property that returns the column configuration as a TableColumn object */ readonly column: Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "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 | undefined>; private readonly _templateQuery; readonly template: _angular_core.Signal | undefined>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class DataTableFooterComponent { readonly footerHeight: _angular_core.InputSignal; readonly rowCount: _angular_core.InputSignal; readonly groupCount: _angular_core.InputSignal; readonly pageSize: _angular_core.InputSignal; readonly offset: _angular_core.InputSignal; readonly pagerLeftArrowIcon: _angular_core.InputSignal; readonly pagerRightArrowIcon: _angular_core.InputSignal; readonly pagerPreviousIcon: _angular_core.InputSignal; readonly pagerNextIcon: _angular_core.InputSignal; readonly totalMessage: _angular_core.InputSignal; readonly footerTemplate: _angular_core.InputSignal; readonly selectedCount: _angular_core.InputSignal; readonly selectedMessage: _angular_core.InputSignal; readonly page: _angular_core.OutputEmitterRef; protected readonly isVisible: Signal; readonly curPage: Signal; protected readonly templateContext: Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class DatatableRowDetailDirective { /** * The detail row height is required especially * when virtual scroll is enabled. */ readonly rowHeight: _angular_core.InputSignal number)>; readonly _templateInput: _angular_core.InputSignal> | undefined>; readonly _templateQuery: _angular_core.Signal | undefined>; readonly template: _angular_core.Signal> | undefined>; /** * Row detail row visbility was toggled. */ readonly toggle: _angular_core.OutputEmitterRef>; /** * 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, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "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 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 | 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; /** * 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[] | undefined>; /** * Columns to be displayed. */ readonly columns: _angular_core.InputSignal[] | undefined>; /** * List of row objects that should be * represented as selected in the grid. * Default value: `[]` */ readonly selected: _angular_core.ModelSignal; /** * Enable vertical scrollbars */ readonly scrollbarV: _angular_core.InputSignalWithTransform; /** * 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; /** * Enable horz scrollbars */ readonly scrollbarH: _angular_core.InputSignalWithTransform; /** * The row height; which is necessary * to calculate the height for the lazy rendering. */ readonly rowHeight: _angular_core.InputSignal number)>; /** * Type of column width distribution formula. * Example: flex, force, standard */ readonly columnMode: _angular_core.InputSignal; /** * The minimum header height in pixels. * Pass a falsey for no header */ readonly headerHeight: _angular_core.InputSignal; /** * The minimum footer height in pixels. * Pass falsey for no footer */ readonly footerHeight: _angular_core.InputSignalWithTransform; /** * If the table should use external paging * otherwise its assumed that all data is preloaded. */ readonly externalPaging: _angular_core.InputSignalWithTransform; /** * If the table should use external sorting or * the built-in basic sorting. */ readonly externalSorting: _angular_core.InputSignalWithTransform; /** * The page size to be shown. * Default value: `undefined` */ readonly limit: _angular_core.InputSignalWithTransform; /** * The total count of all rows. * Default value: `0` */ readonly count: _angular_core.InputSignalWithTransform; /** * The current offset ( page - 1 ) shown. * Default value: `0` */ readonly offset: _angular_core.ModelSignal; /** * Show the linear loading bar. * Default value: `false` */ readonly loadingIndicator: _angular_core.InputSignalWithTransform; /** * Show ghost loaders on each cell. * Default value: `false` */ readonly ghostLoadingIndicator: _angular_core.InputSignalWithTransform; /** * 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; /** * Enable/Disable ability to re-order columns * by dragging them. */ readonly reorderable: _angular_core.InputSignalWithTransform; /** * Swap columns on re-order columns or * move them. */ readonly swapColumns: _angular_core.InputSignalWithTransform; /** * The type of sorting */ readonly sortType: _angular_core.InputSignal; /** * Array of sorted columns by property and type. * Default value: `[]` */ readonly sorts: _angular_core.ModelSignal; /** * Css class overrides */ readonly cssClasses: _angular_core.InputSignal>; /** * 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>; /** * A function which is called with the row and should return either: * - a string: `"class-1 class-2` * - a Record: `{ 'class-1': true, 'class-2': false }` */ readonly rowClass: _angular_core.InputSignal<((row: TRow) => string | Record) | 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; /** * Property to which you can use for custom tracking of rows. * Example: 'name' */ readonly trackByProp: _angular_core.InputSignal; /** * Property to which you can use for determining select all * rows on current page or not. */ readonly selectAllRowsOnPage: _angular_core.InputSignalWithTransform; /** * A flag for row virtualization on / off */ readonly virtualization: _angular_core.InputSignalWithTransform; /** * Tree from relation */ readonly treeFromRelation: _angular_core.InputSignal; /** * Tree to relation */ readonly treeToRelation: _angular_core.InputSignal; /** * A flag for switching summary row on / off */ readonly summaryRow: _angular_core.InputSignalWithTransform; /** * A height of summary row */ readonly summaryHeight: _angular_core.InputSignalWithTransform; /** * A property holds a summary row position: top/bottom */ readonly summaryPosition: _angular_core.InputSignal; /** * 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; /** * 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; /** * Body was scrolled typically in a `scrollbarV:true` scenario. */ readonly scroll: _angular_core.OutputEmitterRef; /** * A cell or row was focused via keyboard or mouse click. */ readonly activate: _angular_core.OutputEmitterRef>; /** * A cell or row was selected. * @deprecated Use two-way binding on `selected` instead. * * Before: * ```html * * ``` * * After: * ```html * * * * ``` */ readonly select: _angular_core.OutputEmitterRef>; /** * Column sort was invoked. * @deprecated Use two-way binding on `sorts` instead. * * Before: * ```html * * ``` * * After: * ```html * * * */ readonly sort: _angular_core.OutputEmitterRef; /** * The table was paged either triggered by the pager or the body scroll. */ readonly page: _angular_core.OutputEmitterRef; /** * Columns were re-ordered. */ readonly reorder: _angular_core.OutputEmitterRef; /** * Column was resized. */ readonly resize: _angular_core.OutputEmitterRef; /** * 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>; /** * 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; /** * Column templates gathered from `ContentChildren` * if described in your markup. */ readonly columnTemplates: _angular_core.Signal[]>; /** * 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; private readonly _bodyComponent; private readonly _headerElement; private readonly _bodyElement; /** @internal */ readonly _rowDefTemplate: _angular_core.Signal | undefined>; /** * Returns if all rows are selected. */ readonly allRowsSelected: _angular_core.Signal; element: HTMLElement; readonly _innerWidth: _angular_core.Signal; readonly pageSize: _angular_core.Signal; readonly _isFixedHeader: _angular_core.Signal; readonly bodyHeight: _angular_core.Signal; readonly rowCount: _angular_core.Signal; rowDiffer: IterableDiffer; /** 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[] | undefined>; readonly _internalColumns: _angular_core.WritableSignal; /** * 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; _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; 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) => 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; }): 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, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "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; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class DataTableColumnHeaderDirective { static ngTemplateContextGuard(directive: DataTableColumnHeaderDirective, context: unknown): context is HeaderCellContext; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class DataTableColumnCellDirective { template: TemplateRef>; static ngTemplateContextGuard(dir: DataTableColumnCellDirective, ctx: any): ctx is CellContext; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class DataTableColumnGhostCellDirective { static ngTemplateContextGuard(directive: DataTableColumnGhostCellDirective, context: unknown): context is void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class DataTableColumnCellTreeToggle { template: TemplateRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Use this component to construct custom table footer with standard pagination. * * It must be used inside the `ngx-datatable-footer` * * @example * ```html * * * ... * * * * * * * * ``` */ declare class DatatablePagerComponent { private datatable; protected get messages(): ReturnType; protected readonly page: _angular_core.Signal; protected readonly pageSize: _angular_core.Signal; protected readonly count: _angular_core.Signal; protected readonly pagerNextIcon: _angular_core.Signal; protected readonly pagerRightArrowIcon: _angular_core.Signal; protected readonly pagerLeftArrowIcon: _angular_core.Signal; protected readonly pagerPreviousIcon: _angular_core.Signal; protected readonly totalPages: _angular_core.Signal; protected readonly pages: _angular_core.Signal; protected readonly canPrevious: _angular_core.Signal; protected readonly canNext: _angular_core.Signal; protected prevPage(): void; protected nextPage(): void; protected selectPage(page: number): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class DatatableGroupHeaderTemplateDirective { static ngTemplateContextGuard(directive: DatatableGroupHeaderTemplateDirective, context: unknown): context is GroupContext; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Row Disable Directive * Use this to disable/enable all children elements * Usage: * To disable *
*
* To enable *
*
*/ declare class DisableRowDirective { private readonly elementRef; readonly disabled: _angular_core.InputSignalWithTransform; constructor(); private disableAllElements; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * This component is passed as ng-template and rendered by BodyComponent. * BodyComponent uses rowDefInternal to first inject actual row template. * This component will render that actual row template. */ declare class DatatableRowDefComponent { rowDef: DatatableRowDefInternalDirective; rowContext: { disabled: boolean | undefined; template: TemplateRef; rowTemplate: TemplateRef; row: RowOrGroup; index: number; }; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class DatatableRowDefDirective { static ngTemplateContextGuard(_dir: DatatableRowDefDirective, ctx: unknown): ctx is RowDefContext; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * @internal To be used internally by ngx-datatable. */ declare class DatatableRowDefInternalDirective implements OnInit { vc: ViewContainerRef; readonly rowDefInternal: _angular_core.InputSignal; readonly rowDefInternalDisabled: _angular_core.InputSignal; ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } interface RowDefContext { template: TemplateRef; rowTemplate: TemplateRef; row: RowOrGroup; index: number; } declare class NgxDatatableModule { /** * Configure global configuration via INgxDatatableConfig * @param configuration */ static forRoot(configuration: AllPartial): ModuleWithProviders; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } export { ColumnMode, ContextmenuType, DataTableColumnCellDirective, DataTableColumnCellTreeToggle, DataTableColumnDirective, DataTableColumnGhostCellDirective, DataTableColumnHeaderDirective, DataTableFooterTemplateDirective, DatatableComponent, DatatableFooterDirective, DatatableGroupHeaderDirective, DatatableGroupHeaderTemplateDirective, DatatablePagerComponent, DatatableRowDefComponent, DatatableRowDefDirective, DatatableRowDefInternalDirective, DatatableRowDetailDirective, DatatableRowDetailTemplateDirective, DisableRowDirective, NgxDatatableModule, SelectionType, SortDirection, SortType, providedNgxDatatableConfig }; export type { ActivateEvent, AllDetailToggleEvent, AllGroupsToggleEvent, CellContext, ColumnResizeEvent, ContextMenuEvenHeader, ContextMenuEvent, ContextMenuEventBody, DetailToggleEvent, DetailToggleEvents, DragEventData, DragEventType, FooterContext, Group, GroupContext, GroupToggleEvent, GroupToggleEvents, HeaderCellContext, NgxDatatableConfig, NgxDatatableCssClasses, NgxDatatableMessages, PageEvent, PagerPageEvent, ReorderEvent, Row, RowDetailContext, RowOrGroup, ScrollEvent, SelectEvent, SortEvent, SortPropDir, TableColumn, TableColumnProp, TreeStatus };