@acorex/components 18.5.17 → 18.6.0

package/fesm2022/acorex-components-data-table.mjs

@@ -160,24 +160,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
+/**
+ * Component for a text column in a data table, supporting header, cell, and footer templates.
+ *
+ * @category Components
+ */
 class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
+        /**
+         * Toggles text wrapping in the cell.
+         *
+         * @defaultValue false
+         */
         this.wrapText = false;
+        /**
+         *  @ignore
+         */
         this.formatService = inject(AXFormatService);
     }
+    /**
+     * Returns the template used for rendering cells.
+     * Falls back to a default template if no custom template is provided.
+     */
     get renderCellTemplate() {
         return this.cellTemplate ?? this._contentCellTemplate;
     }
+    /**
+     * Returns the template used for rendering the column footer,
+     * falling back to a default if not provided.
+     */
     get renderFooterTemplate() {
         return this.footerTemplate ?? this._contentFooterTemplate;
     }
+    /**
+     * Retrieves the template used for rendering the column header.
+     * Falls back to a default template if none is provided.
+     */
     get renderHeaderTemplate() {
         return this.headerTemplate ?? this._contentHeaderTemplate;
     }
+    /**
+     * Indicates whether loading functionality is enabled.
+     */
     get loadingEnabled() {
         return true;
     }
+    /**
+     * Generates a unique name based on the `dataField` value.
+     */
     get name() {
         return `cl-${this.dataField}`;
     }
@@ -266,24 +297,50 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
         return 'ax-command-column';
     }
 }
+/**
+ * A column for displaying dropdown command buttons in a data table.
+ *
+ * @category Components
+ */
 class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         this._items = [];
         this.items = [];
     }
+    /**
+     * Returns the template used for rendering cell content.
+     * This method provides the cell template used in the data table column, falling back to a default template if none is provided.
+     */
     get renderCellTemplate() {
         return this._cellTemplate;
     }
+    /**
+     * Returns the template used for rendering the header content.
+     * This method provides the header template used in the data table column.
+     */
     get renderHeaderTemplate() {
         return this._contentHeaderTemplate;
     }
+    /**
+     * Returns the template used for rendering the footer content.
+     * This method provides the footer template used in the data table column.
+     */
     get renderFooterTemplate() {
         return this.footerTemplate ?? this._contentFooterTemplate;
     }
+    /**
+     * Returns the name identifier for the column component.
+     */
     get name() {
         return 'cl-dd-cmd';
     }
+    /**
+     *  @ignore
+     */
     async handleOnOpened(rowData) {
         if (Array.isArray(this.items)) {
             this._items = this.items;
@@ -301,9 +358,15 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
         }
         this.cdr.detectChanges();
     }
+    /**
+     *  @ignore
+     */
     handleOnClosed() {
         this._items = [];
     }
+    /**
+     *  @ignore
+     */
     handleOnItemClick(e, data) {
         const args = {
             component: this.grid,
@@ -404,23 +467,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             }], items: [{
                 type: Input
             }] } });
+/**
+ * A column for displaying command buttons in a data table.
+ *
+ * @category Components
+ */
 class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     constructor() {
         super(...arguments);
+        /**
+       * Defines the command items to display in the column.
+       * @defaultValue []
+       */
         this.items = [];
     }
+    /**
+     * Returns the template used for rendering the cell content.
+     * Uses the specified cell template if provided; otherwise, falls back to a default template.
+     */
     get renderCellTemplate() {
         return this._cellTemplate;
     }
+    /**
+     * Returns the template used for rendering the header content.
+     * Overrides the base implementation to provide a specific template for the command column.
+     */
     get renderHeaderTemplate() {
         return this._contentHeaderTemplate;
     }
+    /**
+     * Gets the template used for rendering the footer content of the column.
+     * Returns `footerTemplate` if provided; otherwise, returns `_contentFooterTemplate`.
+     */
     get renderFooterTemplate() {
         return this.footerTemplate ?? this._contentFooterTemplate;
     }
