@alaarab/ogrid-angular-primeng 2.1.3 → 2.1.4

package/dist/esm/index.js

@@ -1,15 +1,1693 @@
-// Re-export all from base package for consumer convenience.
-// Note: This prevents tree-shaking of unused utilities.
-// Consider explicit named exports in a future major version.
-export * from '@alaarab/ogrid-angular';
-// PrimeNG UI components
-export { OGridComponent } from './ogrid/ogrid.component';
-export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
-export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
-export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';
-export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
-// IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
-export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
-// IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
-export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
-export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
+import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, DEFAULT_MIN_COLUMN_WIDTH, BaseColumnChooserComponent, BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ColumnReorderService, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MAX_PAGE_BUTTONS, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, SideBarComponent, StatusBarComponent, UndoRedoStack, VirtualScrollService, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, createDebouncedCallback, createDebouncedSignal, createLatestCallback, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds } from '@alaarab/ogrid-angular';
+import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, inject, DestroyRef, effect, computed, signal } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { MenuModule } from 'primeng/menu';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ColumnHeaderFilterComponent = class extends BaseColumnHeaderFilterComponent {
+  constructor() {
+    super();
+    this.destroyRef = inject(DestroyRef);
+    this.clickOutsideHandler = (e) => {
+      const trigger = this.filterTrigger?.nativeElement;
+      const panel = this.filterPanel?.nativeElement;
+      if (trigger && !trigger.contains(e.target) && (!panel || !panel.contains(e.target))) {
+        this.isFilterOpen.set(false);
+      }
+    };
+    effect(() => {
+      if (this.isFilterOpen()) {
+        this.tempTextValue.set(this.textValue ?? "");
+        this.searchText.set("");
+        const sv = this.selectedValues;
+        this.tempSelected.set(new Set(sv ?? []));
+        const dv = this.dateValue;
+        this.tempDateFrom.set(dv?.from ?? "");
+        this.tempDateTo.set(dv?.to ?? "");
+        document.addEventListener("mousedown", this.clickOutsideHandler, true);
+      } else {
+        document.removeEventListener("mousedown", this.clickOutsideHandler, true);
+      }
+    });
+    this.destroyRef.onDestroy(() => {
+      document.removeEventListener("mousedown", this.clickOutsideHandler, true);
+    });
+  }
+  getHeaderEl() {
+    return this.filterTrigger;
+  }
+  handleSortClick() {
+    this.onSort?.();
+  }
+  toggleFilter() {
+    this.isFilterOpen.update((v) => !v);
+  }
+  // Adapter methods for template compatibility
+  handleSelectAllOptions() {
+    this.handleSelectAllFiltered();
+  }
+};
+__decorateClass([
+  ViewChild("filterTrigger")
+], ColumnHeaderFilterComponent.prototype, "filterTrigger", 2);
+__decorateClass([
+  ViewChild("filterPanel")
+], ColumnHeaderFilterComponent.prototype, "filterPanel", 2);
+ColumnHeaderFilterComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-column-header-filter",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
+      <div style="flex:1;min-width:0;overflow:hidden">
+        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName" data-header-label>
+          {{ columnName }}
+        </span>
+      </div>
+      <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
+        @if (filterType !== 'none') {
+          <button
+            type="button"
+            #filterTrigger
+            (click)="toggleFilter()"
+            [attr.aria-label]="'Filter ' + columnName"
+            [title]="'Filter ' + columnName"
+            style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;position:relative;color:var(--ogrid-fg, #242424)"
+            [style.font-weight]="hasActiveFilter() ? 'bold' : 'normal'"
+          >
+            &#9662;
+            @if (hasActiveFilter()) {
+              <span style="position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:var(--ogrid-selection, #217346)"></span>
+            }
+          </button>
+
+          @if (isFilterOpen()) {
+            <div
+              #filterPanel
+              style="position:absolute;top:100%;left:0;z-index:1000;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
+            >
+              <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                Filter: {{ columnName }}
+              </div>
+
+              @if (filterType === 'text') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="tempTextValue()"
+                    (input)="tempTextValue.set($any($event.target).value)"
+                    placeholder="Filter text..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Filter ' + columnName"
+                  />
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleTextClear()"
+                    [disabled]="!textValue"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleTextApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType === 'multiSelect') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="searchText()"
+                    (input)="searchText.set($any($event.target).value)"
+                    placeholder="Search options..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Search ' + columnName + ' options'"
+                  />
+                  @if (isLoadingOptions) {
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
+                  } @else {
+                    <div style="display:flex;gap:4px;margin-bottom:6px">
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleSelectAllOptions()" style="font-size:11px">All</button>
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearSelection()" style="font-size:11px">None</button>
+                    </div>
+                    <div style="max-height:160px;overflow-y:auto" role="group" [attr.aria-label]="columnName + ' filter options'">
+                      @for (opt of filteredOptions(); track opt) {
+                        <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:13px">
+                          <input
+                            type="checkbox"
+                            [checked]="tempSelected().has(opt)"
+                            (change)="handleCheckboxChange(opt, $event)"
+                          />
+                          {{ opt }}
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleApplyMultiSelect()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType === 'people') {
+                <div style="padding:8px 12px">
+                  @if (selectedUser) {
+                    <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:4px">
+                      <span style="font-size:13px">{{ selectedUser!.displayName ?? selectedUser!.email }}</span>
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearUser()" style="font-size:11px">Clear</button>
+                    </div>
+                  }
+                  <input
+                    type="text"
+                    [value]="peopleSearchText()"
+                    (input)="onPeopleSearchInput($event)"
+                    placeholder="Search people..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Search people for ' + columnName"
+                  />
+                  @if (isPeopleLoading()) {
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
+                  }
+                  @for (user of peopleSuggestions(); track user.email) {
+                    <button
+                      type="button"
+                      (click)="handleUserSelect(user)"
+                      style="display:block;width:100%;text-align:left;padding:6px 0;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--ogrid-fg, #242424)"
+                    >
+                      {{ user.displayName ?? user.email }}
+                    </button>
+                  }
+                </div>
+              }
+
+              @if (filterType === 'date') {
+                <div style="padding:8px 12px;display:flex;flex-direction:column;gap:6px">
+                  <label style="display:flex;align-items:center;gap:6px;font-size:12px">
+                    From:
+                    <input
+                      type="date"
+                      [value]="tempDateFrom()"
+                      (change)="tempDateFrom.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                  <label style="display:flex;align-items:center;gap:6px;font-size:12px">
+                    To:
+                    <input
+                      type="date"
+                      [value]="tempDateTo()"
+                      (change)="tempDateTo.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleDateClear()"
+                    [disabled]="!tempDateFrom() && !tempDateTo()"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleDateApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    </div>
+  `,
+    styles: [`
+    :host {
+      display: flex;
+      position: relative;
+      flex: 1;
+      min-width: 0;
+    }
+  `]
+  })
+], ColumnHeaderFilterComponent);
+var ColumnHeaderMenuComponent = class {
+  constructor() {
+    this.canPinLeft = true;
+    this.canPinRight = true;
+    this.canUnpin = false;
+    this.currentSort = null;
+    this.isSortable = true;
+    this.isResizable = true;
+    this.handlers = {};
+    this.menuModel = computed(() => {
+      const items = getColumnHeaderMenuItems({
+        canPinLeft: this.canPinLeft,
+        canPinRight: this.canPinRight,
+        canUnpin: this.canUnpin,
+        currentSort: this.currentSort,
+        isSortable: this.isSortable,
+        isResizable: this.isResizable
+      });
+      const h = this.handlers;
+      const actionMap = {
+        pinLeft: h.onPinLeft,
+        pinRight: h.onPinRight,
+        unpin: h.onUnpin,
+        sortAsc: h.onSortAsc,
+        sortDesc: h.onSortDesc,
+        clearSort: h.onClearSort,
+        autosizeThis: h.onAutosizeThis,
+        autosizeAll: h.onAutosizeAll
+      };
+      const result = [];
+      for (const item of items) {
+        result.push({
+          label: item.label,
+          disabled: item.disabled,
+          command: () => {
+            const action = actionMap[item.id];
+            if (action) {
+              action();
+              h.onClose?.();
+            }
+          }
+        });
+        if (item.divider) {
+          result.push({ separator: true });
+        }
+      }
+      return result;
+    });
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], ColumnHeaderMenuComponent.prototype, "columnId", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canPinLeft", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canPinRight", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canUnpin", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "currentSort", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "isSortable", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "isResizable", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "handlers", 2);
+__decorateClass([
+  ViewChild("menu")
+], ColumnHeaderMenuComponent.prototype, "menuRef", 2);
+ColumnHeaderMenuComponent = __decorateClass([
+  Component({
+    selector: "column-header-menu",
+    standalone: true,
+    imports: [ButtonModule, MenuModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <button
+      pButton
+      type="button"
+      icon="pi pi-ellipsis-v"
+      class="p-button-text p-button-sm column-header-menu-trigger"
+      (click)="menu.toggle($event)"
+      [attr.aria-label]="'Column options for ' + columnId"
+    ></button>
+
+    <p-menu
+      #menu
+      [model]="menuModel()"
+      [popup]="true"
+      appendTo="body"
+    ></p-menu>
+  `,
+    styles: [`
+    .column-header-menu-trigger {
+      padding: 0.25rem;
+      min-width: 24px;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      border-radius: 4px;
+      transition: background-color 0.15s;
+    }
+    .column-header-menu-trigger:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+  `]
+  })
+], ColumnHeaderMenuComponent);
+var InlineCellEditorComponent = class extends BaseInlineCellEditorComponent {
+};
+InlineCellEditorComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-inline-cell-editor",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: INLINE_CELL_EDITOR_TEMPLATE,
+    styles: [INLINE_CELL_EDITOR_STYLES]
+  })
+], InlineCellEditorComponent);
+var PopoverCellEditorComponent = class extends BasePopoverCellEditorComponent {
+};
+PopoverCellEditorComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-popover-cell-editor",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: POPOVER_CELL_EDITOR_TEMPLATE,
+    styles: [`
+    ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
+    .ogrid-popover-anchor {
+      padding: 6px 10px; min-height: 20px; cursor: default; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap;
+      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
+    }
+  `]
+  })
+], PopoverCellEditorComponent);
+
+// src/datagrid-table/datagrid-table.component.ts
+var DataGridTableComponent = class extends BaseDataGridTableComponent {
+  constructor() {
+    super();
+    this.sortBy = void 0;
+    this.sortDirection = "asc";
+    this.columnOrder = void 0;
+    this.onColumnOrderChange = void 0;
+    this.onColumnResized = void 0;
+    this.onColumnPinned = void 0;
+    this.pinnedColumnsInput = void 0;
+    this.initialColumnWidths = void 0;
+    this.layoutMode = "fill";
+    this.suppressHorizontalScroll = void 0;
+    this.stickyHeaderInput = void 0;
+    this.columnReorder = void 0;
+    this.isLoadingInput = false;
+    this.loadingMessageInput = "Loading\u2026";
+    this.editable = void 0;
+    this.cellSelection = void 0;
+    this.onCellValueChanged = void 0;
+    this.onUndoInput = void 0;
+    this.onRedoInput = void 0;
+    this.canUndoInput = void 0;
+    this.canRedoInput = void 0;
+    this.rowSelectionMode = "none";
+    this.selectedRows = void 0;
+    this.onSelectionChange = void 0;
+    this.statusBar = void 0;
+    this.filterOptions = {};
+    this.loadingFilterOptions = {};
+    this.peopleSearch = void 0;
+    this.getUserByEmail = void 0;
+    this.emptyStateInput = void 0;
+    this.onCellError = void 0;
+    this.ariaLabelInput = void 0;
+    this.ariaLabelledByInput = void 0;
+    this.showRowNumbers = false;
+    this.currentPageInput = 1;
+    this.pageSizeInput = 25;
+    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"
+    };
+    this.contextMenuClasses = {
+      contextMenu: "ogrid-context-menu",
+      contextMenuItem: "ogrid-context-menu-item",
+      contextMenuItemLabel: "ogrid-context-menu-item-label",
+      contextMenuItemShortcut: "ogrid-context-menu-item-shortcut",
+      contextMenuDivider: "ogrid-context-menu-divider"
+    };
+    // PrimeNG uses flat number overrides for column sizing
+    this.primengColumnSizingOverrides = signal({});
+    this.propsSignal = signal(void 0);
+    this.resizeStartX = 0;
+    this.resizeColumnId = "";
+    this.resizeStartWidth = 0;
+    // Bound method reference for template
+    this.cancelEditHandler = () => this.cancelEdit();
+    // --- PrimeNG-specific computed signals ---
+    this.resolvedAriaLabel = computed(
+      () => this.ariaLabelInput ?? (this.ariaLabelledByInput ? void 0 : "Data grid")
+    );
+    this.tableWidthStyle = computed(() => {
+      if (this.showEmptyInGrid()) return "100%";
+      if (this.allowOverflowX()) return "fit-content";
+      if (this.layoutMode === "content") return "fit-content";
+      return "100%";
+    });
+    this.tableMinWidthStyle = computed(() => {
+      if (this.showEmptyInGrid()) return "100%";
+      if (this.allowOverflowX()) return "max-content";
+      if (this.layoutMode === "content") return "max-content";
+      return "100%";
+    });
+    this.initBase();
+  }
+  ngOnChanges(changes) {
+    if (changes["initialColumnWidths"]) {
+      const iw = this.initialColumnWidths;
+      if (iw) {
+        this.primengColumnSizingOverrides.set({ ...iw });
+      }
+    }
+    const next = this.buildProps();
+    const prev = this.propsSignal();
+    if (!prev || !this.shallowEqual(prev, next)) {
+      this.propsSignal.set(next);
+    }
+  }
+  /** Shallow-compare two props objects by their top-level keys. */
+  shallowEqual(a, b) {
+    const aObj = a;
+    const bObj = b;
+    const keysA = Object.keys(aObj);
+    const keysB = Object.keys(bObj);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+      if (aObj[key] !== bObj[key]) return false;
+    }
+    return true;
+  }
+  // --- Abstract method implementations ---
+  getProps() {
+    return this.propsSignal();
+  }
+  getWrapperRef() {
+    return this.wrapperRef;
+  }
+  getTableContainerRef() {
+    return this.tableContainerRefEl;
+  }
+  // --- Column width override (PrimeNG uses flat number instead of { widthPx }) ---
+  getColumnWidth(col) {
+    const override = this.primengColumnSizingOverrides()[col.columnId];
+    if (override) return override;
+    return col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+  }
+  // --- PrimeNG-specific helpers ---
+  trackByRowId(_index, item) {
+    return this.getRowIdInput(item);
+  }
+  // --- PrimeNG-specific event handlers ---
+  onSelectAllChangePrimeng(checked) {
+    this.state().rowSelection.handleSelectAll(checked);
+  }
+  onRowClickPrimeng(e, item) {
+    if (this.rowSelectionMode !== "single") return;
+    const rowId = this.getRowIdInput(item);
+    const ids = this.selectedRowIds();
+    this.state().rowSelection.updateSelection(ids.has(rowId) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([rowId]));
+  }
+  onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
+    const rowId = this.getRowIdInput(item);
+    this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+  }
+  onResizeStartPrimeng(e, col) {
+    e.preventDefault();
+    this.state().interaction.setActiveCell?.(null);
+    this.state().interaction.setSelectionRange?.(null);
+    this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
+    this.resizeStartX = e.clientX;
+    this.resizeColumnId = col.columnId;
+    this.resizeStartWidth = this.getColumnWidth(col);
+    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.primengColumnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
+      this.columnSizingVersion.update((v) => v + 1);
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("mouseup", onUp, true);
+      const finalWidth = this.primengColumnSizingOverrides()[this.resizeColumnId];
+      if (finalWidth) {
+        this.onColumnResized?.(this.resizeColumnId, finalWidth);
+        const overrides = {};
+        for (const [id, w] of Object.entries(this.primengColumnSizingOverrides())) {
+          overrides[id] = { widthPx: w };
+        }
+        this.state().layout.setColumnSizingOverrides(overrides);
+      }
+    };
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("mouseup", onUp, true);
+  }
+  // --- Build props ---
+  buildProps() {
+    return {
+      items: this.itemsInput,
+      columns: this.columns,
+      getRowId: this.getRowIdInput,
+      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.pinnedColumnsInput,
+      initialColumnWidths: this.initialColumnWidths,
+      layoutMode: this.layoutMode,
+      suppressHorizontalScroll: this.suppressHorizontalScroll,
+      columnReorder: this.columnReorder,
+      isLoading: this.isLoadingInput,
+      loadingMessage: this.loadingMessageInput,
+      editable: this.editable,
+      cellSelection: this.cellSelection,
+      onCellValueChanged: this.onCellValueChanged,
+      onUndo: this.onUndoInput,
+      onRedo: this.onRedoInput,
+      canUndo: this.canUndoInput,
+      canRedo: this.canRedoInput,
+      rowSelection: this.rowSelectionMode,
+      selectedRows: this.selectedRows,
+      onSelectionChange: this.onSelectionChange,
+      showRowNumbers: this.showRowNumbers,
+      currentPage: this.currentPageInput,
+      pageSize: this.pageSizeInput,
+      statusBar: this.statusBar,
+      filters: this.filters,
+      onFilterChange: this.onFilterChange,
+      filterOptions: this.filterOptions,
+      loadingFilterOptions: this.loadingFilterOptions,
+      peopleSearch: this.peopleSearch,
+      getUserByEmail: this.getUserByEmail,
+      emptyState: this.emptyStateInput,
+      onCellError: this.onCellError,
+      stickyHeader: this.stickyHeaderInput,
+      "aria-label": this.ariaLabelInput,
+      "aria-labelledby": this.ariaLabelledByInput
+    };
+  }
+};
+__decorateClass([
+  ViewChild("wrapper")
+], DataGridTableComponent.prototype, "wrapperRef", 2);
+__decorateClass([
+  ViewChild("tableContainer")
+], DataGridTableComponent.prototype, "tableContainerRefEl", 2);
+__decorateClass([
+  Input({ required: true, alias: "items" })
+], DataGridTableComponent.prototype, "itemsInput", 2);
+__decorateClass([
+  Input({ required: true })
+], DataGridTableComponent.prototype, "columns", 2);
+__decorateClass([
+  Input({ required: true, alias: "getRowId" })
+], DataGridTableComponent.prototype, "getRowIdInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "sortBy", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "sortDirection", 2);
+__decorateClass([
+  Input({ required: true })
+], DataGridTableComponent.prototype, "onColumnSort", 2);
+__decorateClass([
+  Input({ required: true })
+], DataGridTableComponent.prototype, "visibleColumns", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "columnOrder", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onColumnOrderChange", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onColumnResized", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onColumnPinned", 2);
+__decorateClass([
+  Input({ alias: "pinnedColumns" })
+], DataGridTableComponent.prototype, "pinnedColumnsInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "initialColumnWidths", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "layoutMode", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "suppressHorizontalScroll", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "stickyHeaderInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "columnReorder", 2);
+__decorateClass([
+  Input({ alias: "isLoading" })
+], DataGridTableComponent.prototype, "isLoadingInput", 2);
+__decorateClass([
+  Input({ alias: "loadingMessage" })
+], DataGridTableComponent.prototype, "loadingMessageInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "editable", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "cellSelection", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onCellValueChanged", 2);
+__decorateClass([
+  Input({ alias: "onUndo" })
+], DataGridTableComponent.prototype, "onUndoInput", 2);
+__decorateClass([
+  Input({ alias: "onRedo" })
+], DataGridTableComponent.prototype, "onRedoInput", 2);
+__decorateClass([
+  Input({ alias: "canUndo" })
+], DataGridTableComponent.prototype, "canUndoInput", 2);
+__decorateClass([
+  Input({ alias: "canRedo" })
+], DataGridTableComponent.prototype, "canRedoInput", 2);
+__decorateClass([
+  Input({ alias: "rowSelection" })
+], DataGridTableComponent.prototype, "rowSelectionMode", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "selectedRows", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onSelectionChange", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "statusBar", 2);
+__decorateClass([
+  Input({ required: true })
+], DataGridTableComponent.prototype, "filters", 2);
+__decorateClass([
+  Input({ required: true })
+], DataGridTableComponent.prototype, "onFilterChange", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "filterOptions", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "loadingFilterOptions", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "peopleSearch", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "getUserByEmail", 2);
+__decorateClass([
+  Input({ alias: "emptyState" })
+], DataGridTableComponent.prototype, "emptyStateInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "onCellError", 2);
+__decorateClass([
+  Input({ alias: "aria-label" })
+], DataGridTableComponent.prototype, "ariaLabelInput", 2);
+__decorateClass([
+  Input({ alias: "aria-labelledby" })
+], DataGridTableComponent.prototype, "ariaLabelledByInput", 2);
+__decorateClass([
+  Input()
+], DataGridTableComponent.prototype, "showRowNumbers", 2);
+__decorateClass([
+  Input({ alias: "currentPage" })
+], DataGridTableComponent.prototype, "currentPageInput", 2);
+__decorateClass([
+  Input({ alias: "pageSize" })
+], DataGridTableComponent.prototype, "pageSizeInput", 2);
+DataGridTableComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-datagrid-table",
+    standalone: true,
+    imports: [
+      StatusBarComponent,
+      GridContextMenuComponent,
+      MarchingAntsOverlayComponent,
+      EmptyStateComponent,
+      ColumnHeaderFilterComponent,
+      ColumnHeaderMenuComponent,
+      InlineCellEditorComponent,
+      PopoverCellEditorComponent
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
+    template: `
+    <div class="ogrid-root">
+      <div
+        #wrapper
+        tabindex="0"
+        role="region"
+        class="ogrid-scroll-wrapper"
+        [class.ogrid-scroll-wrapper--loading-empty]="isLoading() && items().length === 0"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
+        [attr.data-column-count]="state().layout.totalColCount"
+        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+        [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
+        (contextmenu)="$event.preventDefault()"
+        (keydown)="onGridKeyDown($event)"
+        (mousedown)="onWrapperMouseDown($event)"
+        (scroll)="onWrapperScroll($event)"
+        [style.--data-table-column-count]="state().layout.totalColCount"
+        [style.--data-table-width]="tableWidthStyle()"
+        [style.--data-table-min-width]="tableMinWidthStyle()"
+        [style.--ogrid-row-height]="rowHeightCssVar()"
+      >
+        <div class="ogrid-table-wrapper">
+          <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
+            <div #tableContainer class="ogrid-table-wrapper">
+              <table class="ogrid-table">
+                <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
+                  @for (row of headerRows(); track $index; let rowIdx = $index) {
+                    <tr>
+                      @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
+                        <th scope="col" rowSpan="1" class="ogrid-checkbox-header">
+                          <input
+                            type="checkbox"
+                            [checked]="allSelected()"
+                            [indeterminate]="someSelected() && !allSelected()"
+                            (change)="onSelectAllChangePrimeng($any($event.target).checked)"
+                            aria-label="Select all rows"
+                          />
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1"></th>
+                      }
+                      @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th scope="col" rowSpan="1" class="ogrid-row-number-header">
+                          #
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-row-number-spacer"></th>
+                      }
+                      @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
+                        @if (cell.isGroup) {
+                          <th
+                            [attr.colSpan]="cell.colSpan"
+                            scope="colgroup"
+                            class="ogrid-column-group-header"
+                          >
+                            {{ cell.label }}
+                          </th>
+                        } @else {
+                          @let col = asColumnDef(cell.columnDef);
+                          @let pinned = isPinned(col.columnId);
+                          @let config = getFilterConfig(col);
+                          @let sortState = getSortState(col.columnId);
+                          @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
+                          <th
+                            scope="col"
+                            class="ogrid-header-cell"
+                            [attr.data-column-id]="col.columnId"
+                            [attr.aria-sort]="ariaSort"
+                            [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
+                            [class.ogrid-th-pinned-left]="pinned === 'left'"
+                            [class.ogrid-th-pinned-right]="pinned === 'right'"
+                            [style.min-width.px]="getEffectiveMinWidth(col)"
+                            [style.width.px]="getColumnWidth(col)"
+                            [style.max-width.px]="getColumnWidth(col)"
+                            [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
+                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
+                          >
+                            <div class="ogrid-header-content">
+                              <ogrid-primeng-column-header-filter
+                                [columnKey]="col.columnId"
+                                [columnName]="col.name"
+                                [filterType]="config.filterType"
+                                [isSorted]="config.isSorted ?? false"
+                                [isSortedDescending]="config.isSortedDescending ?? false"
+                                [onSort]="config.onSort"
+                                [selectedValues]="config.selectedValues"
+                                [onFilterChange]="config.onFilterChange"
+                                [options]="config.options ?? []"
+                                [isLoadingOptions]="config.isLoadingOptions ?? false"
+                                [textValue]="config.textValue ?? ''"
+                                [onTextChange]="config.onTextChange"
+                                [selectedUser]="config.selectedUser"
+                                [onUserChange]="config.onUserChange"
+                                [peopleSearch]="config.peopleSearch"
+                                [dateValue]="config.dateValue"
+                                [onDateChange]="config.onDateChange"
+                              ></ogrid-primeng-column-header-filter>
+                              @let colPinState = getPinState(col.columnId);
+                              <column-header-menu
+                                [columnId]="col.columnId"
+                                [canPinLeft]="colPinState.canPinLeft"
+                                [canPinRight]="colPinState.canPinRight"
+                                [canUnpin]="colPinState.canUnpin"
+                                [currentSort]="sortState"
+                                [isSortable]="col.sortable !== false"
+                                [isResizable]="col.resizable !== false"
+                                [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
+                              />
+                            </div>
+                            <div
+                              class="ogrid-resize-handle"
+                              (mousedown)="onResizeStartPrimeng($event, col)"
+                              [attr.aria-label]="'Resize ' + col.name"
+                            ></div>
+                          </th>
+                        }
+                      }
+                    </tr>
+                  }
+                </thead>
+
+                @if (!showEmptyInGrid()) {
+                  <tbody>
+                    @if (vsEnabled() && vsTopSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsTopSpacerHeight()"></tr>
+                    }
+                    @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
+                      @let rowIndex = vsStartIndex() + localIdx;
+                      @let rowId = getRowIdInput(item);
+                      @let isSelected = selectedRowIds().has(rowId);
+                      <tr
+                        [attr.data-row-id]="rowId"
+                        [style.background]="isSelected ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
+                        (click)="onRowClickPrimeng($event, item)"
+                      >
+                        @if (hasCheckboxCol()) {
+                          <td
+                            class="ogrid-checkbox-cell"
+                            [attr.data-row-index]="rowIndex"
+                            [attr.data-col-index]="0"
+                            (click)="$event.stopPropagation()"
+                          >
+                            <input
+                              type="checkbox"
+                              [checked]="isSelected"
+                              (change)="onRowCheckboxChangePrimeng(item, $any($event.target).checked, rowIndex, $event)"
+                              [attr.aria-label]="'Select row ' + (rowIndex + 1)"
+                            />
+                          </td>
+                        }
+                        @if (hasRowNumbersCol()) {
+                          <td class="ogrid-row-number-cell">
+
+                            {{ rowNumberOffset() + rowIndex + 1 }}
+                          </td>
+                        }
+                        @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
+                          @let pinned = isPinned(col.columnId);
+                          <td
+                            [attr.data-column-id]="col.columnId"
+                            [class.ogrid-td-pinned-left]="pinned === 'left'"
+                            [class.ogrid-td-pinned-right]="pinned === 'right'"
+                            class="ogrid-data-cell"
+                            [style.min-width.px]="getEffectiveMinWidth(col)"
+                            [style.width.px]="getColumnWidth(col)"
+                            [style.max-width.px]="getColumnWidth(col)"
+                            [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
+                            [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
+                          >
+                            @let descriptor = getCellDescriptor(item, col, rowIndex, colIdx);
+                            @if (descriptor.mode === 'editing-inline') {
+                              <div class="ogrid-editing-cell">
+                              <ogrid-primeng-inline-cell-editor
+                                [value]="descriptor.value"
+                                [item]="item"
+                                [column]="col"
+                                [rowIndex]="rowIndex"
+                                [editorType]="descriptor.editorType ?? 'text'"
+                                (commit)="commitEdit(item, col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
+                                (cancel)="cancelEdit()"
+                              ></ogrid-primeng-inline-cell-editor>
+                              </div>
+                            } @else if (descriptor.mode === 'editing-popover') {
+                              @let editorProps = buildPopoverEditorProps(item, col, descriptor);
+                              <ogrid-primeng-popover-cell-editor
+                                [item]="item"
+                                [column]="col"
+                                [rowIndex]="rowIndex"
+                                [globalColIndex]="descriptor.globalColIndex"
+                                [displayValue]="descriptor.displayValue"
+                                [editorProps]="editorProps"
+                                [onCancel]="cancelEditHandler"
+                              ></ogrid-primeng-popover-cell-editor>
+                            } @else {
+                              <div
+                                [attr.data-row-index]="rowIndex"
+                                [attr.data-col-index]="descriptor.globalColIndex"
+                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, col.columnId) : null"
+                                (contextmenu)="onCellContextMenu($event)"
+                                class="ogrid-cell-content"
+                                [style.cursor]="descriptor.canEditAny ? 'cell' : 'default'"
+                                [style.background]="descriptor.isInRange ? 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))' : null"
+                                [style.outline]="descriptor.isActive ? '2px solid var(--ogrid-selection, #217346)' : null"
+                                [style.outline-offset]="descriptor.isActive ? '-2px' : null"
+                              >
+                                <span [style]="resolveCellStyleFn(col, item)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
+                                @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
+                                  <div
+                                    (mousedown)="onFillHandleMouseDown($event)"
+                                    class="ogrid-fill-handle"
+                                    aria-label="Fill handle"
+                                  ></div>
+                                }
+                              </div>
+                            }
+                          </td>
+                        }
+                      </tr>
+                    }
+                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsBottomSpacerHeight()"></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"
+                [columnSizingVersion]="columnSizingVersion()"
+                [items]="items()"
+                [visibleColumns]="propsVisibleColumns()"
+                [columnOrder]="propsColumnOrder()"
+              ></ogrid-marching-ants-overlay>
+
+              @if (showEmptyInGrid() && emptyState()) {
+                <div class="ogrid-empty-container">
+                  <div>
+                    <div class="ogrid-empty-title">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 (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
+        <div class="ogrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
+      }
+
+      @if (menuPosition()) {
+        <ogrid-context-menu
+          [x]="menuPosition()!.x"
+          [y]="menuPosition()!.y"
+          [hasSelection]="hasCellSelection()"
+          [canUndoProp]="canUndo()"
+          [canRedoProp]="canRedo()"
+          [classNames]="contextMenuClasses"
+          (copyAction)="handleCopy()"
+          (cutAction)="handleCut()"
+          (pasteAction)="handlePaste()"
+          (selectAllAction)="handleSelectAllCells()"
+          (undoAction)="onUndo()"
+          (redoAction)="onRedo()"
+          (closeAction)="closeContextMenu()"
+        ></ogrid-context-menu>
+      }
+
+      @let sbConfig = statusBarConfig();
+      @if (sbConfig) {
+        <ogrid-status-bar
+          [totalCount]="sbConfig.totalCount"
+          [filteredCount]="sbConfig.filteredCount"
+          [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
+          [selectedCellCount]="selectionCellCount()"
+          [aggregation]="sbConfig.aggregation"
+          [suppressRowCount]="sbConfig.suppressRowCount"
+          [classNames]="statusBarClasses"
+        ></ogrid-status-bar>
+      }
+
+      @if (isLoading()) {
+        <div class="ogrid-loading-overlay" aria-live="polite">
+          <div class="ogrid-loading-content">
+            <span class="ogrid-loading-text">{{ loadingMessage() }}</span>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+    styles: [OGRID_THEME_VARS_CSS, `
+    :host { display: block; }
+    .ogrid-root {
+      position: relative;
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .ogrid-scroll-wrapper {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      position: relative;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-scroll-wrapper--loading-empty { min-height: 200px; }
+    .ogrid-table-wrapper {
+      position: relative;
+    }
+    .ogrid-table {
+      width: var(--data-table-width, 100%);
+      min-width: var(--data-table-min-width, 100%);
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .ogrid-table tbody tr { height: var(--ogrid-row-height, auto); }
+    .ogrid-thead {
+      z-index: 3;
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-sticky-header { position: sticky; top: 0; }
+    .ogrid-sticky-header .ogrid-checkbox-header,
+    .ogrid-sticky-header .ogrid-row-number-header { position: sticky; top: 0; }
+    .ogrid-checkbox-header {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      text-align: center;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      z-index: 3;
+    }
+    .ogrid-row-number-header {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      z-index: 3;
+    }
+    .ogrid-row-number-spacer {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-column-group-header {
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      padding: 6px 10px;
+    }
+    .ogrid-header-cell {
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      padding: 0;
+      position: relative;
+      user-select: none;
+    }
+    .ogrid-header-content {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+    }
+    .ogrid-resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 4px;
+      cursor: col-resize;
+    }
+    .ogrid-checkbox-cell {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      padding: 6px 4px;
+      text-align: center;
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+    }
+    .ogrid-row-number-cell {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      padding: 6px;
+      text-align: center;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      position: sticky;
+      left: 0;
+      z-index: 3;
+    }
+    .ogrid-data-cell {
+      padding: 0;
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      position: relative;
+    }
+    .ogrid-cell-content {
+      padding: 6px 10px;
+      min-height: 20px;
+      cursor: default;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ogrid-editing-cell {
+      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
+      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
+      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
+    }
+    .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
+    .ogrid-fill-handle {
+      position: absolute;
+      bottom: -3px;
+      right: -3px;
+      width: 7px;
+      height: 7px;
+      background: var(--ogrid-selection, #217346);
+      cursor: crosshair;
+      z-index: 2;
+    }
+    .ogrid-empty-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+    }
+    .ogrid-empty-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .ogrid-loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
+      z-index: 10;
+    }
+    .ogrid-loading-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-loading-text {
+      font-size: 14px;
+    }
+    .loading-dimmed {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    .ogrid-drop-indicator {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: var(--ogrid-primary, #217346);
+      pointer-events: none;
+      z-index: 100;
+      transition: left 0.05s;
+    }
+    .ogrid-th-pinned-left {
+      position: sticky;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-th-pinned-right {
+      position: sticky;
+      top: 0;
+      right: 0;
+      z-index: 10;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-td-pinned-left {
+      position: sticky;
+      left: 0;
+      z-index: 5;
+      background: var(--ogrid-bg, #fff);
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-td-pinned-right {
+      position: sticky;
+      right: 0;
+      z-index: 5;
+      background: var(--ogrid-bg, #fff);
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    ::ng-deep th:focus-visible,
+    ::ng-deep td:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: -2px;
+      z-index: 11;
+    }
+    ::ng-deep .p-button:focus-visible,
+    ::ng-deep button:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: 2px;
+    }
+
+    /* Context menu */
+    .ogrid-context-menu {
+      position: fixed;
+      z-index: 1000;
+      min-width: 160px;
+      padding: 4px 0;
+      background: var(--ogrid-bg, #fff);
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }
+    .ogrid-context-menu-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      width: 100%;
+      padding: 6px 12px;
+      border: none;
+      background: none;
+      font-size: 13px;
+      text-align: left;
+      cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-context-menu-item:hover:not(:disabled) {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-context-menu-item:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .ogrid-context-menu-item-label {
+      flex: 1;
+    }
+    .ogrid-context-menu-item-shortcut {
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+      font-size: 0.85em;
+    }
+    .ogrid-context-menu-divider {
+      height: 1px;
+      margin: 4px 0;
+      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+    }
+    ::ng-deep .p-checkbox:focus-visible {
+      outline: 2px solid var(--primary-color, #6366f1);
+      outline-offset: 2px;
+    }
+
+    /* PrimeNG Menu popup overrides \u2014 must use !important to win over PrimeNG's CSS-variable-based defaults */
+    .p-menu {
+      background: var(--ogrid-bg, #ffffff) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      border-radius: 4px !important;
+      padding: 4px 0 !important;
+    }
+    .p-menu-overlay {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+    }
+    .p-menu-item-content {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-item-link {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      padding: 6px 12px !important;
+    }
+    .p-menu-item-label {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      font-size: 0.875rem !important;
+    }
+    .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-separator {
+      border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      margin: 4px 0 !important;
+    }
+  `]
+  })
+], DataGridTableComponent);
+var ColumnChooserComponent = class extends BaseColumnChooserComponent {
+  // PrimeNG uses 'open' instead of 'isOpen'
+  get open() {
+    return this.isOpen;
+  }
+};
+ColumnChooserComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-column-chooser",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div style="position:relative;display:inline-block">
+      <button
+        type="button"
+        class="p-button p-button-text p-button-sm"
+        (click)="open.set(!open())"
+        [attr.aria-expanded]="open()"
+        aria-haspopup="listbox"
+        style="display:flex;align-items:center;gap:6px;font-size:13px"
+      >
+        <span aria-hidden>&#9881;</span>
+        <span>Column Visibility ({{ visibleCount() }} of {{ totalCount() }})</span>
+        <span aria-hidden>{{ open() ? '\u25B2' : '\u25BC' }}</span>
+      </button>
+
+      @if (open()) {
+        <div
+          style="position:absolute;right:0;top:100%;z-index:1000;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
+        >
+          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+          @for (col of columns; track col.columnId) {
+            <label style="display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;font-size:13px">
+              <input
+                type="checkbox"
+                [checked]="visibleColumns.has(col.columnId)"
+                (change)="onToggle(col.columnId, $any($event.target).checked)"
+                [disabled]="col.required === true"
+              />
+              {{ col.name }}
+            </label>
+          }
+          <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));margin-top:4px">
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onClearAll()"
+              style="flex:1;font-size:12px"
+            >Clear All</button>
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onSelectAll()"
+              style="flex:1;font-size:12px"
+            >Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `
+  })
+], ColumnChooserComponent);
+var PaginationControlsComponent = class extends BasePaginationControlsComponent {
+};
+PaginationControlsComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng-pagination-controls",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    @if (vm()) {
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
+        <div>
+          Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount.toLocaleString() }} {{ labelPlural() }}
+        </div>
+
+        <div style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(1)"
+            aria-label="First page"
+            style="min-width:32px;padding:4px 8px"
+          >&laquo;</button>
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(currentPage - 1)"
+            aria-label="Previous page"
+            style="min-width:32px;padding:4px 8px"
+          >&lsaquo;</button>
+
+          @if (vm()!.showStartEllipsis) {
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="pageChange.emit(1)"
+              aria-label="Page 1"
+              style="min-width:32px;padding:4px 8px"
+            >1</button>
+            <span aria-hidden style="padding:0 4px">&hellip;</span>
+          }
+
+          @for (pageNum of vm()!.pageNumbers; track pageNum) {
+            <button
+              type="button"
+              class="p-button p-button-sm"
+              [class.p-button-outlined]="currentPage !== pageNum"
+              (click)="pageChange.emit(pageNum)"
+              [attr.aria-label]="'Page ' + pageNum"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
+              style="min-width:32px;padding:4px 8px"
+            >{{ pageNum }}</button>
+          }
+
+          @if (vm()!.showEndEllipsis) {
+            <span aria-hidden style="padding:0 4px">&hellip;</span>
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="pageChange.emit(vm()!.totalPages)"
+              [attr.aria-label]="'Page ' + vm()!.totalPages"
+              style="min-width:32px;padding:4px 8px"
+            >{{ vm()!.totalPages }}</button>
+          }
+
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage >= vm()!.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
+            aria-label="Next page"
+            style="min-width:32px;padding:4px 8px"
+          >&rsaquo;</button>
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage >= vm()!.totalPages"
+            (click)="pageChange.emit(vm()!.totalPages)"
+            aria-label="Last page"
+            style="min-width:32px;padding:4px 8px"
+          >&raquo;</button>
+        </div>
+
+        <div style="display:flex;align-items:center;gap:6px">
+          <span style="font-size:12px">Rows</span>
+          <select
+            [value]="'' + pageSize"
+            (change)="onPageSizeChange($any($event.target).value)"
+            aria-label="Rows per page"
+            style="padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+          >
+            @for (opt of vm()!.pageSizeOptions; track opt) {
+              <option [value]="opt">{{ opt }}</option>
+            }
+          </select>
+        </div>
+      </div>
+    }
+  `
+  })
+], PaginationControlsComponent);
+
+// src/ogrid/ogrid.component.ts
+var OGridComponent = class {
+  constructor() {
+    this.service = inject(OGridService);
+    this.propsSignal = signal(void 0);
+    // Stable callback references (avoid re-creating every template eval)
+    this.onColumnSortFn = (columnKey, direction) => this.service.handleSort(columnKey, direction);
+    this.onColumnResizedFn = (columnId, width) => this.service.handleColumnResized(columnId, width);
+    this.onColumnPinnedFn = (columnId, pinned) => this.service.handleColumnPinned(columnId, pinned);
+    this.onSelectionChangeFn = (event) => this.service.handleSelectionChange(event);
+    this.onFilterChangeFn = (key, value) => this.service.handleFilterChange(key, value);
+    this.clearAllFiltersFn = () => this.service.setFilters({});
+    this.emptyStateComputed = computed(() => ({
+      hasActiveFilters: this.service.hasActiveFilters(),
+      onClearAll: this.clearAllFiltersFn,
+      message: this.service.emptyState()?.message,
+      render: this.service.emptyState()?.render
+    }));
+    effect(() => {
+      const p = this.propsSignal();
+      if (p) this.service.configure(p);
+    });
+  }
+  set props(value) {
+    this.propsSignal.set(value);
+  }
+  get showToolbar() {
+    return this.service.columnChooserPlacement() === "toolbar" || this.service.toolbar() != null || this.service.fullScreen();
+  }
+  get emptyStateObj() {
+    return this.emptyStateComputed();
+  }
+  onPageSizeChange(size) {
+    this.service.setPageSize(size);
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], OGridComponent.prototype, "props", 1);
+OGridComponent = __decorateClass([
+  Component({
+    selector: "ogrid-primeng",
+    standalone: true,
+    imports: [
+      OGridLayoutComponent,
+      DataGridTableComponent,
+      ColumnChooserComponent,
+      PaginationControlsComponent
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [OGridService],
+    styles: [`:host { display: block; height: 100%; }`],
+    template: `
+    <ogrid-layout
+      [className]="service.className()"
+      [hasToolbar]="showToolbar"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
+      [sideBar]="service.sideBarProps()"
+      [fullScreen]="service.fullScreen()"
+    >
+      <ng-content select="[toolbar]" toolbar></ng-content>
+
+      <div toolbarEnd>
+        @if (service.columnChooserPlacement() === 'toolbar') {
+          <ogrid-primeng-column-chooser
+            [columns]="service.columnChooser().columns"
+            [visibleColumns]="service.columnChooser().visibleColumns"
+            (visibilityChange)="service.handleVisibilityChange($event.columnKey, $event.visible)"
+          ></ogrid-primeng-column-chooser>
+        }
+      </div>
+
+      <ogrid-primeng-datagrid-table
+        [items]="service.displayItems()"
+        [columns]="service.columnsProp()"
+        [getRowId]="service.getRowId()"
+        [sortBy]="service.sort().field"
+        [sortDirection]="service.sort().direction"
+        [onColumnSort]="onColumnSortFn"
+        [visibleColumns]="service.visibleColumns()"
+        [columnOrder]="service.columnOrder()"
+        [onColumnOrderChange]="service.onColumnOrderChange()"
+        [onColumnResized]="onColumnResizedFn"
+        [onColumnPinned]="onColumnPinnedFn"
+        [editable]="service.editable()"
+        [cellSelection]="service.cellSelection()"
+        [onCellValueChanged]="service.onCellValueChanged()"
+        [onUndo]="service.onUndo()"
+        [onRedo]="service.onRedo()"
+        [canUndo]="service.canUndo()"
+        [canRedo]="service.canRedo()"
+        [rowSelection]="service.rowSelection()"
+        [selectedRows]="service.effectiveSelectedRows()"
+        [onSelectionChange]="onSelectionChangeFn"
+        [statusBar]="service.statusBarConfig()"
+        [isLoading]="service.isLoadingResolved()"
+        [filters]="service.filters()"
+        [onFilterChange]="onFilterChangeFn"
+        [filterOptions]="service.clientFilterOptions()"
+        [loadingFilterOptions]="service.loadingFilterOptions()"
+        [peopleSearch]="service.dataSource()?.searchPeople?.bind(service.dataSource())"
+        [getUserByEmail]="service.dataSource()?.getUserByEmail?.bind(service.dataSource())"
+        [layoutMode]="service.layoutMode()"
+        [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
+        [stickyHeaderInput]="service.stickyHeader()"
+        [columnReorder]="service.columnReorder()"
+        [aria-label]="service.ariaLabel()"
+        [aria-labelledby]="service.ariaLabelledBy()"
+        [emptyState]="emptyStateObj"
+      ></ogrid-primeng-datagrid-table>
+
+      <div pagination>
+        <ogrid-primeng-pagination-controls
+          [currentPage]="service.pagination().page"
+          [pageSize]="service.pagination().pageSize"
+          [totalCount]="service.pagination().displayTotalCount"
+          [pageSizeOptions]="service.pageSizeOptions()"
+          [entityLabelPlural]="service.entityLabelPlural()"
+          (pageChange)="service.setPage($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></ogrid-primeng-pagination-controls>
+      </div>
+    </ogrid-layout>
+  `
+  })
+], OGridComponent);
+
+export { ColumnChooserComponent, ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, DataGridTableComponent, InlineCellEditorComponent, OGridComponent, PaginationControlsComponent, PopoverCellEditorComponent };