@alaarab/ogrid-angular 2.1.1 → 2.1.2

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

@@ -54,6 +54,7 @@ export class BaseDataGridTableComponent {
         });
         this.ariaLabel = computed(() => this.getProps()?.['aria-label'] ?? 'Data grid');
         this.ariaLabelledBy = computed(() => this.getProps()?.['aria-labelledby']);
+        this.stickyHeader = computed(() => this.getProps()?.stickyHeader ?? true);
         this.emptyState = computed(() => this.getProps()?.emptyState);
         this.currentPage = computed(() => this.getProps()?.currentPage ?? 1);
         this.pageSize = computed(() => this.getProps()?.pageSize ?? 25);

package/dist/esm/components/base-ogrid.component.js

@@ -25,7 +25,7 @@ export class BaseOGridComponent {
         });
     }
     get showToolbar() {
-        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null;
+        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null || this.ogridService.fullScreen();
     }
     onPageSizeChange(size) {
         this.ogridService.pagination().setPageSize(size);

package/dist/esm/components/ogrid-layout.component.js

@@ -14,7 +14,35 @@ let OGridLayoutComponent = class OGridLayoutComponent {
         this.hasToolbarBelow = false;
         this.hasPagination = false;
         this.sideBar = null;
+        this.fullScreen = false;
+        this.isFullScreen = false;
         this.borderRadius = GRID_BORDER_RADIUS;
+        this.escListener = null;
+    }
+    get rootClass() {
+        const base = (this.className ?? '') + ' ogrid-layout-root';
+        return this.isFullScreen ? base + ' ogrid-layout-root--fullscreen' : base;
+    }
+    toggleFullScreen() {
+        this.isFullScreen = !this.isFullScreen;
+        if (this.isFullScreen) {
+            this.escListener = (e) => {
+                if (e.key === 'Escape') {
+                    this.isFullScreen = false;
+                    this.removeEscListener();
+                }
+            };
+            document.addEventListener('keydown', this.escListener);
+        }
+        else {
+            this.removeEscListener();
+        }
+    }
+    removeEscListener() {
+        if (this.escListener) {
+            document.removeEventListener('keydown', this.escListener);
+            this.escListener = null;
+        }
     }
 };
 __decorate([
@@ -32,6 +60,9 @@ __decorate([
 __decorate([
     Input()
 ], OGridLayoutComponent.prototype, "sideBar", void 0);
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "fullScreen", void 0);
 OGridLayoutComponent = __decorate([
     Component({
         selector: 'ogrid-layout',
@@ -42,12 +73,19 @@ OGridLayoutComponent = __decorate([
         styles: [OGRID_THEME_VARS_CSS, `
     :host { display: block; height: 100%; }
     .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
+    .ogrid-layout-root--fullscreen {
+      position: fixed; inset: 0; z-index: 9999;
+      background: var(--ogrid-bg, #ffffff);
+    }
     .ogrid-layout-container {
       border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       overflow: hidden; display: flex; flex-direction: column;
       flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-layout-root--fullscreen .ogrid-layout-container {
+      border: none; border-radius: 0 !important;
+    }
     .ogrid-layout-toolbar {
       display: flex; justify-content: space-between; align-items: center;
       padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
@@ -62,17 +100,24 @@ OGridLayoutComponent = __decorate([
       padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
     .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }
-    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
     .ogrid-layout-footer {
       border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;
     }
+    .ogrid-fullscreen-btn {
+      background: none; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 4px; padding: 4px 6px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
   `],
         template: `
-    <div [class]="(className ?? '') + ' ogrid-layout-root'">
+    <div [class]="rootClass">
       <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
         <!-- Toolbar strip -->
-        @if (hasToolbar) {
+        @if (hasToolbar || fullScreen) {
           <div
             class="ogrid-layout-toolbar"
             [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
@@ -83,6 +128,28 @@ OGridLayoutComponent = __decorate([
             </div>
             <div class="ogrid-layout-toolbar-right">
               <ng-content select="[toolbarEnd]"></ng-content>
+              @if (fullScreen) {
+                <button type="button" class="ogrid-fullscreen-btn"
+                  [attr.title]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  [attr.aria-label]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  (click)="toggleFullScreen()">
+                  @if (isFullScreen) {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="4 10 0 10 0 14"></polyline>
+                      <polyline points="12 6 16 6 16 2"></polyline>
+                      <line x1="0" y1="10" x2="4" y2="6"></line>
+                      <line x1="16" y1="6" x2="12" y2="10"></line>
+                    </svg>
+                  } @else {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="10 2 14 2 14 6"></polyline>
+                      <polyline points="6 14 2 14 2 10"></polyline>
+                      <line x1="14" y1="2" x2="10" y2="6"></line>
+                      <line x1="2" y1="14" x2="6" y2="10"></line>
+                    </svg>
+                  }
+                </button>
+              }
             </div>
           </div>
         }
@@ -94,7 +161,7 @@ OGridLayoutComponent = __decorate([
           </div>
         }
 
-        <!-- Grid area (single ng-content to avoid Angular content projection issues) -->
+        <!-- Grid area -->
         <div class="ogrid-layout-grid-area">
           @if (sideBar && sideBar.position === 'left') {
             <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>

package/dist/esm/services/ogrid.service.js

@@ -49,6 +49,8 @@ let OGridService = class OGridService {
         this.className = signal(undefined);
         this.layoutMode = signal('fill');
         this.suppressHorizontalScroll = signal(undefined);
+        this.stickyHeader = signal(true);
+        this.fullScreen = signal(false);
         this.editable = signal(undefined);
         this.cellSelection = signal(undefined);
         this.density = signal('normal');
@@ -261,6 +263,7 @@ let OGridService = class OGridService {
             getUserByEmail: this.dataSource()?.getUserByEmail?.bind(this.dataSource()),
             layoutMode: this.layoutMode(),
             suppressHorizontalScroll: this.suppressHorizontalScroll(),
+            stickyHeader: this.stickyHeader(),
             columnReorder: this.columnReorder(),
             virtualScroll: this.virtualScroll(),
             'aria-label': this.ariaLabel(),
@@ -593,6 +596,10 @@ let OGridService = class OGridService {
             this.layoutMode.set(props.layoutMode);
         if (props.suppressHorizontalScroll !== undefined)
             this.suppressHorizontalScroll.set(props.suppressHorizontalScroll);
+        if (props.stickyHeader !== undefined)
+            this.stickyHeader.set(props.stickyHeader);
+        if (props.fullScreen !== undefined)
+            this.fullScreen.set(props.fullScreen);
         if (props['aria-label'] !== undefined)
             this.ariaLabel.set(props['aria-label']);
         if (props['aria-labelledby'] !== undefined)

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -57,6 +57,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly rowHeightCssVar: import("@angular/core").Signal<string | null>;
     readonly ariaLabel: import("@angular/core").Signal<string>;
     readonly ariaLabelledBy: import("@angular/core").Signal<string | undefined>;
+    readonly stickyHeader: import("@angular/core").Signal<boolean>;
     readonly emptyState: import("@angular/core").Signal<{
         onClearAll: () => void;
         hasActiveFilters: boolean;

package/dist/types/components/ogrid-layout.component.d.ts

@@ -5,5 +5,11 @@ export declare class OGridLayoutComponent {
     hasToolbarBelow: boolean;
     hasPagination: boolean;
     sideBar: SideBarProps | null;
+    fullScreen: boolean;
+    isFullScreen: boolean;
     readonly borderRadius = 6;
+    private escListener;
+    get rootClass(): string;
+    toggleFullScreen(): void;
+    private removeEscListener;
 }

package/dist/types/services/ogrid.service.d.ts

@@ -84,6 +84,8 @@ export declare class OGridService<T> {
     readonly className: import("@angular/core").WritableSignal<string | undefined>;
     readonly layoutMode: import("@angular/core").WritableSignal<"content" | "fill">;
     readonly suppressHorizontalScroll: import("@angular/core").WritableSignal<boolean | undefined>;
+    readonly stickyHeader: import("@angular/core").WritableSignal<boolean>;
+    readonly fullScreen: import("@angular/core").WritableSignal<boolean>;
     readonly editable: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly cellSelection: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly density: import("@angular/core").WritableSignal<"compact" | "normal" | "comfortable">;

package/dist/types/types/dataGridTypes.d.ts

@@ -56,6 +56,10 @@ interface IOGridBaseProps<T> {
     columnChooser?: boolean | 'toolbar' | 'sidebar';
     layoutMode?: 'content' | 'fill';
     suppressHorizontalScroll?: boolean;
+    /** When true (default), header row sticks to the top of the scroll container. */
+    stickyHeader?: boolean;
+    /** When true, shows a fullscreen toggle button in the toolbar. Default: false. */
+    fullScreen?: boolean;
     sideBar?: boolean | ISideBarDef;
     columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
@@ -101,6 +105,8 @@ export interface IOGridDataGridProps<T> {
     initialColumnWidths?: Record<string, number>;
     layoutMode?: 'content' | 'fill';
     suppressHorizontalScroll?: boolean;
+    /** When true (default), header row sticks to the top of the scroll container. */
+    stickyHeader?: boolean;
     isLoading?: boolean;
     loadingMessage?: string;
     editable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.1"
+    "@alaarab/ogrid-core": "2.1.2"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",