+    /**
+     * Gets the unique name identifier for the command column.
+     */
     get name() {
         return 'cl-in-cmd';
     }
+    /**
+     *  @ignore
+     */
     getItems(rowData) {
         if (Array.isArray(this.items)) {
             return this.items;
@@ -432,6 +522,9 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         }
         return [];
     }
+    /**
+     *  @ignore
+     */
     handleOnItemClick(e, item, data) {
         const args = {
             component: this.grid,
@@ -513,27 +606,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Component for displaying row indices in a data table column.
+ *
+ * @category Components
+ */
 class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
         this.grid = inject(AXBaseDataTable);
         this.unsubscriber = inject(AXUnsubscriber);
+        /**
+       * Determines whether the index should be zero-padded.
+       * @defaultValue false
+       */
         this.padZero = false;
+        /**
+         *  @ignore
+         */
         this.formatCount = 1;
+        /**
+       * Disables sorting for this column.
+       *
+       * @defaultValue false
+       */
         this.allowSorting = false;
     }
+    /**
+     * Provides the cell template for custom rendering if defined.
+     */
     get renderCellTemplate() {
         return this._cellTemplate;
     }
+    /**
+     * Provides the header template for custom rendering if defined.
+     */
     get renderHeaderTemplate() {
         return this._contentHeaderTemplate;
     }
+    /**
+     * Returns the template used for rendering the footer of the column.
+     * This method returns the `footerTemplate` if it is provided; otherwise, it defaults to the `_contentFooterTemplate`. This allows for custom footer content while falling back to a default template if no custom template is specified.
+     */
     get renderFooterTemplate() {
         return this.footerTemplate ?? this._contentFooterTemplate;
     }
+    /**
+     * Gets the unique identifier name for the column.
+     */
     get name() {
         return 'cl-inx';
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         if (this.padZero) {
             this.grid.dataSource.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
@@ -541,9 +667,15 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
             });
         }
     }
+    /**
+   * Indicates whether loading is enabled for this component.
+   */
     get loadingEnabled() {
         return false;
     }
+    /**
+     * Gets the CSS class applied to the component.
+     */
     get cssClass() {
         return 'ax-index-column';
     }
@@ -595,36 +727,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Column component that provides checkboxes for row selection in a data table.
+ *
+ * @category Components
+ */
 class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
         this.grid = inject(AXBaseDataTable);
     }
+    /**
+     * Gets the template used to render cells in the column.
+     */
     get renderCellTemplate() {
         return this._cellTemplate;
     }
+    /**
+     * Gets the template used to render the column header.
+     */
     get renderHeaderTemplate() {
         return this._contentHeaderTemplate;
     }
+    /**
+     * Gets the template used to render the column footer.
+     */
     get renderFooterTemplate() {
         return this._contentFooterTemplate;
     }
+    /**
+     * Gets the unique identifier for the column.
+     */
     get name() {
         return 'cl-select';
     }
+    /**
+     *  @ignore
+     */
     getDataSourceKey() {
         return this.grid.dataSource.config.key || 'id';
     }
+    /**
+     *  @ignore
+     */
     isSelected(item) {
         const key = this.getDataSourceKey();
         const selectedRowKeys = this.grid.selectedRows.map((sr) => (typeof sr === 'object' ? sr[key] : sr));
         return item != null && selectedRowKeys.includes(typeof item === 'object' ? item[key] : item);
     }
+    /**
+     *  @ignore
+     */
     checkAllSelected(rows) {
         const key = this.getDataSourceKey();
         const selectedRowKeys = this.grid.selectedRows.map((sr) => (typeof sr === 'object' ? sr[key] : sr));
         return rows[0] && rows.every((element) => selectedRowKeys.includes(typeof element === 'object' ? element[key] : element));
     }
+    /**
+     *  @ignore
+     */
     checkAnySelected(rows) {
         const key = this.getDataSourceKey();
         const selectedRowKeys = this.grid.selectedRows.map((sr) => (typeof sr === 'object' ? sr[key] : sr));
@@ -632,6 +793,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
             !this.checkAllSelected(rows) &&
             rows.some((element) => selectedRowKeys.includes(typeof element === 'object' ? element[key] : element)));
     }
