@alaarab/ogrid-angular-primeng 2.0.2

package/dist/esm/datagrid-table/datagrid-table.component.js

@@ -0,0 +1,633 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, input, inject, signal, computed, effect, viewChild, ChangeDetectionStrategy, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, buildHeaderRows, getCellValue, } from '@alaarab/ogrid-angular';
+import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
+import { InlineCellEditorComponent } from './inline-cell-editor.component';
+let DataGridTableComponent = class DataGridTableComponent {
+    constructor() {
+        this.stateService = inject(DataGridStateService);
+        this.wrapperRef = viewChild('wrapper');
+        this.tableContainerRef = viewChild('tableContainer');
+        // Inputs mapped from IOGridDataGridProps
+        this.items = input.required();
+        this.columns = input.required();
+        this.getRowIdFn = input.required({ alias: 'getRowId' });
+        this.sortBy = input(undefined);
+        this.sortDirection = input('asc');
+        this.onColumnSort = input.required();
+        this.visibleColumns = input.required();
+        this.columnOrder = input(undefined);
+        this.onColumnOrderChange = input(undefined);
+        this.onColumnResized = input(undefined);
+        this.onColumnPinned = input(undefined);
+        this.pinnedColumns = input(undefined);
+        this.initialColumnWidths = input(undefined);
+        this.freezeRows = input(undefined);
+        this.freezeCols = input(undefined);
+        this.layoutMode = input('fill');
+        this.suppressHorizontalScroll = input(undefined);
+        this.isLoading = input(false);
+        this.loadingMessage = input('Loading\u2026');
+        this.editable = input(undefined);
+        this.cellSelection = input(undefined);
+        this.onCellValueChanged = input(undefined);
+        this.onUndo = input(undefined);
+        this.onRedo = input(undefined);
+        this.canUndo = input(undefined);
+        this.canRedo = input(undefined);
+        this.rowSelectionMode = input('none', { alias: 'rowSelection' });
+        this.selectedRows = input(undefined);
+        this.onSelectionChange = input(undefined);
+        this.statusBar = input(undefined);
+        this.filters = input.required();
+        this.onFilterChange = input.required();
+        this.filterOptions = input({});
+        this.loadingFilterOptions = input({});
+        this.peopleSearch = input(undefined);
+        this.getUserByEmail = input(undefined);
+        this.emptyState = input(undefined);
+        this.onCellError = input(undefined);
+        this.ariaLabel = input(undefined, { alias: 'aria-label' });
+        this.ariaLabelledBy = input(undefined, { alias: 'aria-labelledby' });
+        this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
+        this.statusBarClasses = {
+            statusBar: 'ogrid-status-bar',
+            statusBarItem: 'ogrid-status-bar-item',
+            statusBarLabel: 'ogrid-status-bar-label',
+            statusBarValue: 'ogrid-status-bar-value',
+        };
+        // Column sizing
+        this.columnSizingOverrides = signal({});
+        this.resizeStartX = 0;
+        this.resizeColumnId = '';
+        this.resizeStartWidth = 0;
+        // Last shift state for row checkbox
+        this.lastMouseShift = false;
+        this.state = computed(() => this.stateService.getState());
+        this.tableContainerEl = computed(() => this.tableContainerRef()?.nativeElement ?? null);
+        this.resolvedAriaLabel = computed(() => this.ariaLabel() ?? (this.ariaLabelledBy() ? undefined : 'Data grid'));
+        this.headerRows = computed(() => buildHeaderRows(this.columns(), this.visibleColumns()));
+        this.allowOverflowX = computed(() => {
+            const s = this.state();
+            return !this.suppressHorizontalScroll() && s.layout.containerWidth > 0 &&
+                (s.layout.minTableWidth > s.layout.containerWidth || s.layout.desiredTableWidth > s.layout.containerWidth);
+        });
+        this.tableWidthStyle = computed(() => {
+            const s = this.state();
+            if (s.viewModels.showEmptyInGrid)
+                return '100%';
+            if (this.allowOverflowX())
+                return 'fit-content';
+            if (this.layoutMode() === 'content')
+                return 'fit-content';
+            return '100%';
+        });
+        this.tableMinWidthStyle = computed(() => {
+            const s = this.state();
+            if (s.viewModels.showEmptyInGrid)
+                return '100%';
+            if (this.allowOverflowX())
+                return 'max-content';
+            if (this.layoutMode() === 'content')
+                return 'max-content';
+            return '100%';
+        });
+        this.selectedCellCount = computed(() => {
+            const range = this.state().interaction.selectionRange;
+            if (!range)
+                return undefined;
+            return (Math.abs(range.endRow - range.startRow) + 1) *
+                (Math.abs(range.endCol - range.startCol) + 1);
+        });
+        // Wire inputs to DataGridStateService
+        effect(() => {
+            const props = this.buildProps();
+            this.stateService.props.set(props);
+        });
+        effect(() => {
+            const el = this.wrapperRef()?.nativeElement ?? null;
+            this.stateService.wrapperEl.set(el);
+        });
+        // Initialize column sizing from initial widths
+        effect(() => {
+            const iw = this.initialColumnWidths();
+            if (iw) {
+                this.columnSizingOverrides.set({ ...iw });
+            }
+        });
+    }
+    trackByRowId(_index, item) {
+        return this.getRowIdFn()(item);
+    }
+    getColumnWidth(col) {
+        const override = this.columnSizingOverrides()[col.columnId];
+        if (override)
+            return override;
+        return col.idealWidth ?? col.defaultWidth ?? undefined;
+    }
+    getFilterConfig(col) {
+        const s = this.state();
+        const hfi = s.viewModels.headerFilterInput;
+        const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+        const filterType = filterable?.type ?? 'none';
+        const filterField = filterable?.filterField ?? col.columnId;
+        const sortable = col.sortable !== false;
+        const filterValue = hfi.filters[filterField];
+        const base = {
+            filterType,
+            isSorted: hfi.sortBy === col.columnId,
+            isSortedDescending: hfi.sortBy === col.columnId && hfi.sortDirection === 'desc',
+            onSort: sortable ? () => hfi.onColumnSort(col.columnId) : undefined,
+        };
+        if (filterType === 'text') {
+            return {
+                ...base,
+                textValue: filterValue?.type === 'text' ? filterValue.value : '',
+                onTextChange: (v) => hfi.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
+            };
+        }
+        if (filterType === 'multiSelect') {
+            return {
+                ...base,
+                options: hfi.filterOptions[filterField] ?? [],
+                isLoadingOptions: hfi.loadingFilterOptions[filterField] ?? false,
+                selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+                onFilterChange: (values) => hfi.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
+            };
+        }
+        if (filterType === 'people') {
+            return {
+                ...base,
+                selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+                onUserChange: (u) => hfi.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
+                peopleSearch: hfi.peopleSearch,
+            };
+        }
+        if (filterType === 'date') {
+            return {
+                ...base,
+                dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+                onDateChange: (v) => hfi.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
+            };
+        }
+        return base;
+    }
+    getCellValueFn(item, col) {
+        return getCellValue(item, col);
+    }
+    resolveCellDisplay(col, item) {
+        if (col.renderCell && typeof col.renderCell === 'function') {
+            const result = col.renderCell(item);
+            return result ?? '';
+        }
+        const value = getCellValue(item, col);
+        if (col.valueFormatter)
+            return String(col.valueFormatter(value, item) ?? '');
+        if (value == null)
+            return '';
+        if (col.type === 'date') {
+            const d = new Date(String(value));
+            if (!Number.isNaN(d.getTime()))
+                return d.toLocaleDateString();
+        }
+        if (col.type === 'boolean')
+            return value ? 'True' : 'False';
+        return String(value);
+    }
+    getCellStyleObj(col, item) {
+        if (!col.cellStyle)
+            return null;
+        return typeof col.cellStyle === 'function'
+            ? col.cellStyle(item)
+            : col.cellStyle;
+    }
+    canEditCell(col, item) {
+        const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+        return this.editable() !== false && !!colEditable && this.onCellValueChanged() != null && typeof col.cellEditor !== 'function';
+    }
+    isEditingCell(item, col) {
+        const editing = this.state().editing.editingCell;
+        if (!editing)
+            return false;
+        return editing.rowId === this.getRowIdFn()(item) && editing.columnId === col.columnId;
+    }
+    getEditorType(col, _item) {
+        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
+            return col.cellEditor;
+        }
+        if (col.type === 'date')
+            return 'date';
+        if (col.type === 'boolean')
+            return 'checkbox';
+        return 'text';
+    }
+    isActiveCell(rowIndex, colIdx) {
+        const ac = this.state().interaction.activeCell;
+        if (!ac)
+            return false;
+        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.state().layout.colOffset;
+    }
+    isInSelectionRange(rowIndex, colIdx) {
+        const range = this.state().interaction.selectionRange;
+        if (!range)
+            return false;
+        const minR = Math.min(range.startRow, range.endRow);
+        const maxR = Math.max(range.startRow, range.endRow);
+        const minC = Math.min(range.startCol, range.endCol);
+        const maxC = Math.max(range.startCol, range.endCol);
+        return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
+    }
+    isSelectionEndCell(rowIndex, colIdx) {
+        const s = this.state();
+        const range = s.interaction.selectionRange;
+        if (!range || s.interaction.isDragging || s.interaction.copyRange || s.interaction.cutRange)
+            return false;
+        return rowIndex === range.endRow && colIdx === range.endCol;
+    }
+    getCellBackground(rowIndex, colIdx) {
+        if (this.isInSelectionRange(rowIndex, colIdx))
+            return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
+        return null;
+    }
+    // --- Event handlers ---
+    onMouseDown(e) {
+        this.lastMouseShift = e.shiftKey;
+    }
+    onGridKeyDown(e) {
+        this.state().interaction.handleGridKeyDown(e);
+    }
+    onCellMouseDown(e, rowIndex, globalColIndex) {
+        this.state().interaction.handleCellMouseDown(e, rowIndex, globalColIndex);
+    }
+    onCellDblClick(item, col, rowIndex, colIdx) {
+        if (this.canEditCell(col, item)) {
+            this.stateService.setEditingCell({ rowId: this.getRowIdFn()(item), columnId: col.columnId });
+        }
+    }
+    onCellContextMenu(e) {
+        this.state().contextMenu.handleCellContextMenu(e);
+    }
+    onCellEditorCommit(item, col, rowIndex, colIdx, newValue) {
+        const oldValue = getCellValue(item, col);
+        this.stateService.commitCellEdit(item, col.columnId, oldValue, newValue, rowIndex, colIdx + this.state().layout.colOffset);
+    }
+    onFillHandleMouseDown(e) {
+        this.state().interaction.handleFillHandleMouseDown(e);
+    }
+    onSelectAllChange(checked) {
+        this.state().rowSelection.handleSelectAll(checked);
+    }
+    onRowClick(e, item) {
+        if (this.rowSelectionMode() !== 'single')
+            return;
+        const rowId = this.getRowIdFn()(item);
+        const ids = this.state().rowSelection.selectedRowIds;
+        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+    }
+    onRowCheckboxChange(item, checked, rowIndex, e) {
+        const rowId = this.getRowIdFn()(item);
+        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+    }
+    handlePaste() {
+        void this.state().interaction.handlePaste();
+    }
+    onResizeStart(e, col) {
+        e.preventDefault();
+        this.resizeStartX = e.clientX;
+        this.resizeColumnId = col.columnId;
+        this.resizeStartWidth = this.getColumnWidth(col) ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const onMove = (me) => {
+            const delta = me.clientX - this.resizeStartX;
+            const minW = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+            const newWidth = Math.max(minW, this.resizeStartWidth + delta);
+            this.columnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            const finalWidth = this.columnSizingOverrides()[this.resizeColumnId];
+            if (finalWidth) {
+                this.onColumnResized()?.(this.resizeColumnId, finalWidth);
+                const overrides = {};
+                for (const [id, w] of Object.entries(this.columnSizingOverrides())) {
+                    overrides[id] = { widthPx: w };
+                }
+                this.state().layout.setColumnSizingOverrides(overrides);
+            }
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+    }
+    buildProps() {
+        return {
+            items: this.items(),
+            columns: this.columns(),
+            getRowId: this.getRowIdFn(),
+            sortBy: this.sortBy(),
+            sortDirection: this.sortDirection(),
+            onColumnSort: this.onColumnSort(),
+            visibleColumns: this.visibleColumns(),
+            columnOrder: this.columnOrder(),
+            onColumnOrderChange: this.onColumnOrderChange(),
+            onColumnResized: this.onColumnResized(),
+            onColumnPinned: this.onColumnPinned(),
+            pinnedColumns: this.pinnedColumns(),
+            initialColumnWidths: this.initialColumnWidths(),
+            freezeRows: this.freezeRows(),
+            freezeCols: this.freezeCols(),
+            layoutMode: this.layoutMode(),
+            suppressHorizontalScroll: this.suppressHorizontalScroll(),
+            isLoading: this.isLoading(),
+            loadingMessage: this.loadingMessage(),
+            editable: this.editable(),
+            cellSelection: this.cellSelection(),
+            onCellValueChanged: this.onCellValueChanged(),
+            onUndo: this.onUndo(),
+            onRedo: this.onRedo(),
+            canUndo: this.canUndo(),
+            canRedo: this.canRedo(),
+            rowSelection: this.rowSelectionMode(),
+            selectedRows: this.selectedRows(),
+            onSelectionChange: this.onSelectionChange(),
+            statusBar: this.statusBar(),
+            filters: this.filters(),
+            onFilterChange: this.onFilterChange(),
+            filterOptions: this.filterOptions(),
+            loadingFilterOptions: this.loadingFilterOptions(),
+            peopleSearch: this.peopleSearch(),
+            getUserByEmail: this.getUserByEmail(),
+            emptyState: this.emptyState(),
+            onCellError: this.onCellError(),
+            'aria-label': this.ariaLabel(),
+            'aria-labelledby': this.ariaLabelledBy(),
+        };
+    }
+};
+DataGridTableComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-datagrid-table',
+        standalone: true,
+        imports: [
+            CommonModule,
+            StatusBarComponent,
+            GridContextMenuComponent,
+            MarchingAntsOverlayComponent,
+            EmptyStateComponent,
+            ColumnHeaderFilterComponent,
+            InlineCellEditorComponent,
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [DataGridStateService],
+        template: `
+    <div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column">
+      <div
+        #wrapper
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.data-empty]="state().viewModels.showEmptyInGrid ? 'true' : null"
+        [attr.data-column-count]="state().layout.totalColCount"
+        [attr.data-freeze-rows]="freezeRows() != null && freezeRows()! >= 1 ? freezeRows() : null"
+        [attr.data-freeze-cols]="freezeCols() != null && freezeCols()! >= 1 ? freezeCols() : null"
+        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+        [attr.data-has-selection]="rowSelectionMode() !== 'none' ? 'true' : null"
+        (contextmenu)="$event.preventDefault()"
+        (keydown)="onGridKeyDown($event)"
+        (mousedown)="onMouseDown($event)"
+        style="flex:1;min-height:0;overflow:auto;outline:none;position:relative;font-size:13px;color:var(--ogrid-fg, #242424)"
+        [style.--data-table-column-count]="state().layout.totalColCount"
+        [style.--data-table-width]="tableWidthStyle()"
+        [style.--data-table-min-width]="tableMinWidthStyle()"
+      >
+        <div style="position:relative">
+          <div [class.loading-dimmed]="isLoading() && items().length > 0" style="position:relative">
+            <div #tableContainer style="position:relative">
+              <table
+                style="width:var(--data-table-width, 100%);min-width:var(--data-table-min-width, 100%);border-collapse:collapse;table-layout:fixed"
+              >
+                <thead style="position:sticky;top:0;z-index:3;background:var(--ogrid-header-bg, #f5f5f5)">
+                  @for (row of headerRows(); track $index; let rowIdx = $index) {
+                    <tr>
+                      @if (rowIdx === headerRows().length - 1 && state().layout.hasCheckboxCol) {
+                        <th
+                          scope="col"
+                          rowSpan="1"
+                          style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
+                        >
+                          <input
+                            type="checkbox"
+                            [checked]="state().rowSelection.allSelected"
+                            [indeterminate]="state().rowSelection.someSelected && !state().rowSelection.allSelected"
+                            (change)="onSelectAllChange($any($event.target).checked)"
+                            aria-label="Select all rows"
+                          />
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && state().layout.hasCheckboxCol) {
+                        <th [attr.rowSpan]="headerRows().length - 1"></th>
+                      }
+                      @for (cell of row; track $index; let cellIdx = $index) {
+                        @if (cell.isGroup) {
+                          <th
+                            [attr.colSpan]="cell.colSpan"
+                            scope="colgroup"
+                            style="padding:6px 8px;text-align:center;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
+                          >
+                            {{ cell.label }}
+                          </th>
+                        } @else {
+                          <th
+                            scope="col"
+                            [attr.data-column-id]="cell.columnDef!.columnId"
+                            [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
+                            style="padding:6px 8px;text-align:left;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0);position:relative"
+                            [style.min-width.px]="cell.columnDef!.minWidth ?? defaultMinWidth"
+                            [style.width.px]="getColumnWidth(cell.columnDef!)"
+                            [style.max-width.px]="getColumnWidth(cell.columnDef!)"
+                          >
+                            <ogrid-primeng-column-header-filter
+                              [columnKey]="cell.columnDef!.columnId"
+                              [columnName]="cell.columnDef!.name"
+                              [filterType]="getFilterConfig(cell.columnDef!).filterType"
+                              [isSorted]="getFilterConfig(cell.columnDef!).isSorted ?? false"
+                              [isSortedDescending]="getFilterConfig(cell.columnDef!).isSortedDescending ?? false"
+                              [onSort]="getFilterConfig(cell.columnDef!).onSort"
+                              [selectedValues]="getFilterConfig(cell.columnDef!).selectedValues"
+                              [onFilterChange]="getFilterConfig(cell.columnDef!).onFilterChange"
+                              [options]="getFilterConfig(cell.columnDef!).options ?? []"
+                              [isLoadingOptions]="getFilterConfig(cell.columnDef!).isLoadingOptions ?? false"
+                              [textValue]="getFilterConfig(cell.columnDef!).textValue ?? ''"
+                              [onTextChange]="getFilterConfig(cell.columnDef!).onTextChange"
+                              [selectedUser]="getFilterConfig(cell.columnDef!).selectedUser"
+                              [onUserChange]="getFilterConfig(cell.columnDef!).onUserChange"
+                              [peopleSearch]="getFilterConfig(cell.columnDef!).peopleSearch"
+                              [dateValue]="getFilterConfig(cell.columnDef!).dateValue"
+                              [onDateChange]="getFilterConfig(cell.columnDef!).onDateChange"
+                            ></ogrid-primeng-column-header-filter>
+                            <div
+                              style="position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize"
+                              (mousedown)="onResizeStart($event, cell.columnDef!)"
+                              [attr.aria-label]="'Resize ' + cell.columnDef!.name"
+                            ></div>
+                          </th>
+                        }
+                      }
+                    </tr>
+                  }
+                </thead>
+
+                @if (!state().viewModels.showEmptyInGrid) {
+                  <tbody>
+                    @for (item of items(); track trackByRowId($index, item); let rowIndex = $index) {
+                      <tr
+                        [attr.data-row-id]="getRowIdFn()(item)"
+                        [style.background]="state().rowSelection.selectedRowIds.has(getRowIdFn()(item)) ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
+                        (click)="onRowClick($event, item)"
+                      >
+                        @if (state().layout.hasCheckboxCol) {
+                          <td
+                            style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #f0f0f0)"
+                            [attr.data-row-index]="rowIndex"
+                            [attr.data-col-index]="0"
+                            (click)="$event.stopPropagation()"
+                          >
+                            <input
+                              type="checkbox"
+                              [checked]="state().rowSelection.selectedRowIds.has(getRowIdFn()(item))"
+                              (change)="onRowCheckboxChange(item, $any($event.target).checked, rowIndex, $event)"
+                              [attr.aria-label]="'Select row ' + (rowIndex + 1)"
+                            />
+                          </td>
+                        }
+                        @for (col of state().layout.visibleCols; track col.columnId; let colIdx = $index) {
+                          <td
+                            style="padding:0;border-bottom:1px solid var(--ogrid-border, #f0f0f0);position:relative"
+                            [style.min-width.px]="col.minWidth ?? defaultMinWidth"
+                            [style.width.px]="getColumnWidth(col)"
+                            [style.max-width.px]="getColumnWidth(col)"
+                            [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
+                          >
+                            @if (isEditingCell(item, col)) {
+                              <ogrid-primeng-inline-cell-editor
+                                [value]="getCellValueFn(item, col)"
+                                [item]="item"
+                                [column]="col"
+                                [rowIndex]="rowIndex"
+                                [editorType]="getEditorType(col, item)"
+                                (commit)="onCellEditorCommit(item, col, rowIndex, colIdx, $event)"
+                                (cancel)="state().editing.setEditingCell(null)"
+                              ></ogrid-primeng-inline-cell-editor>
+                            } @else {
+                              <div
+                                [attr.data-row-index]="rowIndex"
+                                [attr.data-col-index]="colIdx + state().layout.colOffset"
+                                (mousedown)="onCellMouseDown($event, rowIndex, colIdx + state().layout.colOffset)"
+                                (dblclick)="onCellDblClick(item, col, rowIndex, colIdx)"
+                                (contextmenu)="onCellContextMenu($event)"
+                                style="padding:6px 10px;min-height:20px;cursor:default;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+                                [style.cursor]="canEditCell(col, item) ? 'cell' : 'default'"
+                                [style.background]="getCellBackground(rowIndex, colIdx)"
+                                [style.outline]="isActiveCell(rowIndex, colIdx) ? '2px solid var(--ogrid-selection, #217346)' : null"
+                                [style.outline-offset]="isActiveCell(rowIndex, colIdx) ? '-2px' : null"
+                              >
+                                <span [style]="getCellStyleObj(col, item)">{{ resolveCellDisplay(col, item) }}</span>
+                                @if (canEditCell(col, item) && isSelectionEndCell(rowIndex, colIdx)) {
+                                  <div
+                                    (mousedown)="onFillHandleMouseDown($event)"
+                                    style="position:absolute;bottom:-3px;right:-3px;width:7px;height:7px;background:var(--ogrid-selection, #217346);cursor:crosshair;z-index:2"
+                                    aria-label="Fill handle"
+                                  ></div>
+                                }
+                              </div>
+                            }
+                          </td>
+                        }
+                      </tr>
+                    }
+                  </tbody>
+                }
+              </table>
+
+              <ogrid-marching-ants-overlay
+                [containerEl]="tableContainerEl()"
+                [selectionRange]="state().interaction.selectionRange"
+                [copyRange]="state().interaction.copyRange"
+                [cutRange]="state().interaction.cutRange"
+                [colOffset]="state().layout.colOffset"
+              ></ogrid-marching-ants-overlay>
+
+              @if (state().viewModels.showEmptyInGrid && emptyState()) {
+                <div style="display:flex;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--ogrid-muted, #999)">
+                  <div>
+                    <div style="font-weight:600;margin-bottom:8px">No results found</div>
+                    <ogrid-empty-state
+                      [message]="emptyState()?.message"
+                      [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
+                      [render]="emptyState()?.render"
+                      (clearAll)="emptyState()?.onClearAll()"
+                    ></ogrid-empty-state>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+
+      @if (state().contextMenu.menuPosition) {
+        <ogrid-context-menu
+          [x]="state().contextMenu.menuPosition!.x"
+          [y]="state().contextMenu.menuPosition!.y"
+          [hasSelection]="state().interaction.hasCellSelection"
+          [canUndoProp]="state().interaction.canUndo"
+          [canRedoProp]="state().interaction.canRedo"
+          (copy)="state().interaction.handleCopy()"
+          (cut)="state().interaction.handleCut()"
+          (paste)="handlePaste()"
+          (selectAll)="state().interaction.handleSelectAllCells()"
+          (undoAction)="state().interaction.onUndo?.()"
+          (redoAction)="state().interaction.onRedo?.()"
+          (close)="state().contextMenu.closeContextMenu()"
+        ></ogrid-context-menu>
+      }
+
+      @if (state().viewModels.statusBarConfig) {
+        <ogrid-status-bar
+          [totalCount]="state().viewModels.statusBarConfig!.totalCount"
+          [filteredCount]="state().viewModels.statusBarConfig!.filteredCount"
+          [selectedCount]="state().viewModels.statusBarConfig!.selectedCount ?? state().rowSelection.selectedRowIds.size"
+          [selectedCellCount]="selectedCellCount()"
+          [aggregation]="state().viewModels.statusBarConfig!.aggregation"
+          [suppressRowCount]="state().viewModels.statusBarConfig!.suppressRowCount"
+          [classNames]="statusBarClasses"
+        ></ogrid-status-bar>
+      }
+
+      @if (isLoading()) {
+        <div
+          style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.7);z-index:10"
+          aria-live="polite"
+        >
+          <div style="display:flex;align-items:center;gap:8px;color:var(--ogrid-fg, #242424)">
+            <span style="font-size:14px">{{ loadingMessage() }}</span>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+        styles: [`
+    .loading-dimmed {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `],
+    })
+], DataGridTableComponent);
+export { DataGridTableComponent };