smart-webcomponents-angular/fesm2015/smart-webcomponents-angular-grid.mjs.map

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

{"version":3,"file":"smart-webcomponents-angular-grid.mjs","sources":["../../grid/src/smart.element.ts","../../grid/src/smart.grid.ts","../../grid/src/smart.grid.module.ts","../../grid/src/smart-webcomponents-angular-grid.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 { Grid } from './../index';\nimport { GridAppearanceAutoGenerateRowLabelMode, GridAppearanceAutoGenerateColumnLabelMode, GridResizeMode, GridClipboardAutoFillMode, HorizontalAlignment, VerticalAlignment, Position, GridColumnFilterMenuMode, GridColumnSortOrder, GridConditionalFormattingCondition, GridDataExportPageOrientation, GridDataSourceSettingsSanitizeHTML, GridDataSourceSettingsDataFieldDataType, GridDataSourceSettingsDataSourceType, GridEditingAction, LayoutPosition, GridCommandDisplayMode, GridEditingMode, GridEditingAddNewRowDisplayMode, GridFilteringFilterRowApplyMode, GridFilteringFilterMenuMode, GridGroupingExpandMode, GridGroupingRenderMode, GridHeaderSearchCommand, GridPagerAutoEllipsis, Scrolling, GridSelectionMode, GridSelectionAction, GridSelectionCheckBoxesSelectAllMode, GridSortingMode, GridSortingCommandKey, GridAppearance, GridAi, GridBehavior, GridColumnHeader, GridClipboard, GridColumn, GridContextMenu, GridContextMenuDataSource, GridCommand, GridColumnMenu, GridColumnMenuDataSource, GridColumnGroup, GridConditionalFormatting, GridCharting, Dialog, GridCheckBoxes, GridDataExport, GridDataSourceSettings, GridDataSourceSettingsDataField, GridEditing, GridEditingCommandKeys, GridCommandKey, GridEditingCommandBar, GridEditingCommandBarDataSource, GridEditingCommandColumn, GridEditingCommandColumnDataSource, GridEditingAddNewRow, GridEditingAddNewColumn, GridFiltering, GridFilteringFilterRow, GridFilteringFilterMenu, GridFilteringFilterBuilder, GridFooter, GridGrouping, GridGroupingGroupBar, GridGroupingSummaryRow, GridGroupHeader, GridHeader, GridLayout, GridPaging, GridPagingSpinner, GridPager, GridPagerPageSizeSelector, GridPagerSummary, GridPagerNavigationButtons, GridPagerNavigationButtonsPrevNextButtons, GridPagerNavigationButtonsFirstLastButtons, GridPagerNavigationButtonsLabels, GridPagerNavigationInput, GridPagerPageIndexSelectors, GridRowDetail, GridRow, GridCell, GridSummaryRow, GridStateSettings, GridSelection, GridSelectionCheckBoxes, GridSorting, GridUploadSettings, ElementRenderMode} from './../index';\nimport { DataAdapter, Chart } from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { GridAppearanceAutoGenerateRowLabelMode, GridAppearanceAutoGenerateColumnLabelMode, GridResizeMode, GridClipboardAutoFillMode, HorizontalAlignment, VerticalAlignment, Position, GridColumnFilterMenuMode, GridColumnSortOrder, GridConditionalFormattingCondition, GridDataExportPageOrientation, GridDataSourceSettingsSanitizeHTML, GridDataSourceSettingsDataFieldDataType, GridDataSourceSettingsDataSourceType, GridEditingAction, LayoutPosition, GridCommandDisplayMode, GridEditingMode, GridEditingAddNewRowDisplayMode, GridFilteringFilterRowApplyMode, GridFilteringFilterMenuMode, GridGroupingExpandMode, GridGroupingRenderMode, GridHeaderSearchCommand, GridPagerAutoEllipsis, Scrolling, GridSelectionMode, GridSelectionAction, GridSelectionCheckBoxesSelectAllMode, GridSortingMode, GridSortingCommandKey, GridAppearance, GridAi, GridBehavior, GridColumnHeader, GridClipboard, GridColumn, GridContextMenu, GridContextMenuDataSource, GridCommand, GridColumnMenu, GridColumnMenuDataSource, GridColumnGroup, GridConditionalFormatting, GridCharting, Dialog, GridCheckBoxes, GridDataExport, GridDataSourceSettings, GridDataSourceSettingsDataField, GridEditing, GridEditingCommandKeys, GridCommandKey, GridEditingCommandBar, GridEditingCommandBarDataSource, GridEditingCommandColumn, GridEditingCommandColumnDataSource, GridEditingAddNewRow, GridEditingAddNewColumn, GridFiltering, GridFilteringFilterRow, GridFilteringFilterMenu, GridFilteringFilterBuilder, GridFooter, GridGrouping, GridGroupingGroupBar, GridGroupingSummaryRow, GridGroupHeader, GridHeader, GridLayout, GridPaging, GridPagingSpinner, GridPager, GridPagerPageSizeSelector, GridPagerSummary, GridPagerNavigationButtons, GridPagerNavigationButtonsPrevNextButtons, GridPagerNavigationButtonsFirstLastButtons, GridPagerNavigationButtonsLabels, GridPagerNavigationInput, GridPagerPageIndexSelectors, GridRowDetail, GridRow, GridCell, GridSummaryRow, GridStateSettings, GridSelection, GridSelectionCheckBoxes, GridSorting, GridUploadSettings, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { Grid } from './../index';\nexport { DataAdapter, Chart } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-grid',\tselector: 'smart-grid, [smart-grid]'\n})\n\nexport class GridComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<Grid>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as Grid;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: Grid;\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 = <Grid>document.createElement('smart-grid');\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 An object that defines configurable options for customizing the visual appearance of the grid, including properties such as line color, spacing, background style, and border visibility. */\n\t@Input()\n\tget appearance(): GridAppearance {\n\t\treturn this.nativeElement ? this.nativeElement.appearance : undefined;\n\t}\n\tset appearance(value: GridAppearance) {\n\t\tthis.nativeElement ? this.nativeElement.appearance = value : undefined;\n\t}\n\n\t/** @description An object that defines configuration options for integrating AI capabilities within the grid component. This includes settings for enabling AI features, specifying AI service endpoints, setting authentication credentials, and customizing how the grid interacts with AI-powered functionalities. */\n\t@Input()\n\tget ai(): GridAi {\n\t\treturn this.nativeElement ? this.nativeElement.ai : undefined;\n\t}\n\tset ai(value: GridAi) {\n\t\tthis.nativeElement ? this.nativeElement.ai = value : undefined;\n\t}\n\n\t/** @description An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings. */\n\t@Input()\n\tget behavior(): GridBehavior {\n\t\treturn this.nativeElement ? this.nativeElement.behavior : undefined;\n\t}\n\tset behavior(value: GridBehavior) {\n\t\tthis.nativeElement ? this.nativeElement.behavior = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the id of the currently active user. This value must match the id of one of the entries in the users property or array. The active user's privileges and access rights are determined based on their corresponding user object. If no current user is specified (i.e., the id is unset or invalid), the default privileges for the element will apply according to its properties, potentially restricting or allowing access based on default settings. */\n\t@Input()\n\tget currentUser(): string | number {\n\t\treturn this.nativeElement ? this.nativeElement.currentUser : undefined;\n\t}\n\tset currentUser(value: string | number) {\n\t\tthis.nativeElement ? this.nativeElement.currentUser = value : undefined;\n\t}\n\n\t/** @description Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid. */\n\t@Input()\n\tget columnHeader(): GridColumnHeader {\n\t\treturn this.nativeElement ? this.nativeElement.columnHeader : undefined;\n\t}\n\tset columnHeader(value: GridColumnHeader) {\n\t\tthis.nativeElement ? this.nativeElement.columnHeader = value : undefined;\n\t}\n\n\t/** @description The clipboard property controls whether users can perform clipboard operations—such as copying (Ctrl+C), cutting (Ctrl+X), and pasting (Ctrl+V)—using keyboard shortcuts within the application. Setting this property to true enables these keyboard shortcuts for clipboard actions; setting it to false disables them, preventing users from using keyboard navigation for copying, cutting, or pasting content. */\n\t@Input()\n\tget clipboard(): GridClipboard {\n\t\treturn this.nativeElement ? this.nativeElement.clipboard : undefined;\n\t}\n\tset clipboard(value: GridClipboard) {\n\t\tthis.nativeElement ? this.nativeElement.clipboard = value : undefined;\n\t}\n\n\t/** @description The columns property defines the collection of columns displayed within the Smart.Grid component. Each column configuration specifies how data is presented and interacted with. Through this property, you can control essential aspects such as column headers, data field bindings, sorting, filtering, formatting, alignment, visibility, and more. The columns property gives you full control over the structure, appearance, and behavior of the grid's columns, enabling advanced customization of both data presentation and user experience. */\n\t@Input()\n\tget columns(): {label: string, dataField: string}[] | string[] | number | GridColumn[] {\n\t\treturn this.nativeElement ? this.nativeElement.columns : undefined;\n\t}\n\tset columns(value: {label: string, dataField: string}[] | string[] | number | GridColumn[]) {\n\t\tthis.nativeElement ? this.nativeElement.columns = value : undefined;\n\t}\n\n\t/** @description The Context Menu is the drop-down menu that appears when a user right-clicks on a row within the Grid. This menu provides quick access to actions such as deleting a row or editing a cell or entire row, depending on the current editing mode configured for the Grid. You can customize the Context Menu by using the 'contextMenuItemCustom' option in the Grid's dataSource. This option lets you add your own custom menu items to enhance or extend the menu's functionality.Additionally, if you want to completely replace the default context menu with your own, you can use the 'selector' property. Set this property to the ID of a Smart.Menu component to display your custom menu when the user right-clicks on a row in the Grid. */\n\t@Input()\n\tget contextMenu(): GridContextMenu {\n\t\treturn this.nativeElement ? this.nativeElement.contextMenu : undefined;\n\t}\n\tset contextMenu(value: GridContextMenu) {\n\t\tthis.nativeElement ? this.nativeElement.contextMenu = value : undefined;\n\t}\n\n\t/** @description The Column Menu is a contextual drop-down menu that appears when you click the drop-down button in a column header, which becomes visible upon hovering over the header. This menu provides various options for customizing the behavior and appearance of the selected column. Common actions include sorting the grid by the column, applying filters to show or hide specific data, and grouping the grid rows based on the column’s values. The Column Menu offers an intuitive way for users to interact with and tailor the data grid to meet their specific needs. */\n\t@Input()\n\tget columnMenu(): GridColumnMenu {\n\t\treturn this.nativeElement ? this.nativeElement.columnMenu : undefined;\n\t}\n\tset columnMenu(value: GridColumnMenu) {\n\t\tthis.nativeElement ? this.nativeElement.columnMenu = value : undefined;\n\t}\n\n\t/** @description Provides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group. */\n\t@Input()\n\tget columnGroups(): GridColumnGroup[] {\n\t\treturn this.nativeElement ? this.nativeElement.columnGroups : undefined;\n\t}\n\tset columnGroups(value: GridColumnGroup[]) {\n\t\tthis.nativeElement ? this.nativeElement.columnGroups = value : undefined;\n\t}\n\n\t/** @description  */\n\t@Input()\n\tget dropDownMode(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownMode : undefined;\n\t}\n\tset dropDownMode(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownMode = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves the rules and settings for conditional formatting applied to the Grid's cells, allowing you to customize cell appearance (such as background color, font style, or icons) based on specific conditions or cell values. */\n\t@Input()\n\tget conditionalFormatting(): GridConditionalFormatting[] {\n\t\treturn this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;\n\t}\n\tset conditionalFormatting(value: GridConditionalFormatting[]) {\n\t\tthis.nativeElement ? this.nativeElement.conditionalFormatting = value : undefined;\n\t}\n\n\t/** @description Configures the data and display settings for the Grid Chart, enabling data visualization in a tabular grid format. This includes specifying the structure, appearance, and interactive features of the chart to present complex data clearly and intuitively. */\n\t@Input()\n\tget charting(): GridCharting {\n\t\treturn this.nativeElement ? this.nativeElement.charting : undefined;\n\t}\n\tset charting(value: GridCharting) {\n\t\tthis.nativeElement ? this.nativeElement.charting = value : undefined;\n\t}\n\n\t/** @description Configures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure. */\n\t@Input()\n\tget checkBoxes(): GridCheckBoxes {\n\t\treturn this.nativeElement ? this.nativeElement.checkBoxes : undefined;\n\t}\n\tset checkBoxes(value: GridCheckBoxes) {\n\t\tthis.nativeElement ? this.nativeElement.checkBoxes = value : undefined;\n\t}\n\n\t/** @description Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences. */\n\t@Input()\n\tget dataExport(): GridDataExport {\n\t\treturn this.nativeElement ? this.nativeElement.dataExport : undefined;\n\t}\n\tset dataExport(value: GridDataExport) {\n\t\tthis.nativeElement ? this.nativeElement.dataExport = value : undefined;\n\t}\n\n\t/** @description Specifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of JQX.DataAdapter for advanced data management and operations, or a standard Array containing the data records to be displayed in the grid. This flexibility allows developers to connect the grid to various data formats and structures, making data binding straightforward and versatile. */\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 when the dataSource property is assigned either a JavaScript array (for local data) or a URL (for remote data). This setting determines how the grid retrieves and displays its data, supporting both direct array binding and remote data fetching via HTTP requests. */\n\t@Input()\n\tget dataSourceSettings(): GridDataSourceSettings {\n\t\treturn this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;\n\t}\n\tset dataSourceSettings(value: GridDataSourceSettings) {\n\t\tthis.nativeElement ? this.nativeElement.dataSourceSettings = value : undefined;\n\t}\n\n\t/** @description Provides comprehensive configuration options for controlling the grid's editing behavior, including enabling or disabling editing features, specifying editing modes (such as inline, popup, or batch), setting validation rules, and customizing editors for specific columns. */\n\t@Input()\n\tget editing(): GridEditing {\n\t\treturn this.nativeElement ? this.nativeElement.editing : undefined;\n\t}\n\tset editing(value: GridEditing) {\n\t\tthis.nativeElement ? this.nativeElement.editing = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for the grid's filtering functionality, including filter types, default filter values, filter operators, and custom filter logic for columns. This determines how data within the grid can be searched, narrowed, or displayed based on user-defined criteria. */\n\t@Input()\n\tget filtering(): GridFiltering {\n\t\treturn this.nativeElement ? this.nativeElement.filtering : undefined;\n\t}\n\tset filtering(value: GridFiltering) {\n\t\tthis.nativeElement ? this.nativeElement.filtering = value : undefined;\n\t}\n\n\t/** @description Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings. */\n\t@Input()\n\tget footer(): GridFooter {\n\t\treturn this.nativeElement ? this.nativeElement.footer : undefined;\n\t}\n\tset footer(value: GridFooter) {\n\t\tthis.nativeElement ? this.nativeElement.footer = value : undefined;\n\t}\n\n\t/** @description Enables or retrieves the ability to use Excel-style formulas as cell values within the table. Formulas must begin with an equal sign (=) and will be automatically recalculated whenever the referenced cell values are updated. This functionality relies on the third-party, free formula-parser plugin, so you must include the file 'formula-parser.min.js' in your project for this feature to work properly. */\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 Provides detailed configuration options for the grid's data grouping functionality, specifying how rows are grouped, the grouping criteria, and related display settings within the grid. */\n\t@Input()\n\tget grouping(): GridGrouping {\n\t\treturn this.nativeElement ? this.nativeElement.grouping : undefined;\n\t}\n\tset grouping(value: GridGrouping) {\n\t\tthis.nativeElement ? this.nativeElement.grouping = value : undefined;\n\t}\n\n\t/** @description Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings. */\n\t@Input()\n\tget groupHeader(): GridGroupHeader {\n\t\treturn this.nativeElement ? this.nativeElement.groupHeader : undefined;\n\t}\n\tset groupHeader(value: GridGroupHeader) {\n\t\tthis.nativeElement ? this.nativeElement.groupHeader = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns. */\n\t@Input()\n\tget header(): GridHeader {\n\t\treturn this.nativeElement ? this.nativeElement.header : undefined;\n\t}\n\tset header(value: GridHeader) {\n\t\tthis.nativeElement ? this.nativeElement.header = value : undefined;\n\t}\n\n\t/** @description An object that defines configuration options for the layout of the grid, including properties such as the number of columns, row and column spacing, alignment, and overall grid arrangement. This object allows you to customize the appearance and structure of the grid according to your requirements. */\n\t@Input()\n\tget layout(): GridLayout {\n\t\treturn this.nativeElement ? this.nativeElement.layout : undefined;\n\t}\n\tset layout(value: GridLayout) {\n\t\tthis.nativeElement ? this.nativeElement.layout = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the unlockKey used to authorize and access the full functionality of the product. The unlockKey serves as a security credential to enable locked or premium features. */\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 the language code to be used for displaying messages. When set, it determines which localized messages from the messages property are shown to the user. This property can be used to retrieve the current language or update it dynamically at runtime. */\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 'Key Handling:'  You can customize how key presses are handled by defining key mappings within the configuration. For each key (e.g., '\"Enter\"'), you can assign:- 'Another key as the value' (e.g., '\"Enter\": \"Tab\"'): When the specified key is pressed, it will be treated as if the mapped key was pressed instead.- 'A predefined action' (e.g., ''copy'', ''copyPrev'', ''copyNext'', ''delete''): When the key is pressed, the associated action will be executed.- 'A custom function': Assign a function as the value to execute custom logic whenever the key is pressed.This allows you to remap keys, trigger built-in actions, or define entirely custom behaviors based on key events in your application. */\n\t@Input()\n\tget keys(): any {\n\t\treturn this.nativeElement ? this.nativeElement.keys : undefined;\n\t}\n\tset keys(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.keys = value : undefined;\n\t}\n\n\t/** @description Assigns values to the messages property, which typically contains an array or object representing individual messages or notifications. This function or setting updates the content, ensuring that the correct message data is stored or displayed. */\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 Callback function (chart: JQX.Chart) invoked after the chart has been fully initialized. Use this function to perform additional configuration or customization of the chart instance, such as modifying chart options, adding event listeners, or updating data before the chart is rendered to the user. This allows you to tailor the chart's appearance and behavior to meet specific application requirements. */\n\t@Input()\n\tget onCellValue(): {(cell: GridCell): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellValue : undefined;\n\t}\n\tset onCellValue(value: {(cell: GridCell): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellValue = value : undefined;\n\t}\n\n\t/** @description A callback function that is executed immediately after the grid has finished rendering, allowing you to perform additional actions or updates once the grid display is complete. */\n\t@Input()\n\tget onCellUpdate(): {(cells: GridCell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellUpdate : undefined;\n\t}\n\tset onCellUpdate(value: {(cells: GridCell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellUpdate = value : undefined;\n\t}\n\n\t/** @description Callback function invoked after the grid has been rendered for the first time and all data bindings have been completed. At this point, the component is fully initialized and ready for interaction or further manipulation. */\n\t@Input()\n\tget onCellRender(): {(cell: GridCell): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellRender : undefined;\n\t}\n\tset onCellRender(value: {(cell: GridCell): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellRender = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for managing pagination, including parameters such as the number of items per page, current page index, and total number of pages. This section ensures efficient data retrieval and navigation across multiple pages of results. */\n\t@Input()\n\tget onCellBeginEdit(): {(id: string, dataField: string, value: any): boolean} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellBeginEdit : undefined;\n\t}\n\tset onCellBeginEdit(value: {(id: string, dataField: string, value: any): boolean}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellBeginEdit = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for pager controls, including settings for page size, navigation buttons, and display style. These options determine how pagination is displayed and how users interact with paged content in the interface. */\n\t@Input()\n\tget onCellEditRequest(): {(id: string, dataField: string, value: any, oldValue: any, data: any): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellEditRequest : undefined;\n\t}\n\tset onCellEditRequest(value: {(id: string, dataField: string, value: any, oldValue: any, data: any): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellEditRequest = value : undefined;\n\t}\n\n\t/** @description Configures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row. */\n\t@Input()\n\tget onCellValueChanged(): {(id: string, dataField: string, value: any): boolean} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellValueChanged : undefined;\n\t}\n\tset onCellValueChanged(value: {(id: string, dataField: string, value: any): boolean}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellValueChanged = value : undefined;\n\t}\n\n\t/** @description Sets or gets the CSS class rules for table rows. This property allows you to conditionally apply different CSS class names to rows based on custom logic. You provide an object where the keys are CSS class names and the values are functions that determine whether the class should be applied to a particular row.Each function receives a settings object with the following properties:- 'index': The numerical index of the current row.- 'data': The data object for the current row.- 'row': The raw row element or reference (depending on the implementation).- 'api': A reference to the table's API for advanced operations.'Example usage:''''jsrowCSSRules: {  'cell-class-1': settings => settings.data.quantity === 5,  'cell-class-2': settings => settings.data.quantity   'cell-class-3': settings => settings.data.quantity > 5}'''In this example, based on the 'quantity' property of the row's data, a different CSS class will be applied to that row. Multiple rules can be defined, and each will be evaluated for every row. If the function returns 'true', the corresponding class will be added to the row. */\n\t@Input()\n\tget onBeforeInit(): {(): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onBeforeInit : undefined;\n\t}\n\tset onBeforeInit(value: {(): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onBeforeInit = value : undefined;\n\t}\n\n\t/** @description Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages, ensuring proper layout and text direction for locales such as Arabic or Hebrew. */\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 The rows property contains an array of objects, with each object representing a single row in the grid. This property defines all the data entries that are rendered and displayed as rows within the grid component. Each element in the rows array should align with the column definitions, ensuring that the grid displays structured and consistent data across all rows. */\n\t@Input()\n\tget onAfterInit(): {(): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onAfterInit : undefined;\n\t}\n\tset onAfterInit(value: {(): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onAfterInit = value : undefined;\n\t}\n\n\t/** @description Configures the scroll mode behavior, allowing you to define how scrolling is handled within the component or page. This setting determines options such as smooth or instant scrolling, vertical or horizontal direction, and any custom scroll-related parameters. */\n\t@Input()\n\tget onChartInit(): any {\n\t\treturn this.nativeElement ? this.nativeElement.onChartInit : undefined;\n\t}\n\tset onChartInit(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.onChartInit = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized. */\n\t@Input()\n\tget onRender(): any {\n\t\treturn this.nativeElement ? this.nativeElement.onRender : undefined;\n\t}\n\tset onRender(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.onRender = value : undefined;\n\t}\n\n\t/** @description Configures the grid's state-related settings, including properties such as selection, sorting, filtering, pagination, and layout. This determines how the grid maintains and restores its current state during user interactions or when the page is reloaded. */\n\t@Input()\n\tget onLoad(): any {\n\t\treturn this.nativeElement ? this.nativeElement.onLoad : undefined;\n\t}\n\tset onLoad(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.onLoad = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for user selection behavior, including parameters such as selection mode (single or multiple), default selections, selection limits, and customizable callbacks for selection events. */\n\t@Input()\n\tget onKey(): {(event: KeyboardEvent): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onKey : undefined;\n\t}\n\tset onKey(value: {(event: KeyboardEvent): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onKey = value : undefined;\n\t}\n\n\t/** @description Provides detailed configuration options for controlling how data is sorted, including criteria such as sorting field, order (ascending or descending), and support for multiple sort keys. */\n\t@Input()\n\tget onRowInit(): {(index: number, row: GridRow): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowInit : undefined;\n\t}\n\tset onRowInit(value: {(index: number, row: GridRow): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowInit = value : undefined;\n\t}\n\n\t/** @description Defines the users displayed on the grid. Expects an array of user objects, where each object must include an 'id' (unique identifier) and a 'name' (display name). Optionally, each user object can also include a 'color' (for customizing the user's appearance) and an 'image' (URL or path to the user's avatar image). */\n\t@Input()\n\tget onRowDetailInit(): {(index: number, row: GridRow, details: HTMLElement): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowDetailInit : undefined;\n\t}\n\tset onRowDetailInit(value: {(index: number, row: GridRow, details: HTMLElement): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowDetailInit = value : undefined;\n\t}\n\n\t/** @description Configures the upload settings for images and attachments in the grid's image and attachment columns, including options for file type restrictions, size limits, and image filters to be applied during the upload process. */\n\t@Input()\n\tget onRowDetailUpdated(): {(index: number, row: GridRow, details: HTMLElement): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowDetailUpdated : undefined;\n\t}\n\tset onRowDetailUpdated(value: {(index: number, row: GridRow, details: HTMLElement): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowDetailUpdated = value : undefined;\n\t}\n\n\t/** @description Specifies the layout mode for displaying data within the interface. Acceptable values are:- ''grid'': Presents items in a tabular, spreadsheet-like format with rows and columns.- ''kanban'': Arranges items into columns representing workflow stages, similar to task boards.- ''card'': Displays each item as an individual card, typically used for concise summaries or visual grouping.Choose one of these values to determine how data is visually organized and presented to the user. */\n\t@Input()\n\tget onRowHistory(): {(index: number, row: GridRow, history: any[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowHistory : undefined;\n\t}\n\tset onRowHistory(value: {(index: number, row: GridRow, history: any[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowHistory = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowStyle(): {(index: number, row: GridRow, history: any[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowStyle : undefined;\n\t}\n\tset onRowStyle(value: {(index: number, row: GridRow, history: any[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowStyle = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowInserted(): {(index: number[], row: GridRow[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowInserted : undefined;\n\t}\n\tset onRowInserted(value: {(index: number[], row: GridRow[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowInserted = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowRemoved(): {(indexes: number[], rows: GridRow[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowRemoved : undefined;\n\t}\n\tset onRowRemoved(value: {(indexes: number[], rows: GridRow[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowRemoved = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowUpdate(): {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowUpdate : undefined;\n\t}\n\tset onRowUpdate(value: {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowUpdate = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowUpdated(): {(index: number[], row: GridRow[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowUpdated : undefined;\n\t}\n\tset onRowUpdated(value: {(index: number[], row: GridRow[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowUpdated = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onRowClass(): {(index: number, data: any, row: GridRow[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onRowClass : undefined;\n\t}\n\tset onRowClass(value: {(index: number, data: any, row: GridRow[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onRowClass = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onCellClass(): {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCellClass : undefined;\n\t}\n\tset onCellClass(value: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCellClass = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onColumnInit(): {(index: number, column: GridColumn): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnInit : undefined;\n\t}\n\tset onColumnInit(value: {(index: number, column: GridColumn): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnInit = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onColumnInserted(): {(index: number, column: GridColumn): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnInserted : undefined;\n\t}\n\tset onColumnInserted(value: {(index: number, column: GridColumn): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnInserted = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onColumnRemoved(): {(index: number, column: GridColumn): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnRemoved : undefined;\n\t}\n\tset onColumnRemoved(value: {(index: number, column: GridColumn): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnRemoved = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onColumnUpdated(): {(index: number, column: GridColumn): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnUpdated : undefined;\n\t}\n\tset onColumnUpdated(value: {(index: number, column: GridColumn): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnUpdated = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onColumnClone(): {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onColumnClone : undefined;\n\t}\n\tset onColumnClone(value: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onColumnClone = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget onCommand(): {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void} {\n\t\treturn this.nativeElement ? this.nativeElement.onCommand : undefined;\n\t}\n\tset onCommand(value: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}) {\n\t\tthis.nativeElement ? this.nativeElement.onCommand = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget paging(): GridPaging {\n\t\treturn this.nativeElement ? this.nativeElement.paging : undefined;\n\t}\n\tset paging(value: GridPaging) {\n\t\tthis.nativeElement ? this.nativeElement.paging = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget pager(): GridPager {\n\t\treturn this.nativeElement ? this.nativeElement.pager : undefined;\n\t}\n\tset pager(value: GridPager) {\n\t\tthis.nativeElement ? this.nativeElement.pager = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget rowDetail(): GridRowDetail {\n\t\treturn this.nativeElement ? this.nativeElement.rowDetail : undefined;\n\t}\n\tset rowDetail(value: GridRowDetail) {\n\t\tthis.nativeElement ? this.nativeElement.rowDetail = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget rowCSSRules(): any {\n\t\treturn this.nativeElement ? this.nativeElement.rowCSSRules : undefined;\n\t}\n\tset rowCSSRules(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.rowCSSRules = value : undefined;\n\t}\n\n\t/** @description undefined */\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 undefined */\n\t@Input()\n\tget rows(): GridRow[] {\n\t\treturn this.nativeElement ? this.nativeElement.rows : undefined;\n\t}\n\tset rows(value: GridRow[]) {\n\t\tthis.nativeElement ? this.nativeElement.rows = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget scrolling(): Scrolling | string {\n\t\treturn this.nativeElement ? this.nativeElement.scrolling : undefined;\n\t}\n\tset scrolling(value: Scrolling | string) {\n\t\tthis.nativeElement ? this.nativeElement.scrolling = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget summaryRow(): GridSummaryRow {\n\t\treturn this.nativeElement ? this.nativeElement.summaryRow : undefined;\n\t}\n\tset summaryRow(value: GridSummaryRow) {\n\t\tthis.nativeElement ? this.nativeElement.summaryRow = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget stateSettings(): GridStateSettings {\n\t\treturn this.nativeElement ? this.nativeElement.stateSettings : undefined;\n\t}\n\tset stateSettings(value: GridStateSettings) {\n\t\tthis.nativeElement ? this.nativeElement.stateSettings = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget selection(): GridSelection {\n\t\treturn this.nativeElement ? this.nativeElement.selection : undefined;\n\t}\n\tset selection(value: GridSelection) {\n\t\tthis.nativeElement ? this.nativeElement.selection = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget sorting(): GridSorting {\n\t\treturn this.nativeElement ? this.nativeElement.sorting : undefined;\n\t}\n\tset sorting(value: GridSorting) {\n\t\tthis.nativeElement ? this.nativeElement.sorting = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget users(): any[] {\n\t\treturn this.nativeElement ? this.nativeElement.users : undefined;\n\t}\n\tset users(value: any[]) {\n\t\tthis.nativeElement ? this.nativeElement.users = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget uploadSettings(): GridUploadSettings {\n\t\treturn this.nativeElement ? this.nativeElement.uploadSettings : undefined;\n\t}\n\tset uploadSettings(value: GridUploadSettings) {\n\t\tthis.nativeElement ? this.nativeElement.uploadSettings = value : undefined;\n\t}\n\n\t/** @description undefined */\n\t@Input()\n\tget view(): string {\n\t\treturn this.nativeElement ? this.nativeElement.view : undefined;\n\t}\n\tset view(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.view = value : undefined;\n\t}\n\n\t/** @description This event is fired when a cell transitions into edit mode. Within the event handler, you can prevent the editing action for specific cells, rows, or columns by invoking event.preventDefault(). This allows you to control which cells are editable based on custom logic or application requirements.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tid, \tdataField, \trow, \tcolumn, \tcell, \tdata, \tvalue)\n\t*   id - The unique identifier of the edited row.\n\t*   dataField - The data field (column) associated with the edited cell.\n\t*   row - The edited row's full configuration object.\n\t*   column - The column configuration of the edited cell.\n\t*   cell - The edited cell object.\n\t*   data - The complete data record of the edited row.\n\t*   value - The current value of the edited cell.\n\t*/\n\t@Output() onBeginEdit: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Triggered when a user confirms a batch action by clicking the 'OK' button in a Grid header dropdown. Typical actions include column customization, applying sorting, or setting filters. This event signifies that the changes selected in the dropdown have been finalized and applied to the Grid.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttype)\n\t*   type - The type of dropdown where the batch change occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.\n\t*/\n\t@Output() onBatchChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Triggered when a user clicks the 'Cancel' button in the header dropdown of a Grid, thereby aborting an ongoing batch operation. This event allows you to handle cleanup or UI updates when a batch process is intentionally stopped before completion.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\ttype)\n\t*   type - The type of dropdown where the cancellation occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.\n\t*/\n\t@Output() onBatchCancel: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Fires whenever the selection within the Grid changes. During drag selection, this event is emitted both at the beginning of the drag operation and again when the selection is completed, allowing you to respond to both initiation and completion of drag-based selection changes.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tstarted, \tfinished, \toriginalEvent)\n\t*   started - Set to <em>true</em> when selection begins; <em>false</em> otherwise.\n\t*   finished - Set to <em>true</em> when selection ends; <em>false</em> otherwise.\n\t*   originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the selection change.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Triggered when the user clicks on a column header in a table or grid, typically to initiate actions such as sorting, filtering, or displaying additional options related to that column. This event provides context about which column was interacted with, allowing developers to implement responsive behaviors based on user actions.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tcolumn, \tdataField, \toriginalEvent)\n\t*   column - The column configuration object of the clicked header.\n\t*   dataField - The data field associated with the clicked column.\n\t*   originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the click.\n\t*/\n\t@Output() onColumnClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Fires when a user double-clicks on a column header, typically to initiate actions such as resizing, sorting, or customizing the corresponding column. The event provides information about the specific column that was interacted with, allowing you to implement custom