+    /**
+     *  @ignore
+     */
     handleChange(item) {
         if (this.isSelected(item)) {
             this.grid.unSelectRows(item);
@@ -640,6 +804,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
             this.grid.selectRows(item);
         }
     }
+    /**
+     *  @ignore
+     */
     handleSelectAll(rows) {
         if (this.checkAllSelected(rows)) {
             this.grid.unSelectRows(...rows);
@@ -648,6 +815,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
             this.grid.selectRows(...rows);
         }
     }
+    /**
+     * Indicates whether loading is enabled for the column.
+     */
     get loadingEnabled() {
         return false;
     }
@@ -721,19 +891,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: ['footer']
             }] } });
 
+/**
+ * Component for displaying and managing a data table with advanced features.
+ *
+ * @category Components
+ */
 class AXDataTableComponent extends AXBaseDataTable {
     constructor() {
         super(...arguments);
         this._unsubscriber = inject(AXUnsubscriber);
         this._zone = inject(NgZone);
+        /**
+         *  @ignore
+         */
         this.displayedRows = signal([]);
+        /**
+         *  @ignore
+         */
         this.page = signal(0);
+        /**
+         *  @ignore
+         */
         this.pageSize = signal(0);
+        /**
+         *  @ignore
+         */
         this.isLoading = signal(true);
+        /**
+         *  @ignore
+         */
         this.columnsList = signal([]);
+        /**
+         *  @ignore
+         */
         this.endFixedColumnsList = computed(() => this.columnsList().filter((c) => c.fixed === 'end'));
+        /**
+         *  @ignore
+         */
         this.startFixedColumnsList = computed(() => this.columnsList().filter((c) => c.fixed === 'start'));
+        /**
+         *  @ignore
+         */
         this.normalColumnsList = computed(() => this.columnsList().filter((c) => c.fixed !== 'end' && c.fixed !== 'start'));
+        /**
+         *  @ignore
+         */
         this.resizeColumnProp = {
             startX: 0,
             startWidth: 0,
@@ -741,35 +943,129 @@ class AXDataTableComponent extends AXBaseDataTable {
             newColumnWidth: 0,
             thElement: null,
         };
+        /**
+         *  @ignore
+         */
         this.hasItems = false;
+        /**
+         *  @ignore
+         */
         this.totalRows = 0;
+        /**
+         *  @ignore
+         */
         this.currentPage = 0;
+        /**
+         *  @ignore
+         */
         this.totalPages = 0;
+        /**
+         *  @ignore
+         */
         this.startRowIndex = 0;
+        /**
+         * Defines if alternative row styling should be applied.
+         *
+         * @defaultValue `true`
+         */
         this.alternative = true;
+        /**
+         * Indicates if the table header should be displayed.
+         *
+         * @defaultValue `true`
+         */
         this.showHeader = true;
+        /**
+         * Indicates if the table header should be fixed.
+         *
+         * @defaultValue `true`
+         */
         this.fixedHeader = true;
+        /**
+        * Indicates if the table footer should be displayed.
+        *
+        * @defaultValue `false`
+        */
         this.showFooter = false;
+        /**
+       * Indicates if the table footer should be fixed.
+       *
+       * @defaultValue `true`
+       */
         this.fixedFooter = true;
+        /**
+       * Specifies the height of each item in the table.
+       *
+       * @defaultValue `40`
+       */
         this.itemHeight = 40;
+        /**
+        * Enables or disables row reordering.
+        *
+        * @defaultValue `false`
+        */
         this.allowReordering = false;
+        /**
+       * Enables or disables paging.
+       *
+       * @defaultValue `true`
+       */
         this.paging = true;
+        /**
+       * Specifies how data should be fetched.
+       *
+       * @defaultValue `'auto'`
+       */
         this.fetchDataMode = 'auto';
+        /**
+       * Configuration for loading state.
+       *
+       * @defaultValue `{ enabled: true, animation: true }`
+       */
         this.loading = {
             enabled: true,
             animation: true,
         };
+        /**
+       * Emits when the focused row changes.
+       *
+       * @event
+       */
         this.focusedRowChange = new EventEmitter();
+        /**
+       * Emits when a row is clicked.
+       *
+       * @event onRowClick
+       */
         this.onRowClick = new EventEmitter();
+        /**
+       * Emits when a row is double-clicked.
+       *
+       * @event onRowDbClick
+       */
         this.onRowDbClick = new EventEmitter();
+        /**
+       * Emits when the order of columns changes.
+       *
+       * @event onColumnsOrderChanged
+       */
         this.onColumnsOrderChanged = new EventEmitter();
+        /**
+         *  @ignore
+         */
         this.clickSubject = new Subject();
+        /**
+         *  @ignore
+         */
         this.onResizeColumnMove = (event) => {
             const diffX = event.pageX - this.resizeColumnProp.startX;
             const newWidth = this.rtl ? this.resizeColumnProp.startWidth - diffX : this.resizeColumnProp.startWidth + diffX;
             this.resizeColumnProp.thElement.style.width = `${Math.max(100, newWidth)}px`;
             this.resizeColumnProp.thElement.setAttribute('new-width', `${newWidth}`);
         };
+        /**
+         *  @ignore
+         */
         this.onResizeColumnEnd = () => {
             document.removeEventListener('mousemove', this.onResizeColumnMove);
             document.removeEventListener('mouseup', this.onResizeColumnEnd);
@@ -778,13 +1074,24 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.resetResizingProcess();
         };
     }
+    /**
+   * Gets the currently focused row.
+   */
     get focusedRow() {
         return this._focusedRow;
     }
+    /**
+   * Sets the currently focused row and emits the change event.
+   *
+   * @param v - The row to be focused.
+   */
     set focusedRow(v) {
         this._focusedRow = v;
         this.focusedRowChange.emit(v);
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         super.ngOnInit();
         this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
@@ -810,6 +1117,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.handleRowDoubleClick(clickArray[0].event, clickArray[0].item);
         });
     }
