@alaarab/ogrid-angular-material 2.0.2

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

@@ -0,0 +1,753 @@
+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, computed, effect, ChangeDetectionStrategy, viewChild, } from '@angular/core';
+import { DataGridStateService, buildHeaderRows, getCellValue, isInSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
+function getHeaderFilterConfig(col, input) {
+    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 = input.filters[filterField];
+    const base = {
+        columnKey: col.columnId,
+        columnName: col.name,
+        filterType,
+        isSorted: input.sortBy === col.columnId,
+        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
+        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
+    };
+    if (filterType === 'text') {
+        return {
+            ...base,
+            textValue: filterValue?.type === 'text' ? filterValue.value : '',
+            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
+        };
+    }
+    if (filterType === 'people') {
+        return {
+            ...base,
+            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
+            peopleSearch: input.peopleSearch,
+        };
+    }
+    if (filterType === 'multiSelect') {
+        return {
+            ...base,
+            options: input.filterOptions[filterField] ?? [],
+            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
+            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
+        };
+    }
+    if (filterType === 'date') {
+        return {
+            ...base,
+            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
+        };
+    }
+    return base;
+}
+function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
+    const rowId = input.getRowId(item);
+    const globalColIndex = colIdx + input.colOffset;
+    const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+    const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== 'function';
+    const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === 'function';
+    const canEditAny = canEditInline || canEditPopup;
+    const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
+    const isActive = input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
+    const inRange = input.selectionRange != null && isInSelectionRange(input.selectionRange, rowIndex, colIdx);
+    const isInCutRange = input.cutRange != null && isInSelectionRange(input.cutRange, rowIndex, colIdx);
+    const isSelectionEndCell = !input.isDragging && input.copyRange == null && input.cutRange == null &&
+        input.selectionRange != null && rowIndex === input.selectionRange.endRow && colIdx === input.selectionRange.endCol;
+    let mode = 'display';
+    let editorType;
+    const value = getCellValue(item, col);
+    if (isEditing && canEditInline) {
+        mode = 'editing-inline';
+        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'richSelect' || col.cellEditor === 'date') {
+            editorType = col.cellEditor;
+        }
+        else if (col.type === 'date')
+            editorType = 'date';
+        else if (col.type === 'boolean')
+            editorType = 'checkbox';
+        else
+            editorType = 'text';
+    }
+    else if (isEditing && canEditPopup) {
+        mode = 'editing-popover';
+    }
+    return {
+        mode, editorType, value,
+        isActive, isInRange: inRange, isInCutRange, isSelectionEndCell,
+        canEditAny, globalColIndex, rowId, rowIndex, displayValue: value,
+    };
+}
+function resolveCellDisplayContent(col, item, displayValue) {
+    if (col.renderCell && typeof col.renderCell === 'function') {
+        const result = col.renderCell(item);
+        return result != null ? String(result) : '';
+    }
+    if (col.valueFormatter)
+        return String(col.valueFormatter(displayValue, item) ?? '');
+    if (displayValue == null)
+        return '';
+    if (col.type === 'date') {
+        const d = new Date(String(displayValue));
+        if (!Number.isNaN(d.getTime()))
+            return d.toLocaleDateString();
+    }
+    if (col.type === 'boolean')
+        return displayValue ? 'True' : 'False';
+    return String(displayValue);
+}
+function resolveCellStyle(col, item) {
+    if (!col.cellStyle)
+        return undefined;
+    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
+}
+/**
+ * DataGridTable component using native HTML table with Material Design-inspired styling.
+ * Standalone component — this is the workhorse of the grid.
+ */
+let DataGridTableComponent = class DataGridTableComponent {
+    constructor() {
+        this.propsInput = input.required({ alias: 'props' });
+        this.wrapperRef = viewChild('wrapperEl');
+        this.tableContainerRef = viewChild('tableContainerEl');
+        this.stateService = new DataGridStateService();
+        this.lastMouseShift = false;
+        // --- Delegated state ---
+        this.state = computed(() => this.stateService.getState());
+        this.items = computed(() => this.propsInput()?.items ?? []);
+        this.getRowId = computed(() => this.propsInput()?.getRowId ?? ((item) => item['id']));
+        this.isLoading = computed(() => this.propsInput()?.isLoading ?? false);
+        this.loadingMessage = computed(() => 'Loading\u2026');
+        this.freezeRows = computed(() => this.propsInput()?.freezeRows);
+        this.freezeCols = computed(() => this.propsInput()?.freezeCols);
+        this.layoutModeFit = computed(() => (this.propsInput()?.layoutMode ?? 'fill') === 'content');
+        this.ariaLabel = computed(() => this.propsInput()?.['aria-label'] ?? 'Data grid');
+        this.ariaLabelledBy = computed(() => this.propsInput()?.['aria-labelledby']);
+        this.emptyState = computed(() => this.propsInput()?.emptyState);
+        // State service outputs
+        this.visibleCols = computed(() => this.state().layout.visibleCols);
+        this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
+        this.colOffset = computed(() => this.state().layout.colOffset);
+        this.containerWidth = computed(() => this.state().layout.containerWidth);
+        this.minTableWidth = computed(() => this.state().layout.minTableWidth);
+        this.desiredTableWidth = computed(() => this.state().layout.desiredTableWidth);
+        this.columnSizingOverrides = computed(() => this.state().layout.columnSizingOverrides);
+        this.selectedRowIds = computed(() => this.state().rowSelection.selectedRowIds);
+        this.allSelected = computed(() => this.state().rowSelection.allSelected);
+        this.someSelected = computed(() => this.state().rowSelection.someSelected);
+        this.editingCell = computed(() => this.state().editing.editingCell);
+        this.pendingEditorValue = computed(() => this.state().editing.pendingEditorValue);
+        this.activeCell = computed(() => this.state().interaction.activeCell);
+        this.selectionRange = computed(() => this.state().interaction.selectionRange);
+        this.hasCellSelection = computed(() => this.state().interaction.hasCellSelection);
+        this.cutRange = computed(() => this.state().interaction.cutRange);
+        this.copyRange = computed(() => this.state().interaction.copyRange);
+        this.canUndo = computed(() => this.state().interaction.canUndo);
+        this.canRedo = computed(() => this.state().interaction.canRedo);
+        this.isDragging = computed(() => this.state().interaction.isDragging);
+        this.menuPosition = computed(() => this.state().contextMenu.menuPosition);
+        this.statusBarConfig = computed(() => this.state().viewModels.statusBarConfig);
+        this.showEmptyInGrid = computed(() => this.state().viewModels.showEmptyInGrid);
+        this.headerFilterInput = computed(() => this.state().viewModels.headerFilterInput);
+        this.cellDescriptorInput = computed(() => this.state().viewModels.cellDescriptorInput);
+        this.allowOverflowX = computed(() => {
+            const p = this.propsInput();
+            if (p?.suppressHorizontalScroll)
+                return false;
+            const cw = this.containerWidth();
+            const mtw = this.minTableWidth();
+            const dtw = this.desiredTableWidth();
+            return cw > 0 && (mtw > cw || dtw > cw);
+        });
+        this.selectionCellCount = computed(() => {
+            const sr = this.selectionRange();
+            if (!sr)
+                return undefined;
+            return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
+        });
+        // Header rows from column definition
+        this.headerRows = computed(() => {
+            const p = this.propsInput();
+            if (!p)
+                return [];
+            return buildHeaderRows(p.columns, p.visibleColumns);
+        });
+        // Pre-computed column layouts
+        this.columnLayouts = computed(() => {
+            const cols = this.visibleCols();
+            const fc = this.freezeCols();
+            return cols.map((col, colIdx) => {
+                const isFreezeCol = fc != null && fc >= 1 && colIdx < fc;
+                const pinnedLeft = col.pinned === 'left' || (isFreezeCol && colIdx === 0);
+                const pinnedRight = col.pinned === 'right';
+                const w = this.getColumnWidth(col);
+                return {
+                    col,
+                    pinnedLeft,
+                    pinnedRight,
+                    minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                    width: w,
+                };
+            });
+        });
+        // Wire props and wrapper element to state service
+        effect(() => {
+            const p = this.propsInput();
+            if (p)
+                this.stateService.props.set(p);
+        });
+        effect(() => {
+            const el = this.wrapperRef()?.nativeElement;
+            if (el)
+                this.stateService.wrapperEl.set(el);
+        });
+    }
+    // --- Helper methods ---
+    asColumnDef(colDef) {
+        return colDef;
+    }
+    visibleColIndex(col) {
+        return this.visibleCols().indexOf(col);
+    }
+    getColumnWidth(col) {
+        const overrides = this.columnSizingOverrides();
+        const override = overrides[col.columnId];
+        if (override)
+            return override.widthPx;
+        return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    getFilterConfig(col) {
+        return getHeaderFilterConfig(col, this.headerFilterInput());
+    }
+    getCellDescriptor(item, col, rowIndex, colIdx) {
+        return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
+    }
+    resolveCellContent(col, item, displayValue) {
+        return resolveCellDisplayContent(col, item, displayValue);
+    }
+    resolveCellStyleFn(col, item) {
+        return resolveCellStyle(col, item);
+    }
+    getSelectValues(col) {
+        const params = col.cellEditorParams;
+        if (params && typeof params === 'object' && 'values' in params) {
+            return params.values.map(String);
+        }
+        return [];
+    }
+    formatDateForInput(value) {
+        if (!value)
+            return '';
+        const d = new Date(String(value));
+        if (Number.isNaN(d.getTime()))
+            return '';
+        return d.toISOString().split('T')[0];
+    }
+    // --- Event handlers ---
+    onWrapperMouseDown(event) {
+        this.lastMouseShift = event.shiftKey;
+    }
+    onGridKeyDown(event) {
+        this.state().interaction.handleGridKeyDown(event);
+    }
+    onCellMouseDown(event, rowIndex, globalColIndex) {
+        this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
+    }
+    onCellClick(rowIndex, globalColIndex) {
+        this.state().interaction.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+    }
+    onCellContextMenu(event) {
+        this.state().contextMenu.handleCellContextMenu(event);
+    }
+    onCellDblClick(rowId, columnId) {
+        this.state().editing.setEditingCell({ rowId, columnId });
+    }
+    onFillHandleMouseDown(event) {
+        this.state().interaction.handleFillHandleMouseDown(event);
+    }
+    onResizeStart(event, col) {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidth = this.getColumnWidth(col);
+        const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const onMove = (e) => {
+            const delta = e.clientX - startX;
+            const newWidth = Math.max(minWidth, startWidth + delta);
+            const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
+            this.state().layout.setColumnSizingOverrides(overrides);
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+            const finalWidth = this.getColumnWidth(col);
+            this.state().layout.onColumnResized?.(col.columnId, finalWidth);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }
+    onSelectAllChange(event) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleSelectAll(!!checked);
+    }
+    onRowClick(event, rowId) {
+        const p = this.propsInput();
+        if (p?.rowSelection !== 'single')
+            return;
+        const ids = this.selectedRowIds();
+        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+    }
+    onRowCheckboxChange(rowId, event, rowIndex) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+    }
+    commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    }
+    cancelEdit() {
+        this.state().editing.setEditingCell(null);
+    }
+    onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const newValue = event.target.value;
+            this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    closeContextMenu() {
+        this.state().contextMenu.closeContextMenu();
+    }
+    handleCopy() {
+        this.state().interaction.handleCopy();
+    }
+    handleCut() {
+        this.state().interaction.handleCut();
+    }
+    handlePaste() {
+        void this.state().interaction.handlePaste();
+    }
+    handleSelectAllCells() {
+        this.state().interaction.handleSelectAllCells();
+    }
+    onUndo() {
+        this.state().interaction.onUndo?.();
+    }
+    onRedo() {
+        this.state().interaction.onRedo?.();
+    }
+};
+DataGridTableComponent = __decorate([
+    Component({
+        selector: 'ogrid-datagrid-table',
+        standalone: true,
+        imports: [ColumnHeaderFilterComponent],
+        providers: [DataGridStateService],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
+    <div class="ogrid-datagrid-root">
+      <div
+        #wrapperEl
+        class="ogrid-datagrid-wrapper"
+        [class.ogrid-datagrid-wrapper--fit]="layoutModeFit()"
+        [class.ogrid-datagrid-wrapper--overflow-x]="allowOverflowX()"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        (mousedown)="onWrapperMouseDown($event)"
+        (keydown)="onGridKeyDown($event)"
+        (contextmenu)="$event.preventDefault()"
+        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+      >
+        <div class="ogrid-datagrid-scroll-wrapper">
+          <div [style.minWidth.px]="allowOverflowX() ? minTableWidth() : undefined">
+            <div [class.ogrid-datagrid-table-wrapper--loading]="isLoading() && items().length > 0" #tableContainerEl>
+              <table class="ogrid-datagrid-table" [style.minWidth.px]="minTableWidth()"
+                [attr.data-freeze-rows]="freezeRows()"
+                [attr.data-freeze-cols]="freezeCols()"
+              >
+                <thead class="ogrid-datagrid-thead">
+                  @for (row of headerRows(); track $index; let rowIdx = $index) {
+                    <tr class="ogrid-datagrid-header-row">
+                      @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
+                        <th class="ogrid-datagrid-th ogrid-datagrid-checkbox-col" [attr.rowSpan]="headerRows().length > 1 ? 1 : null">
+                          <div class="ogrid-datagrid-checkbox-wrapper">
+                            <input
+                              type="checkbox"
+                              [checked]="allSelected()"
+                              [indeterminate]="someSelected()"
+                              (change)="onSelectAllChange($event)"
+                              aria-label="Select all rows"
+                            />
+                          </div>
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" style="width: 48px; min-width: 48px; padding: 0;"></th>
+                      }
+                      @for (cell of row; track $index; let cellIdx = $index) {
+                        @if (cell.isGroup) {
+                          <th [attr.colSpan]="cell.colSpan" scope="colgroup" class="ogrid-datagrid-th ogrid-datagrid-group-header">
+                            {{ cell.label }}
+                          </th>
+                        } @else {
+                          @let col = asColumnDef(cell.columnDef);
+                          @let colIdx = visibleColIndex(col);
+                          @let isFreezeCol = freezeCols() != null && (freezeCols() ?? 0) >= 1 && colIdx < (freezeCols() ?? 0);
+                          @let colW = getColumnWidth(col);
+                          <th scope="col"
+                            class="ogrid-datagrid-th"
+                            [class.ogrid-datagrid-th--pinned-left]="col.pinned === 'left' || (isFreezeCol && colIdx === 0)"
+                            [class.ogrid-datagrid-th--pinned-right]="col.pinned === 'right'"
+                            [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
+                            [style.minWidth.px]="col.minWidth ?? 80"
+                            [style.width.px]="colW"
+                            [style.maxWidth.px]="colW"
+                          >
+                            <ogrid-column-header-filter
+                              [columnKey]="col.columnId"
+                              [columnName]="col.name"
+                              [filterType]="getFilterConfig(col).filterType"
+                              [isSorted]="getFilterConfig(col).isSorted"
+                              [isSortedDescending]="getFilterConfig(col).isSortedDescending"
+                              [onSort]="getFilterConfig(col).onSort"
+                              [selectedValues]="getFilterConfig(col).selectedValues"
+                              [onFilterChange]="getFilterConfig(col).onFilterChange"
+                              [options]="getFilterConfig(col).options"
+                              [isLoadingOptions]="getFilterConfig(col).isLoadingOptions ?? false"
+                              [textValue]="getFilterConfig(col).textValue ?? ''"
+                              [onTextChange]="getFilterConfig(col).onTextChange"
+                              [selectedUser]="getFilterConfig(col).selectedUser"
+                              [onUserChange]="getFilterConfig(col).onUserChange"
+                              [peopleSearch]="getFilterConfig(col).peopleSearch"
+                              [dateValue]="getFilterConfig(col).dateValue"
+                              [onDateChange]="getFilterConfig(col).onDateChange"
+                            />
+                            <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)"></div>
+                          </th>
+                        }
+                      }
+                    </tr>
+                  }
+                </thead>
+                @if (!showEmptyInGrid()) {
+                  <tbody>
+                    @for (item of items(); track getRowId()(item); let rowIndex = $index) {
+                      @let rowId = getRowId()(item);
+                      @let isSelected = selectedRowIds().has(rowId);
+                      <tr
+                        class="ogrid-datagrid-row"
+                        [class.ogrid-datagrid-row--selected]="isSelected"
+                        [attr.data-row-id]="rowId"
+                        (click)="onRowClick($event, rowId)"
+                      >
+                        @if (hasCheckboxCol()) {
+                          <td class="ogrid-datagrid-td ogrid-datagrid-checkbox-col">
+                            <div
+                              class="ogrid-datagrid-checkbox-wrapper"
+                              [attr.data-row-index]="rowIndex"
+                              [attr.data-col-index]="0"
+                              (click)="$event.stopPropagation()"
+                            >
+                              <input
+                                type="checkbox"
+                                [checked]="isSelected"
+                                (change)="onRowCheckboxChange(rowId, $event, rowIndex)"
+                                [attr.aria-label]="'Select row ' + (rowIndex + 1)"
+                              />
+                            </div>
+                          </td>
+                        }
+                        @for (colLayout of columnLayouts(); track colLayout.col.columnId; let colIdx = $index) {
+                          <td
+                            class="ogrid-datagrid-td"
+                            [class.ogrid-datagrid-td--pinned-left]="colLayout.pinnedLeft"
+                            [class.ogrid-datagrid-td--pinned-right]="colLayout.pinnedRight"
+                            [style.minWidth.px]="colLayout.minWidth"
+                            [style.width.px]="colLayout.width"
+                            [style.maxWidth.px]="colLayout.width"
+                          >
+                            @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
+                            @if (descriptor.mode === 'editing-inline') {
+                              <div class="ogrid-datagrid-cell ogrid-datagrid-cell--editing">
+                                @switch (descriptor.editorType) {
+                                  @case ('checkbox') {
+                                    <input
+                                      type="checkbox"
+                                      [checked]="!!descriptor.value"
+                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLInputElement).checked, rowIndex, descriptor.globalColIndex)"
+                                      (keydown)="$event.key === 'Escape' && cancelEdit()"
+                                    />
+                                  }
+                                  @case ('select') {
+                                    <select
+                                      class="ogrid-datagrid-editor-select"
+                                      [value]="descriptor.value != null ? '' + descriptor.value : ''"
+                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLSelectElement).value, rowIndex, descriptor.globalColIndex)"
+                                      (keydown)="$event.key === 'Escape' && cancelEdit()"
+                                    >
+                                      @for (v of getSelectValues(colLayout.col); track v) {
+                                        <option [value]="v">{{ v }}</option>
+                                      }
+                                    </select>
+                                  }
+                                  @case ('date') {
+                                    <input
+                                      type="date"
+                                      class="ogrid-datagrid-editor-input"
+                                      [value]="formatDateForInput(descriptor.value)"
+                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLInputElement).value, rowIndex, descriptor.globalColIndex)"
+                                      (keydown)="onEditorKeydown($event, item, colLayout.col.columnId, descriptor.value, rowIndex, descriptor.globalColIndex)"
+                                    />
+                                  }
+                                  @default {
+                                    <input
+                                      type="text"
+                                      class="ogrid-datagrid-editor-input"
+                                      [value]="descriptor.value != null ? '' + descriptor.value : ''"
+                                      (keydown)="onEditorKeydown($event, item, colLayout.col.columnId, descriptor.value, rowIndex, descriptor.globalColIndex)"
+                                    />
+                                  }
+                                }
+                              </div>
+                            } @else {
+                              @let content = resolveCellContent(colLayout.col, item, descriptor.displayValue);
+                              @let cellStyle = resolveCellStyleFn(colLayout.col, item);
+                              <div
+                                class="ogrid-datagrid-cell"
+                                [class.ogrid-datagrid-cell--active]="descriptor.isActive && !descriptor.isInRange"
+                                [class.ogrid-datagrid-cell--in-range]="descriptor.isInRange"
+                                [class.ogrid-datagrid-cell--in-cut-range]="descriptor.isInCutRange"
+                                [class.ogrid-datagrid-cell--editable]="descriptor.canEditAny"
+                                [class.ogrid-datagrid-cell--numeric]="colLayout.col.type === 'numeric'"
+                                [class.ogrid-datagrid-cell--boolean]="colLayout.col.type === 'boolean'"
+                                [attr.data-row-index]="rowIndex"
+                                [attr.data-col-index]="descriptor.globalColIndex"
+                                [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
+                                [attr.tabindex]="descriptor.isActive ? 0 : -1"
+                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (click)="onCellClick(rowIndex, descriptor.globalColIndex)"
+                                (contextmenu)="onCellContextMenu($event)"
+                                (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, colLayout.col.columnId) : null"
+                                [attr.role]="descriptor.canEditAny ? 'button' : null"
+                                [style]="cellStyle ?? undefined"
+                              >
+                                {{ content }}
+                                @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
+                                  <div
+                                    class="ogrid-datagrid-fill-handle"
+                                    (mousedown)="onFillHandleMouseDown($event)"
+                                    aria-label="Fill handle"
+                                  ></div>
+                                }
+                              </div>
+                            }
+                          </td>
+                        }
+                      </tr>
+                    }
+                  </tbody>
+                }
+              </table>
+
+              @if (showEmptyInGrid() && emptyState()) {
+                <div class="ogrid-datagrid-empty">
+                  <div class="ogrid-datagrid-empty__title">No results found</div>
+                  <div class="ogrid-datagrid-empty__message">
+                    @if (emptyState()!.message != null) {
+                      {{ emptyState()!.message }}
+                    } @else if (emptyState()!.hasActiveFilters) {
+                      No items match your current filters. Try adjusting your search or
+                      <button class="ogrid-datagrid-empty__clear" (click)="emptyState()!.onClearAll?.()">clear all filters</button>
+                      to see all items.
+                    } @else {
+                      There are no items available at this time.
+                    }
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        @if (menuPosition()) {
+          <div
+            class="ogrid-datagrid-context-menu-overlay"
+            (click)="closeContextMenu()"
+            (contextmenu)="$event.preventDefault(); closeContextMenu()"
+          >
+            <ogrid-grid-context-menu
+              [x]="menuPosition()!.x"
+              [y]="menuPosition()!.y"
+              [hasSelection]="hasCellSelection()"
+              [canUndo]="canUndo()"
+              [canRedo]="canRedo()"
+              (undoAction)="onUndo()"
+              (redoAction)="onRedo()"
+              (copyAction)="handleCopy()"
+              (cutAction)="handleCut()"
+              (pasteAction)="handlePaste()"
+              (selectAllAction)="handleSelectAllCells()"
+              (closeAction)="closeContextMenu()"
+            />
+          </div>
+        }
+      </div>
+
+      @if (statusBarConfig()) {
+        <ogrid-status-bar
+          [totalCount]="statusBarConfig()!.totalCount"
+          [filteredCount]="statusBarConfig()!.filteredCount"
+          [selectedCount]="statusBarConfig()!.selectedCount ?? selectedRowIds().size"
+          [selectedCellCount]="selectionCellCount()"
+          [aggregation]="statusBarConfig()!.aggregation"
+          [suppressRowCount]="statusBarConfig()!.suppressRowCount"
+        />
+      }
+
+      @if (isLoading()) {
+        <div class="ogrid-datagrid-loading-overlay">
+          <div class="ogrid-datagrid-loading-inner">
+            <div class="ogrid-datagrid-spinner"></div>
+            <span>{{ loadingMessage() }}</span>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+        styles: [`
+    :host { display: block; }
+    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+    .ogrid-datagrid-wrapper {
+      position: relative; flex: 1; min-height: 0; width: 100%; max-width: 100%;
+      overflow-x: hidden; overflow-y: auto; background: #fff;
+      will-change: scroll-position; outline: none;
+    }
+    .ogrid-datagrid-wrapper [data-drag-range] { background: rgba(33, 115, 70, 0.12) !important; }
+    .ogrid-datagrid-wrapper--fit { width: fit-content; }
+    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }
+    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }
+    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }
+    .ogrid-datagrid-table {
+      width: 100%; border-collapse: collapse; overflow: hidden; table-layout: fixed;
+    }
+    .ogrid-datagrid-thead {
+      position: sticky; top: 0; z-index: 8; background: rgba(0,0,0,0.04);
+    }
+    .ogrid-datagrid-thead th { background: rgba(0,0,0,0.04); }
+    .ogrid-datagrid-header-row { background: rgba(0,0,0,0.04); }
+    .ogrid-datagrid-th {
+      font-weight: 600; position: relative; padding: 6px 10px; text-align: left;
+      font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.12);
+    }
+    .ogrid-datagrid-th--pinned-left {
+      position: sticky; left: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
+    }
+    .ogrid-datagrid-th--pinned-right {
+      position: sticky; right: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
+    }
+    .ogrid-datagrid-group-header {
+      text-align: center; font-weight: 600; border-bottom: 2px solid rgba(0,0,0,0.12); padding: 6px;
+    }
+    .ogrid-datagrid-checkbox-col {
+      width: ${CHECKBOX_COLUMN_WIDTH}px; min-width: ${CHECKBOX_COLUMN_WIDTH}px;
+      max-width: ${CHECKBOX_COLUMN_WIDTH}px; text-align: center;
+    }
+    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
+    .ogrid-datagrid-row { }
+    .ogrid-datagrid-row:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-datagrid-row--selected { background: rgba(25,118,210,0.08); }
+    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.06); }
+    .ogrid-datagrid-td--pinned-left {
+      position: sticky; left: 0; z-index: 6; background: #fff; will-change: transform;
+    }
+    .ogrid-datagrid-td--pinned-right {
+      position: sticky; right: 0; z-index: 6; background: #fff; will-change: transform;
+    }
+    .ogrid-datagrid-cell {
+      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
+      padding: 6px 10px; box-sizing: border-box; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;
+      font-size: 14px;
+    }
+    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }
+    .ogrid-datagrid-cell--boolean { justify-content: center; text-align: center; }
+    .ogrid-datagrid-cell--editable { cursor: cell; }
+    .ogrid-datagrid-cell--active {
+      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
+      z-index: 2; position: relative; overflow: visible;
+    }
+    .ogrid-datagrid-cell--in-range { background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)); }
+    .ogrid-datagrid-cell--in-cut-range { background: rgba(0,0,0,0.04); opacity: 0.7; }
+    .ogrid-datagrid-cell--editing { padding: 0; }
+    .ogrid-datagrid-editor-input {
+      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection, #217346);
+      box-sizing: border-box; font-size: 14px; outline: none;
+    }
+    .ogrid-datagrid-editor-select {
+      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection, #217346);
+      box-sizing: border-box; font-size: 14px;
+    }
+    .ogrid-datagrid-fill-handle {
+      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
+      background: var(--ogrid-selection, #217346);
+      border: 1px solid var(--ogrid-bg, #fff); border-radius: 1px;
+      cursor: crosshair; pointer-events: auto; z-index: 3;
+    }
+    .ogrid-datagrid-resize-handle {
+      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;
+      cursor: col-resize; user-select: none;
+    }
+    .ogrid-datagrid-resize-handle::after {
+      content: ''; position: absolute; top: 0; right: 3px; bottom: 0; width: 2px;
+    }
+    .ogrid-datagrid-resize-handle:hover::after { background: var(--mat-sys-primary, #1976d2); }
+    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1565c0); }
+    .ogrid-datagrid-empty {
+      padding: 32px 16px; text-align: center; border-top: 1px solid rgba(0,0,0,0.12);
+      background: rgba(0,0,0,0.04);
+    }
+    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
+    .ogrid-datagrid-empty__message { font-size: 14px; color: rgba(0,0,0,0.6); }
+    .ogrid-datagrid-empty__clear {
+      background: none; border: none; color: var(--mat-sys-primary, #1976d2);
+      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;
+    }
+    .ogrid-datagrid-loading-overlay {
+      position: absolute; inset: 0; z-index: 2;
+      display: flex; align-items: center; justify-content: center;
+      background: rgba(255,255,255,0.7);
+    }
+    .ogrid-datagrid-loading-inner {
+      display: flex; flex-direction: column; align-items: center; gap: 8px;
+      padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
+    }
+    .ogrid-datagrid-spinner {
+      width: 24px; height: 24px; border: 3px solid rgba(0,0,0,0.12);
+      border-top-color: var(--mat-sys-primary, #1976d2);
+      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;
+    }
+    @keyframes ogrid-spin { to { transform: rotate(360deg); } }
+    .ogrid-datagrid-context-menu-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+    }
+  `],
+    })
+], DataGridTableComponent);
+export { DataGridTableComponent };