@alaarab/ogrid-js 2.1.1 → 2.1.3

package/dist/esm/OGrid.js

@@ -131,6 +131,8 @@ export class OGrid {
         this.contextMenu = null;
         this.events = new EventEmitter();
         this.unsubscribes = [];
+        this.isFullScreen = false;
+        this.fullscreenBtn = null;
         this.options = options;
         this.state = new GridState(options);
         this.api = this.state.getApi();
@@ -146,6 +148,29 @@ export class OGrid {
         // Left spacer keeps column chooser on the right via justify-content: space-between
         const toolbarSpacer = document.createElement('div');
         this.toolbarEl.appendChild(toolbarSpacer);
+        // Fullscreen toggle button
+        if (options.fullScreen) {
+            const toolbarRight = document.createElement('div');
+            toolbarRight.style.display = 'flex';
+            toolbarRight.style.alignItems = 'center';
+            toolbarRight.style.gap = '8px';
+            this.fullscreenBtn = document.createElement('button');
+            this.fullscreenBtn.type = 'button';
+            this.fullscreenBtn.className = 'ogrid-fullscreen-btn';
+            this.fullscreenBtn.title = 'Fullscreen';
+            this.fullscreenBtn.setAttribute('aria-label', 'Fullscreen');
+            this.fullscreenBtn.innerHTML = '<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 points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/></svg>';
+            this.fullscreenBtn.addEventListener('click', () => this.toggleFullScreen());
+            toolbarRight.appendChild(this.fullscreenBtn);
+            this.toolbarEl.appendChild(toolbarRight);
+            // ESC key to exit fullscreen
+            const handleEscKey = (e) => {
+                if (e.key === 'Escape' && this.isFullScreen)
+                    this.toggleFullScreen();
+            };
+            document.addEventListener('keydown', handleEscKey);
+            this.unsubscribes.push(() => document.removeEventListener('keydown', handleEscKey));
+        }
         this.containerEl.appendChild(this.toolbarEl);
         // Body area (holds sidebar + table, side by side)
         this.bodyArea = document.createElement('div');
@@ -504,6 +529,24 @@ export class OGrid {
     off(event, handler) {
         this.events.off(event, handler);
     }
+    /** Toggle fullscreen mode. */
+    toggleFullScreen() {
+        this.isFullScreen = !this.isFullScreen;
+        if (this.isFullScreen) {
+            this.containerEl.classList.add('ogrid-fullscreen');
+        }
+        else {
+            this.containerEl.classList.remove('ogrid-fullscreen');
+        }
+        // Update button icon + label
+        if (this.fullscreenBtn) {
+            this.fullscreenBtn.title = this.isFullScreen ? 'Exit fullscreen' : 'Fullscreen';
+            this.fullscreenBtn.setAttribute('aria-label', this.isFullScreen ? 'Exit fullscreen' : 'Fullscreen');
+            this.fullscreenBtn.innerHTML = this.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 points="12 6 16 6 16 2"/><line x1="0" y1="10" x2="4" y2="6"/><line x1="16" y1="6" x2="12" y2="10"/></svg>'
+                : '<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 points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/></svg>';
+        }
+    }
     /** Clean up all event listeners and DOM. */
     destroy() {
         this.unsubscribes.forEach((unsub) => unsub());

package/dist/esm/renderer/TableRenderer.js

@@ -192,6 +192,9 @@ export class TableRenderer {
         this.table.className = 'ogrid-table';
         // Render header
         this.thead = document.createElement('thead');
+        if (this.state.stickyHeader) {
+            this.thead.classList.add('ogrid-sticky-header');
+        }
         this.renderHeader();
         this.attachHeaderDelegation();
         this.table.appendChild(this.thead);

package/dist/esm/state/GridState.js

@@ -33,6 +33,8 @@ export class GridState {
         this._onFirstDataRendered = options.onFirstDataRendered;
         this._rowHeight = options.rowHeight;
         this._ariaLabel = options.ariaLabel;
+        this._stickyHeader = options.stickyHeader ?? true;
+        this._fullScreen = options.fullScreen ?? false;
         // Derive initial filter options for client-side data
         if (!this._dataSource) {
             this._filterOptions = deriveFilterOptionsFromData(this._data, this._columns);
@@ -61,6 +63,8 @@ export class GridState {
     get allColumns() { return this._allColumns; }
     get getRowId() { return this._getRowId; }
     get isServerSide() { return this._dataSource != null; }
+    get stickyHeader() { return this._stickyHeader; }
+    get fullScreen() { return this._fullScreen; }
     get filterOptions() { return this._filterOptions; }
     get columnOrder() { return this._columnOrder; }
     get rowHeight() { return this._rowHeight; }

package/dist/styles/ogrid.css

@@ -128,6 +128,30 @@
   overflow: hidden;
 }
 
+.ogrid-container.ogrid-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  border-radius: 0;
+  border: none;
+}
+
+.ogrid-fullscreen-btn {
+  background: none;
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  border-radius: 4px;
+  padding: 4px 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ogrid-fg, #242424);
+}
+
+.ogrid-fullscreen-btn:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+
 .ogrid-toolbar {
   display: flex;
   align-items: center;
@@ -199,9 +223,12 @@
 
 .ogrid-table thead {
   background: var(--ogrid-bg-subtle, #f3f2f1);
+  z-index: 8;
+}
+
+.ogrid-table thead.ogrid-sticky-header {
   position: sticky;
   top: 0;
-  z-index: 8;
 }
 
 .ogrid-table thead th {
@@ -378,6 +405,8 @@
   z-index: 6;
   background: var(--ogrid-bg, #fff);
   will-change: transform;
+  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  box-shadow: 2px 0 4px -1px var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.1));
 }
 
 .ogrid-table thead th[data-pinned='left'] {
@@ -391,6 +420,8 @@
   z-index: 6;
   background: var(--ogrid-bg, #fff);
   will-change: transform;
+  border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  box-shadow: -2px 0 4px -1px var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.1));
 }
 
 .ogrid-table thead th[data-pinned='right'] {

package/dist/types/OGrid.d.ts

@@ -128,6 +128,8 @@ export declare class OGrid<T> {
     private paginationContainer;
     private statusBarContainer;
     private options;
+    private isFullScreen;
+    private fullscreenBtn;
     private renderingHelper;
     private eventWiringHelper;
     /** The imperative grid API (extends React's IOGridApi with JS-specific methods). */
@@ -146,6 +148,8 @@ export declare class OGrid<T> {
     on<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
     /** Unsubscribe from grid events. */
     off<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
+    /** Toggle fullscreen mode. */
+    private toggleFullScreen;
     /** Clean up all event listeners and DOM. */
     destroy(): void;
 }

package/dist/types/state/GridState.d.ts

@@ -26,6 +26,8 @@ export declare class GridState<T> {
     private _firstDataRendered;
     private _rowHeight?;
     private _ariaLabel?;
+    private _stickyHeader;
+    private _fullScreen;
     private _filterOptions;
     private _columnOrder;
     private _visibleColsCache;
@@ -45,6 +47,8 @@ export declare class GridState<T> {
     get allColumns(): (IColumnDef<T> | IColumnGroupDef<T>)[];
     get getRowId(): (item: T) => RowId;
     get isServerSide(): boolean;
+    get stickyHeader(): boolean;
+    get fullScreen(): boolean;
     get filterOptions(): Record<string, string[]>;
     get columnOrder(): string[];
     get rowHeight(): number | undefined;

package/dist/types/types/gridTypes.d.ts

@@ -68,6 +68,10 @@ export interface OGridOptions<T> {
     /** Layout mode: 'content' sizes to content, 'fill' fills container. Default: 'fill'. */
     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;
     /** Custom empty state message. */
     emptyMessage?: string;
     /** Accessible label for the grid. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,9 +36,11 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.1"
+    "@alaarab/ogrid-core": "2.1.3"
   },
-  "sideEffects": ["**/*.css"],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   },