+    /**
+     *  @ignore
+     */
     ngAfterViewInit() {
         this.calculateStickyColumnsPositions();
         this.columnsList.set(this.columns.toArray());
@@ -817,6 +1127,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.columnsList.set(cols.toArray());
         });
     }
+    /**
+     *  @ignore
+     */
     drop(event) {
         const clonedColumns = [...this.columnsList()];
         moveItemInArray(clonedColumns, event.previousIndex, event.currentIndex);
@@ -827,10 +1140,16 @@ class AXDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+     *  @ignore
+     */
     handleRowClick(event, item) {
         this.handleRowSingleClick(event, item);
         this.clickSubject.next({ event, item });
     }
+    /**
+     *  @ignore
+     */
     handleRowSingleClick(event, item) {
         if (this.focusedRow == item) {
             this.focusedRow = null;
@@ -845,6 +1164,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+     *  @ignore
+     */
     onPageChanged(event) {
         if (event.isUserInteraction) {
             const pageChanged = event.page - 1 != this.page();
@@ -863,6 +1185,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             }
         }
     }
+    /**
+     *  @ignore
+     */
     handleRowDoubleClick(e, item) {
         this.focusedRow = item;
         //
@@ -872,6 +1197,14 @@ class AXDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+   * Handles the click event on a column header.
+   * Toggles the sorting direction or removes the sort if already sorted.
+   *
+   * @param e - The mouse event triggered by the click.
+   * @param column - The column that was clicked.
+   * @ignore
+   */
     handleColumnClick(e, column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
@@ -892,6 +1225,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.refresh();
         }
     }
+    /**
+     *  @ignore
+     */
     getSort(column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
@@ -899,15 +1235,25 @@ class AXDataTableComponent extends AXBaseDataTable {
         }
         return undefined;
     }
+    /**
+   * Refreshes the data in the data source and resets the data pager to the first page.
+   * @ignore
+   */
     refresh() {
         this.dataSource.refresh();
         if (this.dataPager) {
             this.dataPager.goFirstPage();
         }
     }
+    /**
+     *  @ignore
+     */
     calculateRowIndex(index) {
         return this.dataSource.pageSize * this.page() + index;
     }
+    /**
+     *  @ignore
+     */
     onResizeColumnStart(event, columnIndex) {
         event.preventDefault();
         event.stopPropagation();
@@ -920,6 +1266,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             document.addEventListener('mouseup', this.onResizeColumnEnd);
         });
     }
