smart-webcomponents-angular/fesm2020/smart-webcomponents-angular-table.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-table.mjs","sources":["../../table/src/smart.element.ts","../../table/src/smart.table.ts","../../table/src/smart.table.module.ts","../../table/src/smart-webcomponents-angular-table.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { Table } from './../index';\nimport { TableColumnDataType, TableColumnFreeze, TableConditionalFormattingCondition, TableConditionalFormattingFontFamily, TableConditionalFormattingFontSize, TableColumnSizeMode, TableDataSourceSettingsSanitizeHTML, TableDataSourceSettingsSanitizeHTMLRender, TableDataSourceSettingsDataFieldDataType, TableDataSourceSettingsDataSourceType, TableEditMode, TableLoadColumnStateBehavior, TableSelectionMode, TableSortMode, TableColumnGroup, TableColumn, TableConditionalFormatting, TableDataSourceSettings, TableDataSourceSettingsDataField, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { TableColumnDataType, TableColumnFreeze, TableConditionalFormattingCondition, TableConditionalFormattingFontFamily, TableConditionalFormattingFontSize, TableColumnSizeMode, TableDataSourceSettingsSanitizeHTML, TableDataSourceSettingsSanitizeHTMLRender, TableDataSourceSettingsDataFieldDataType, TableDataSourceSettingsDataSourceType, TableEditMode, TableLoadColumnStateBehavior, TableSelectionMode, TableSortMode, TableColumnGroup, TableColumn, TableConditionalFormatting, TableDataSourceSettings, TableDataSourceSettingsDataField, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { Table } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-table',\tselector: 'smart-table, [smart-table]'\n})\n\nexport class TableComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<Table>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as Table;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: Table;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <Table>document.createElement('smart-table');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Controls whether the application automatically restores its previous state from the browser's localStorage. When enabled, it retrieves saved settings such as column configurations, expanded or selected rows, active filters, groupings, and the sort order of columns. The specific state information that is loaded depends on the options defined in the stateSettings property. */\n\t@Input()\n\tget autoLoadState(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoLoadState : undefined;\n\t}\n\tset autoLoadState(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoLoadState = value : undefined;\n\t}\n\n\t/** @description Controls whether the component automatically saves its current state to the browser’s localStorage. When enabled, data such as column configurations, expanded row states, selected rows, applied filters, grouping options, and sorted columns are persistently stored. The specific state information saved depends on the options set in the stateSettings property. This allows users’ table settings to be retained and restored across browser sessions. */\n\t@Input()\n\tget autoSaveState(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoSaveState : undefined;\n\t}\n\tset autoSaveState(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoSaveState = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an array of column groups that establish the hierarchical structure of the column headers. Note: When a column header hierarchy is configured using these column groups, features such as column resizing and auto-sizing are disabled and will not be available for those columns. */\n\t@Input()\n\tget columnGroups(): TableColumnGroup[] {\n\t\treturn this.nativeElement ? this.nativeElement.columnGroups : undefined;\n\t}\n\tset columnGroups(value: TableColumnGroup[]) {\n\t\tthis.nativeElement ? this.nativeElement.columnGroups = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the minimum width for columns when columnSizeMode is set to 'auto' or when columns are being resized by the user. This property determines the smallest allowable width for columns during these operations. Note: This setting is ignored for columns that have their width explicitly defined through code. */\n\t@Input()\n\tget columnMinWidth(): string | number {\n\t\treturn this.nativeElement ? this.nativeElement.columnMinWidth : undefined;\n\t}\n\tset columnMinWidth(value: string | number) {\n\t\tthis.nativeElement ? this.nativeElement.columnMinWidth = value : undefined;\n\t}\n\n\t/** @description Determines whether users are allowed to reorder columns by dragging them. When enabled, columns can be rearranged by the user; when disabled, the column order is fixed. This property can be set to enable or disable column reordering, or queried to check the current state. */\n\t@Input()\n\tget columnReorder(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnReorder : undefined;\n\t}\n\tset columnReorder(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnReorder = value : undefined;\n\t}\n\n\t/** @description Enables or disables the ability for users to resize table columns. When this option is enabled, users can manually adjust the width of each column. Note: The actual column sizing is still governed by the standard HTML table behavior for table-layout: fixed, as smart-table is built upon this layout model. This means columns have a fixed width and resizing may affect the overall table width proportionally, consistent with native HTML tables using table-layout: fixed. */\n\t@Input()\n\tget columnResize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnResize : undefined;\n\t}\n\tset columnResize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnResize = value : undefined;\n\t}\n\n\t/** @description This property controls how the table adjusts its column widths when columnSizeMode is set to 'default'. - When columnResizeNormalize is 'false', and every table column has a defined width, the Table will insert an extra '' element. This additional header cell ensures that the customized column widths are preserved, preventing the browser from automatically resizing your columns and thereby maintaining the exact width configuration you specified.- When columnResizeNormalize is 'true', the Table will not add an extra ''. Instead, it distributes the available space among the columns, causing them to expand or contract as needed—similar to the default behavior of standard HTML tables. This results in a more fluid, responsive layout, where any unallocated space is automatically filled.This property is useful for toggling between a strictly controlled column layout and one that behaves like a regular HTML table when sizing columns. */\n\t@Input()\n\tget columnResizeNormalize(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnResizeNormalize : undefined;\n\t}\n\tset columnResizeNormalize(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnResizeNormalize = value : undefined;\n\t}\n\n\t/** @description Determines whether a visual feedback indicator is shown during column resizing, displaying the new column width in pixels as the user adjusts the column. This property can be set to enable or disable the display of the width feedback overlay, or queried to check its current state. */\n\t@Input()\n\tget columnResizeFeedback(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnResizeFeedback : undefined;\n\t}\n\tset columnResizeFeedback(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnResizeFeedback = value : undefined;\n\t}\n\n\t/** @description Provides detailed definitions and configuration options for the properties of each column, including attributes such as data type, header label, visibility, sorting, filtering, and formatting. This section outlines how individual columns should be displayed and behave within the table or data grid. */\n\t@Input()\n\tget columns(): TableColumn[] {\n\t\treturn this.nativeElement ? this.nativeElement.columns : undefined;\n\t}\n\tset columns(value: TableColumn[]) {\n\t\tthis.nativeElement ? this.nativeElement.columns = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves the rules and settings for conditional formatting applied to the table's cells, allowing specific formatting (such as colors, styles, or icons) to be applied dynamically based on the cell values or conditions. */\n\t@Input()\n\tget conditionalFormatting(): TableConditionalFormatting[] {\n\t\treturn this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;\n\t}\n\tset conditionalFormatting(value: TableConditionalFormatting[]) {\n\t\tthis.nativeElement ? this.nativeElement.conditionalFormatting = value : undefined;\n\t}\n\n\t/** @description Defines the column menu functionality for the grid. When this property is set to true, a menu icon appears in the header of each column. Clicking this icon opens a column menu, providing users with options to sort the data, apply filters, and toggle the visibility of columns. You can set this property to enable or disable the column menu, or retrieve its current state. */\n\t@Input()\n\tget columnMenu(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.columnMenu : undefined;\n\t}\n\tset columnMenu(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.columnMenu = value : undefined;\n\t}\n\n\t/** @description ---Determines how the table columns are sized, supporting two distinct modes:- ''auto' Mode:'    Columns are automatically sized based on their content and the specified columnMinWidth value. If the table does not have enough horizontal space to display all content, excess text is truncated with ellipses. Manually specified static column widths (set by the user) will still be honored in this mode.- ''default' Mode:'    Columns follow the standard HTML table's table-layout: fixed behavior. In this mode, column widths do not adapt to content; instead, each column's width is determined either by a fixed value (set via the column’s width property) or distributed evenly if no width is specified.Use this property to control whether column widths are calculated automatically based on content or determined by fixed sizing rules. */\n\t@Input()\n\tget columnSizeMode(): TableColumnSizeMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.columnSizeMode : undefined;\n\t}\n\tset columnSizeMode(value: TableColumnSizeMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.columnSizeMode = value : undefined;\n\t}\n\n\t/** @description Controls the visibility of the \"Conditional Formatting\" button in the Table component’s header toolbar. When enabled, this button appears in the toolbar and allows users to open a dialog where they can configure and apply conditional formatting rules to the table's data. This property can be used to programmatically show or hide the button, or to check if it is currently displayed. */\n\t@Input()\n\tget conditionalFormattingButton(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.conditionalFormattingButton : undefined;\n\t}\n\tset conditionalFormattingButton(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.conditionalFormattingButton = value : undefined;\n\t}\n\n\t/** @description This property specifies the interval, in milliseconds, that must elapse during vertical scrolling before the table data is refreshed or updated. Adjusting this setting can help control the responsiveness and performance of data loading while scrolling through the table. */\n\t@Input()\n\tget deferredScrollDelay(): number {\n\t\treturn this.nativeElement ? this.nativeElement.deferredScrollDelay : undefined;\n\t}\n\tset deferredScrollDelay(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.deferredScrollDelay = value : undefined;\n\t}\n\n\t/** @description When the dataSource property is bound directly to a plain array—rather than to an instance of JQX.DataAdapter—this property specifies the name of the field within each array element that should be used as the unique row identifier. You can use it to set or retrieve the key that maps each item's row id, allowing the component to correctly reference, update, and manage rows by their unique ids. */\n\t@Input()\n\tget dataRowId(): string {\n\t\treturn this.nativeElement ? this.nativeElement.dataRowId : undefined;\n\t}\n\tset dataRowId(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.dataRowId = value : undefined;\n\t}\n\n\t/** @description Specifies the data source for the Table component. This property accepts either a standard JavaScript Array or a DataAdapter instance. Using an Array allows you to provide the table data directly, while a DataAdapter offers advanced data management features such as data binding, sorting, filtering, and integration with remote data sources. For detailed information about the DataAdapter and its capabilities, visit: https://www.htmlelements.com/docs/data-adapter/ */\n\t@Input()\n\tget dataSource(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dataSource : undefined;\n\t}\n\tset dataSource(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dataSource = value : undefined;\n\t}\n\n\t/** @description Configures the grid's data source settings when the dataSource property is assigned either a local data array or a remote URL. This allows the grid to properly retrieve, bind, and display data from the specified source, whether it is provided directly as an array or fetched asynchronously from a web endpoint. */\n\t@Input()\n\tget dataSourceSettings(): TableDataSourceSettings {\n\t\treturn this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;\n\t}\n\tset dataSourceSettings(value: TableDataSourceSettings) {\n\t\tthis.nativeElement ? this.nativeElement.dataSourceSettings = value : undefined;\n\t}\n\n\t/** @description Prevents users from interacting with the element, such as clicking, selecting, typing, or triggering any events. The element will appear disabled and will not respond to any user input. */\n\t@Input()\n\tget dataTransform(): { (record: any): void } {\n\t\treturn this.nativeElement ? this.nativeElement.dataTransform : undefined;\n\t}\n\tset dataTransform(value: { (record: any): void }) {\n\t\tthis.nativeElement ? this.nativeElement.dataTransform = value : undefined;\n\t}\n\n\t/** @description Determines whether the Table is editable. When set to true, users can modify the contents of the Table; when false, the Table is read-only and cannot be edited. This property can be used to both retrieve the current editable state and update it as needed. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Enables or retrieves the current state of edit mode, determining whether the component is in an editable state. When set to true, users can modify the content; when set to false, the component is read-only. */\n\t@Input()\n\tget editing(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.editing : undefined;\n\t}\n\tset editing(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.editing = value : undefined;\n\t}\n\n\t/** @description Determines whether row hierarchies are automatically expanded when they are initially created. When this property is enabled, grouped rows or tree-structured rows in the Table will be expanded by default, allowing users to see all subgrouped data without requiring manual expansion. Use this property if you want hierarchical groups in the Table to appear open automatically when the Table is grouped or when using tree mode. */\n\t@Input()\n\tget editMode(): TableEditMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.editMode : undefined;\n\t}\n\tset editMode(value: TableEditMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.editMode = value : undefined;\n\t}\n\n\t/** @description Controls whether filtering is enabled for the Table. When filtering is enabled (the default), each string and numeric column displays a filter input in the header, allowing users to filter table rows based on column values. Setting this property to false disables all filter inputs and prevents users from filtering the table data. */\n\t@Input()\n\tget expandHierarchy(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.expandHierarchy : undefined;\n\t}\n\tset expandHierarchy(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.expandHierarchy = value : undefined;\n\t}\n\n\t/** @description Determines whether the Table supports data filtering through a dedicated filter row. When enabled, users can input criteria directly into this row to dynamically filter and display matching rows in the Table. This property can be set to enable or disable the filter row feature, and can also be queried to check its current state. */\n\t@Input()\n\tget filtering(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.filtering : undefined;\n\t}\n\tset filtering(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.filtering = value : undefined;\n\t}\n\n\t/** @description Gets or sets the filter operator for the table, determining how multiple column filters are combined. If set to 'and', all filter conditions must be met for a row to be displayed (e.g., cellValue1 && cellValue2). If set to 'or', a row is shown if it meets any one of the filter conditions (e.g., cellValue1 || cellValue2). This property controls whether filters are applied using logical 'AND' or 'OR' operations. */\n\t@Input()\n\tget filterRow(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.filterRow : undefined;\n\t}\n\tset filterRow(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.filterRow = value : undefined;\n\t}\n\n\t/** @description Gets or sets the ID of an HTML &lt;template&gt; element to be used as a custom filter template. This allows you to define and apply your own filter UI by referencing the specified template’s ID. */\n\t@Input()\n\tget filterOperator(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.filterOperator : undefined;\n\t}\n\tset filterOperator(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.filterOperator = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the ID of an HTML '&lt;template&gt;' element whose content will be used to render the footer row(s) of the component. This allows you to define custom footer layouts using template markup and apply them dynamically by referencing the template's ID. */\n\t@Input()\n\tget filterTemplate(): string {\n\t\treturn this.nativeElement ? this.nativeElement.filterTemplate : undefined;\n\t}\n\tset filterTemplate(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.filterTemplate = value : undefined;\n\t}\n\n\t/** @description Enables or disables support for Excel-style formulas as cell values. When enabled, users can enter formulas starting with the '=' sign (e.g., \"=SUM(A1:A3)\") directly into cells. These formulas are automatically recalculated whenever referenced cell values change. Note: This functionality requires the third-party, free 'formula-parser' plugin; be sure to include the 'formula-parser.min.js' file as a dependency in your project. */\n\t@Input()\n\tget footerRow(): string {\n\t\treturn this.nativeElement ? this.nativeElement.footerRow : undefined;\n\t}\n\tset footerRow(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.footerRow = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves whether the Table's footer remains fixed (sticky/frozen) at the bottom of the Table when scrolling vertically, ensuring it stays visible regardless of the Table's scroll position. */\n\t@Input()\n\tget formulas(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.formulas : undefined;\n\t}\n\tset formulas(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.formulas = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves whether the table’s column header remains fixed (sticky) at the top of the viewport while scrolling through the table content. When enabled, the column header stays visible, improving readability for tables with many rows. */\n\t@Input()\n\tget freezeFooter(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.freezeFooter : undefined;\n\t}\n\tset freezeFooter(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.freezeFooter = value : undefined;\n\t}\n\n\t/** @description Configures or retrieves the current state of table grouping functionality. When enabled, rows in the table can be organized into groups based on specified criteria, allowing for better data categorization and easier analysis. */\n\t@Input()\n\tget freezeHeader(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.freezeHeader : undefined;\n\t}\n\tset freezeHeader(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.freezeHeader = value : undefined;\n\t}\n\n\t/** @description Enhances customization of the element's header. This property accepts several types of values:- The 'id' of an 'HTMLElement' or 'HTMLTemplateElement', which will be used to render the header.- A function, which receives the header element of the table as its sole argument. Use this function to dynamically generate or modify the header content.- A string containing HTML markup, which will be parsed and inserted as the header.This flexibility allows you to define static, template-based, or fully dynamic headers for the element according to your application's needs. */\n\t@Input()\n\tget grouping(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.grouping : undefined;\n\t}\n\tset grouping(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.grouping = value : undefined;\n\t}\n\n\t/** @description Controls whether users can navigate through the table using keyboard inputs. When enabled, users can move between table cells, rows, or columns using keys such as Tab, Arrow keys, or other navigation shortcuts. This setting can be accessed to check the current state (enabled or disabled) or modified to turn keyboard navigation on or off for the table. */\n\t@Input()\n\tget groupFormatFunction(): { (settings: { value: any, row: string | number, column: string, template?: any }): void } {\n\t\treturn this.nativeElement ? this.nativeElement.groupFormatFunction : undefined;\n\t}\n\tset groupFormatFunction(value: { (settings: { value: any, row: string | number, column: string, template?: any }): void }) {\n\t\tthis.nativeElement ? this.nativeElement.groupFormatFunction = value : undefined;\n\t}\n\n\t/** @description Controls whether checkboxes are visible in the selection column. When set to true, checkboxes will be displayed, allowing users to select multiple items. When set to false, the selection column will not display checkboxes. This property can be used to programmatically toggle the visibility of checkboxes and can also be read to determine the current display state. */\n\t@Input()\n\tget headerRow(): string | HTMLElement | Function {\n\t\treturn this.nativeElement ? this.nativeElement.headerRow : undefined;\n\t}\n\tset headerRow(value: string | HTMLElement | Function) {\n\t\tthis.nativeElement ? this.nativeElement.headerRow = value : undefined;\n\t}\n\n\t/** @description Defines how the column settings are handled during loading, whether automatically with autoLoadState or manually with loadState. This option is relevant only if the stateSettings array includes 'columns', ensuring that column-specific state (such as order, visibility, or width) is properly managed during the state load process. */\n\t@Input()\n\tget keyboardNavigation(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.keyboardNavigation : undefined;\n\t}\n\tset keyboardNavigation(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.keyboardNavigation = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves the unlockKey property, a unique value required to activate or authorize access to the product's features. This key is used to verify that the user is permitted to unlock and use the product. */\n\t@Input()\n\tget hideSelectionColumn(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideSelectionColumn : undefined;\n\t}\n\tset hideSelectionColumn(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideSelectionColumn = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the currently selected language code (e.g., \"en\", \"fr\", \"es\") for localization purposes. This property works together with the messages property to determine which set of localized messages should be displayed or used by the application. Adjusting this property changes which language map from messages are active. */\n\t@Input()\n\tget loadColumnStateBehavior(): TableLoadColumnStateBehavior | string {\n\t\treturn this.nativeElement ? this.nativeElement.loadColumnStateBehavior : undefined;\n\t}\n\tset loadColumnStateBehavior(value: TableLoadColumnStateBehavior | string) {\n\t\tthis.nativeElement ? this.nativeElement.loadColumnStateBehavior = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an object containing key-value pairs of strings used within the element, allowing for customization and localization of displayed text. This property works together with the locale property to present the appropriate language and regional terms based on the user's locale preferences. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the number of records displayed per page when paging is enabled. This property determines the size of each data page, allowing you to control how many items are shown to the user at a time. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Gets or sets the current page index (zero-based) when paging is enabled. This property allows you to specify or retrieve which page of data is currently being displayed, with the first page having an index of 0. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state. */\n\t@Input()\n\tget onCellRender(): { (data: any, dataField: string, value: any, cell: HTMLTableCellElement): void } {\n\t\treturn this.nativeElement ? this.nativeElement.onCellRender : undefined;\n\t}\n\tset onCellRender(value: { (data: any, dataField: string, value: any, cell: HTMLTableCellElement): void }) {\n\t\tthis.nativeElement ? this.nativeElement.onCellRender = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves a value that determines whether the element's alignment is configured for right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew that require right-to-left font support. */\n\t@Input()\n\tget onColumnRender(): { (dataField: string, headerCell: HTMLTableCellElement): void } {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnRender : undefined;\n\t}\n\tset onColumnRender(value: { (dataField: string, headerCell: HTMLTableCellElement): void }) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnRender = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves a string template used for rendering the detail section of a row. This template enables you to display additional information beneath a master row when it is expanded. To populate the detail row with values from the master row, insert the relevant data field names within double curly brackets (e.g., {{price}}). When a user clicks on a row to expand it, the template is applied, and the placeholders are replaced with the corresponding data from that row. */\n\t@Input()\n\tget onInit(): { (): void } {\n\t\treturn this.nativeElement ? this.nativeElement.onInit : undefined;\n\t}\n\tset onInit(value: { (): void }) {\n\t\tthis.nativeElement ? this.nativeElement.onInit = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves a callback function that takes three arguments: column, filterConditions, and filterInputTemplateString. This function is responsible for generating and returning a new filter input element or template based on the specific column and the current filter conditions. Use this callback to customize how the filter input is rendered for each column in the table. */\n\t@Input()\n\tget onLoad(): { (): void } {\n\t\treturn this.nativeElement ? this.nativeElement.onLoad : undefined;\n\t}\n\tset onLoad(value: { (): void }) {\n\t\tthis.nativeElement ? this.nativeElement.onLoad = value : undefined;\n\t}\n\n\t/** @description Gets or sets an array containing the IDs of the currently selected rows in the Table. This property allows you to retrieve which rows are selected by their unique identifiers, or programmatically update the selection by supplying an array of row IDs. */\n\t@Input()\n\tget onUpdateComplete(): { (): void } {\n\t\treturn this.nativeElement ? this.nativeElement.onUpdateComplete : undefined;\n\t}\n\tset onUpdateComplete(value: { (): void }) {\n\t\tthis.nativeElement ? this.nativeElement.onUpdateComplete = value : undefined;\n\t}\n\n\t/** @description Controls whether users can select table rows using checkboxes. When enabled, checkboxes appear next to each row, allowing users to select or deselect rows. The value can be set to enable or disable this feature, or retrieved to check the current selection mode. */\n\t@Input()\n\tget pageSize(): number {\n\t\treturn this.nativeElement ? this.nativeElement.pageSize : undefined;\n\t}\n\tset pageSize(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.pageSize = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves the current selection mode for the component. This property is only applicable when selection functionality is enabled. Use it to specify how users can select items (e.g., single, multiple, or none). */\n\t@Input()\n\tget pageIndex(): number {\n\t\treturn this.nativeElement ? this.nativeElement.pageIndex : undefined;\n\t}\n\tset pageIndex(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.pageIndex = value : undefined;\n\t}\n\n\t/** @description Controls the hierarchical row selection behavior using checkboxes. When enabled, selecting a parent row automatically selects all of its child (sub) rows. Likewise, deselecting a parent row will deselect all of its sub rows. You can use this property to get the current hierarchical selection state or to enable/disable this feature. */\n\t@Input()\n\tget paging(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.paging : undefined;\n\t}\n\tset paging(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.paging = value : undefined;\n\t}\n\n\t/** @description Specifies the sorting behavior applied to the table, such as ascending, descending, or custom order. This setting controls how table data is organized and displayed to the user. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Specifies which aspects of the Table's current state can be saved (using autoSaveState or saveState) and restored (using autoLoadState or loadState). This determines which settings—such as column visibility, sorting, filters, and pagination—are included when persisting or retrieving the Table’s configuration. */\n\t@Input()\n\tget rowDetailTemplate(): string {\n\t\treturn this.nativeElement ? this.nativeElement.rowDetailTemplate : undefined;\n\t}\n\tset rowDetailTemplate(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.rowDetailTemplate = value : undefined;\n\t}\n\n\t/** @description Specifies the theme used to style the element. The theme controls the overall appearance, including colors, fonts, and visual effects, ensuring a consistent look and feel across the user interface. */\n\t@Input()\n\tget onFilterRowInput(): any {\n\t\treturn this.nativeElement ? this.nativeElement.onFilterRowInput : undefined;\n\t}\n\tset onFilterRowInput(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.onFilterRowInput = value : undefined;\n\t}\n\n\t/** @description Determines whether a tooltip displaying the full, untruncated content appears when a user hovers over a table cell that contains truncated text. When enabled, hovering the mouse pointer over a cell with clipped or overflowed text will show a tooltip with the complete content; when disabled, no tooltip is displayed on hover. This setting can be used to specify or retrieve the current tooltip behavior for truncated cell content. */\n\t@Input()\n\tget selected(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.selected : undefined;\n\t}\n\tset selected(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.selected = value : undefined;\n\t}\n\n\t/** @description Controls whether HTML virtualization is enabled. When activated, only the rows currently visible within the viewport are rendered in the DOM, rather than all rows at once. This optimization significantly improves table performance, especially when displaying large datasets, by reducing memory usage and speeding up rendering times. */\n\t@Input()\n\tget selection(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.selection : undefined;\n\t}\n\tset selection(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.selection = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget selectionMode(): TableSelectionMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.selectionMode : undefined;\n\t}\n\tset selectionMode(value: TableSelectionMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.selectionMode = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget selectionByHierarchy(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.selectionByHierarchy : undefined;\n\t}\n\tset selectionByHierarchy(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.selectionByHierarchy = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget sort(): { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void } {\n\t\treturn this.nativeElement ? this.nativeElement.sort : undefined;\n\t}\n\tset sort(value: { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }) {\n\t\tthis.nativeElement ? this.nativeElement.sort = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget sortMode(): TableSortMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.sortMode : undefined;\n\t}\n\tset sortMode(value: TableSortMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.sortMode = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget stateSettings(): string[] {\n\t\treturn this.nativeElement ? this.nativeElement.stateSettings : undefined;\n\t}\n\tset stateSettings(value: string[]) {\n\t\tthis.nativeElement ? this.nativeElement.stateSettings = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget tooltip(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.tooltip : undefined;\n\t}\n\tset tooltip(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.tooltip = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget virtualization(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.virtualization : undefined;\n\t}\n\tset virtualization(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.virtualization = value : undefined;\n\t}\n\n\t/** @description This event is triggered when a user begins editing the contents of a cell, signaling the initiation of a cell edit operation. It provides an opportunity to perform preparatory actions, such as validating the cell, applying custom styles, or capturing the cell’s initial value before any changes are made.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \tdataField, \trow, \tvalue)\n\t*   id - The id of the row.\n\t*   dataField - The data field of the cell's column.\n\t*   row - The data of the cell's row.\n\t*   value - The data value of the cell.\n\t*/\n\t@Output() onCellBeginEdit: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user clicks on a cell within the component or data grid. It provides contextual information about the clicked cell, such as its row and column index, allowing you to perform custom actions in response to user interaction.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \tdataField, \trow, \tvalue, \toriginalEvent)\n\t*   id - The cell's row id.\n\t*   dataField - The data field of the cell's column.\n\t*   row - The data of the cell's row.\n\t*   value - The data value of the cell.\n\t*   originalEvent - The 'click' event object.\n\t*/\n\t@Output() onCellClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered immediately after a cell's value has been modified by the user, allowing you to respond to changes as soon as a cell is edited. It provides relevant information about the edited cell, such as its new value, previous value, row, and column, enabling precise handling of cell updates within the table or data grid.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \tdataField, \trow, \tvalue)\n\t*   id - The id of the row.\n\t*   dataField - The data field of the cell's column.\n\t*   row - The new data of the cell's row.\n\t*   value - The data value of the cell.\n\t*/\n\t@Output() onCellEndEdit: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever the user changes the current selection, such as highlighting text or selecting an item. Inside the event handler, you can access the updated selection by calling the 'getSelection' method. This allows you to retrieve information about the newly selected content or item and perform any necessary actions in response to the change.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttype)\n\t*   type - The type of action that initiated the selection change. Possible types: 'programmatic', 'interaction', 'remove'.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a row in the data grid or table is collapsed, meaning its contents or nested rows are hidden from view. Use this event to execute custom logic after a user collapses a specific row.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \trecord)\n\t*   id - The id of the collapsed row.\n\t*   record - The data of the collapsed row.\n\t*/\n\t@Output() onCollapse: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a row in the table is expanded by the user, typically to reveal additional details or nested content associated with that row.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \trecord)\n\t*   id - The id of the expanded row.\n\t*   record - The (aggregated) data of the expanded row.\n\t*/\n\t@Output() onExpand: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user clicks on a column header cell, typically indicating that the header was selected—such as to initiate actions like sorting or displaying column options. It provides contextual information about the clicked header cell, enabling you to implement custom behaviors in response to header interactions.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdataField)\n\t*   dataField - The data field of the cell's column.\n\t*/\n\t@Output() onColumnClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered immediately after the column menu has been closed by the user, either by clicking outside the menu or performing an action that causes it to close. It allows you to execute custom logic in response to the closure of a column-specific menu in the interface.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdataField)\n\t*   dataField - The data field of the column.\n\t*/\n\t@Output() onCloseColumnMenu: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a column's width is changed by the user, either by dragging the column's edge or by double-clicking to auto-fit the column. It allows you to respond to column resize actions, enabling custom logic such as persisting new column widths or updating related UI elements.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdataField, \theaderCellElement, \twidth)\n\t*   dataField - The data field of the column.\n\t*   headerCellElement - The column's header cell HTML element.\n\t*   width - The new width of the column.\n\t*/\n\t@Output() onColumnResize: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user initiates or modifies a filtering action, such as applying, updating, or removing filters. It allows the application to respond to changes in filtering criteria, ensuring that the displayed data accurately reflects the selected filters.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\taction, \tfilters)\n\t*   action - The filtering action. Possible actions: 'add', 'remove'.\n\t*   filters - The added filters. Only when action is 'add'.\n\t*/\n\t@Output() onFilter: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user performs an action related to grouping, such as creating, modifying, or deleting a group, or changing the grouping configuration. It allows your application to respond dynamically to changes in how items are grouped.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\taction, \tdataField, \tlabel, \tpath)\n\t*   action - The grouping action. Possible actions: 'add', 'collapse', 'expand', 'remove'.\n\t*   dataField - The data field of the column whose grouping is modified.\n\t*   label - The label of the group (only when collapsing/expanding).\n\t*   path - The group's path (only when collapsing/expanding). The path includes the path to the expanded/collapsed group starting from the root group. The indexes are joined with '.'. This parameter is available when the 'action' is 'expand' or 'collapse'.\n\t*/\n\t@Output() onGroup: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is fired whenever a user opens the menu associated with a column, such as by clicking a column header or menu icon. It provides an opportunity to perform custom actions or update the interface in response to the column menu becoming visible.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdataField)\n\t*   dataField - The data field of the column.\n\t*/\n\t@Output() onOpenColumnMenu: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever a user performs an action that changes the current page in a paginated component, such as navigating to the next or previous page, selecting a specific page number, or adjusting the page size.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\taction)\n\t*   action - The paging action. Possible actions: 'pageIndexChange', 'pageSizeChange'.\n\t*/\n\t@Output() onPage: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a user begins editing a table