+    /**
+     *  @ignore
+     */
     resetResizingProcess() {
         this.resizeColumnProp.thElement.removeAttribute('new-width');
         this.resizeColumnProp = {
@@ -930,6 +1279,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             thElement: null,
         };
     }
+    /**
+     *  @ignore
+     */
     calculateStickyColumnsPositions() {
         let totalWidth = 0;
         let accumulatedWidthFromStart = 0;
@@ -1028,51 +1380,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: [AXDataTableColumnComponent]
             }] } });
 
+/**
+ * Component for a data table with infinite scrolling capabilities.
+ *
+ * @category Components
+ */
 class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
     constructor() {
         super(...arguments);
         this.ngZone = inject(NgZone);
+        /**
+         * Emits an event when the page changes.
+         *
+         * @event
+         */
         this.onPageChanged = new EventEmitter();
+        /**
+         *  @ignore
+         */
         this.clickSubject = new Subject();
+        /**
+         * Emits an event when a row is clicked.
+         *
+         * @event
+         */
         this.onRowClick = new EventEmitter();
+        /**
+         * Emits an event when a row is double-clicked.
+         *
+         * @event
+         */
         this.onRowDbClick = new EventEmitter();
+        /**
+         * Controls the visibility of the table header.
+         *
+         * @defaultValue true
+         */
         this.showHeader = true;
+        /**
+         * Defines the mode for fetching data.
+         *
+         * @defaultValue 'auto'
+         */
         this.fetchDataMode = 'auto';
+        /**
+         * Configuration for the loading state of the data table.
+         *
+         * @defaultValue { enabled: true, animation: true }
+         */
         this.loading = {
             enabled: true,
             animation: true,
         };
+        /**
+         *  @ignore
+         */
         this.isLoading = signal(true);
+        /**
+         *  @ignore
+         */
         this.hasItems = false;
+        /**
+         *  @ignore
+         */
         this.totalRows = 0;
+        /**
+         *  @ignore
+         */
         this.currentPage = 0;
+        /**
+         *  @ignore
+         */
         this.totalPages = 0;
+        /**
+         *  @ignore
+         */
         this.startRowIndex = 0;
+        /**
+         *  @ignore
+         */
         this.lastIndex = 0;
+        /**
+         * Event emitted when the focused row changes.
+         *
+         * @event
+         */
         this.focusedRowChange = new EventEmitter();
+        /**
+         * Defines the height of each item in the table.
+         *
+         * @default 40
+         */
         this.itemHeight = 40;
+        /**
+         *  @ignore
+         */
         this.width = '100%';
+        /**
+         *  @ignore
+         */
         this.height = '100%';
+        /**
+         * Emitted when the scroll index changes in the table.
+         *
+         * @event
+         */
         this.onScrolledIndexChanged = new EventEmitter();
     }
+    /**
+     *  @ignore
+     */
     startFixedColumn() {
         return this.columns?.toArray().filter((c) => c.fixed == 'start') ?? [];
     }
+    /**
+     *  @ignore
+     */
     endFixedColumn() {
         return this.columns?.toArray().filter((c) => c.fixed == 'end') ?? [];
     }
+    /**
+     *  @ignore
+     */
     notFixedColumn() {
         return this.columns?.toArray().filter((c) => !c.fixed) ?? [];
     }
+    /**
+     *  @ignore
+     */
     notFixedColumnCount() {
         return this.columns?.toArray().filter((c) => !c.fixed).length ?? 0;
     }
+    /**
+     *  @ignore
+     */
     fixedColumnCount() {
         return this.columns?.toArray().filter((c) => c.fixed).length ?? 0;
     }
+    /**
+     * Retrieves the currently focused row.
+     */
     get focusedRow() {
         return this._focusedRow;
     }
+    /**
+     * Sets the currently focused row and emits a change event.
+     *
+     * @param v - The row data to be set as focused.
+     */
     set focusedRow(v) {
         this._focusedRow = v;
         this.focusedRowChange.emit(v);
@@ -1080,6 +1535,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
     trackByIdx(i) {
         return i;
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         super.ngOnInit();
         this.listDataSource = new AXListDataSource({
@@ -1102,6 +1560,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             this.handleRowDoubleClick(clickArray[0].event, clickArray[0].item);
         });
     }
+    /**
+     *  @ignore
+     */
     _handleOnscrolledIndexChange(e) {
         this.lastIndex = e;
         this.onScrolledIndexChanged.emit({
@@ -1110,6 +1571,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+     *  @ignore
+     */
     ngDoCheck() {
         //this.copyFixedColumns();
         this.updateHScroll();
@@ -1119,6 +1583,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         //
         this.updateTotalCount();
     }
+    /**
+     *  @ignore
+     */
     updateTotalCount() {
         this.startRowIndex = this.lastIndex;
         if (this.startRowIndex < 1)
@@ -1126,15 +1593,24 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         if (this.startRowIndex > this.totalRows)
             this.startRowIndex = this.totalRows;
     }
+    /**
+     *  @ignore
+     */
     updateHeight() {
         this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
     }
+    /**
+     *  @ignore
+     */
     updateWidth() {
         if (this.columns && this.columns.length) {
             const sumPx = sum(this.columns.toArray().map((c) => (typeof c.width == 'number' ? c.width : Number(c.width.replace('px', '')))));
             this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
         }
     }
+    /**
+     *  @ignore
+     */
     updateHScroll() {
         this.ngZone.runOutsideAngular(() => {
             if (this.headerContainer) {
@@ -1144,6 +1620,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             }
         });
     }
+    /**
+     *  @ignore
+     */
     // Function to copy fixed columns
     copyFixedColumns() {
         const originalRows = Array.from(this.viewport._contentWrapper.nativeElement.querySelectorAll('tr'));
@@ -1161,19 +1640,34 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         const scrollTop = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollTop;
         fixedColumnTable.style.transform = `translateY(${-scrollTop}px)`;
     }
+    /**
+     * Updates the viewport by checking its size and scrolling to the last index.
+     * Marks the component for change detection.
+     * @ignore
+     */
     render() {
         this.viewport.checkViewportSize();
         this.viewport.scrollToIndex(this.lastIndex);
         this.cdr.markForCheck();
     }
+    /**
+     * Resets the index to zero and refreshes the data source.
+     * @ignore
+     */
     refresh() {
         this.lastIndex = 0;
         this.listDataSource.refresh();
     }
+    /**
+     *  @ignore
+     */
     handleRowClick(event, item) {
         this.handleRowSingleClick(event, item);
         this.clickSubject.next({ event, item });
     }
+    /**
+     *  @ignore
+     */
     handleRowSingleClick(event, item) {
         if (this.focusedRow == item) {
             this.focusedRow = null;
@@ -1188,6 +1682,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+     *  @ignore
+     */
     handleRowDoubleClick(e, item) {
         this.focusedRow = item;
         //
@@ -1197,6 +1694,13 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             isUserInteraction: true,
         });
     }
+    /**
+   * Handles column header clicks to toggle sorting on the column.
+   *
+   * @param e - The mouse event triggered by the click.
+   * @param column - The column that was clicked.
+   * @ignore
+   */
     handleColumnClick(e, column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
@@ -1217,6 +1721,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
             this.refresh();
         }
     }
+    /**
+     *  @ignore
+     */
     getSort(column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
@@ -1224,6 +1731,9 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         }
         return undefined;
     }
+    /**
+     *  @ignore
+     */
     _handleOnScroll() {
         this.updateHScroll();
     }