@alaarab/ogrid-vue 2.1.1 → 2.1.3

package/dist/esm/components/createDataGridTable.js

@@ -107,6 +107,7 @@ export function createDataGridTable(ui) {
                 const layoutMode = p.layoutMode ?? 'fill';
                 const rowSelection = p.rowSelection ?? 'none';
                 const suppressHorizontalScroll = p.suppressHorizontalScroll;
+                const stickyHeader = p.stickyHeader ?? true;
                 const isLoading = p.isLoading ?? false;
                 const loadingMessage = p.loadingMessage ?? 'Loading\u2026';
                 const ariaLabel = p['aria-label'];
@@ -255,7 +256,7 @@ export function createDataGridTable(ui) {
                                         style: { minWidth: `${minTableWidth}px` },
                                     }, [
                                         // Header
-                                        h('thead', { class: 'ogrid-thead' }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, class: 'ogrid-header-row' }, [
+                                        h('thead', { class: stickyHeader ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead' }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, class: 'ogrid-header-row' }, [
                                             // Checkbox header cell
                                             ...(rowIdx === headerRows.length - 1 && hasCheckboxCol ? [
                                                 h('th', {

package/dist/esm/components/createOGrid.js

@@ -5,7 +5,7 @@
  * they only differ in which DataGridTable, ColumnChooser, and PaginationControls
  * components they use. This factory extracts all shared logic into one place.
  */
-import { defineComponent, h, computed } from 'vue';
+import { defineComponent, h, ref, onMounted, onUnmounted, computed } from 'vue';
 import { useOGrid, } from '../composables';
 // --- SideBar constants and styles ---
 const PANEL_WIDTH = 240;
@@ -245,6 +245,16 @@ export function createOGrid(ui) {
             const { dataGridProps, pagination, columnChooser, layout, api } = useOGrid(propsRef);
             // Expose the ref container so parent always gets the latest API value
             expose({ api });
+            // Fullscreen state
+            const isFullScreen = ref(false);
+            const toggleFullScreen = () => { isFullScreen.value = !isFullScreen.value; };
+            // ESC key to exit fullscreen
+            const handleEscKey = (e) => {
+                if (e.key === 'Escape' && isFullScreen.value)
+                    isFullScreen.value = false;
+            };
+            onMounted(() => { document.addEventListener('keydown', handleEscKey); });
+            onUnmounted(() => { document.removeEventListener('keydown', handleEscKey); });
             return () => {
                 const sideBar = layout.value.sideBarProps;
                 const hasSideBar = sideBar != null;
@@ -254,6 +264,31 @@ export function createOGrid(ui) {
                 if (layout.value.toolbar) {
                     toolbarChildren.push(layout.value.toolbar);
                 }
+                // Fullscreen toggle button
+                const showFullScreen = layout.value.fullScreen === true;
+                const fullscreenButton = showFullScreen
+                    ? h('button', {
+                        type: 'button',
+                        title: isFullScreen.value ? 'Exit fullscreen' : 'Fullscreen',
+                        'aria-label': isFullScreen.value ? 'Exit fullscreen' : 'Fullscreen',
+                        onClick: toggleFullScreen,
+                        style: {
+                            background: 'none',
+                            border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                            borderRadius: '4px',
+                            padding: '4px 6px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: 'var(--ogrid-fg, rgba(0,0,0,0.87))',
+                        },
+                    }, [
+                        isFullScreen.value
+                            ? h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', innerHTML: '<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"/>' })
+                            : h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', innerHTML: '<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"/>' }),
+                    ])
+                    : null;
                 // ColumnChooser in toolbar
                 const toolbarEnd = columnChooser.value.placement === 'toolbar'
                     ? h(ui.ColumnChooser, {
@@ -291,49 +326,56 @@ export function createOGrid(ui) {
                 if (hasSideBar && sideBarPosition !== 'left') {
                     mainAreaChildren.push(renderSideBar(sideBar));
                 }
+                const hasToolbar = toolbarChildren.length > 0 || toolbarEnd != null || fullscreenButton != null;
+                const rootStyle = isFullScreen.value
+                    ? { position: 'fixed', inset: '0', zIndex: 9999, display: 'flex', flexDirection: 'column', background: 'var(--ogrid-bg, #fff)' }
+                    : { display: 'flex', flexDirection: 'column', border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', borderRadius: '4px', overflow: 'hidden' };
+                const containerStyle = isFullScreen.value
+                    ? { display: 'flex', flexDirection: 'column', flex: '1', minHeight: '0', overflow: 'hidden', background: 'var(--ogrid-bg, #fff)' }
+                    : undefined;
                 return h('div', {
                     class: layout.value.className,
-                    style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                        borderRadius: '4px',
-                        overflow: 'hidden',
-                    },
+                    style: rootStyle,
                 }, [
-                    // Toolbar strip
-                    ...(toolbarChildren.length || toolbarEnd ? [
+                    // Inner container (for fullscreen: no border/radius)
+                    h('div', { style: containerStyle ?? {} }, [
+                        // Toolbar strip
+                        ...(hasToolbar ? [
+                            h('div', {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    padding: '8px 12px',
+                                    borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                                    gap: '8px',
+                                },
+                            }, [
+                                h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flex: '1' } }, toolbarChildren),
+                                h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
+                                    ...(toolbarEnd ? [toolbarEnd] : []),
+                                    ...(fullscreenButton ? [fullscreenButton] : []),
+                                ]),
+                            ]),
+                        ] : []),
+                        // Below toolbar strip
+                        ...(layout.value.toolbarBelow ? [
+                            h('div', {
+                                style: { padding: '8px 12px', borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))' },
+                            }, [layout.value.toolbarBelow]),
+                        ] : []),
+                        // Main content area (sidebar + grid)
+                        h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, mainAreaChildren),
+                        // Footer strip (pagination)
                         h('div', {
                             style: {
                                 display: 'flex',
                                 alignItems: 'center',
-                                justifyContent: 'space-between',
-                                padding: '8px 12px',
-                                borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                                gap: '8px',
+                                padding: '8px 0',
+                                borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
                             },
-                        }, [
-                            h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flex: '1' } }, toolbarChildren),
-                            ...(toolbarEnd ? [toolbarEnd] : []),
-                        ]),
-                    ] : []),
-                    // Below toolbar strip
-                    ...(layout.value.toolbarBelow ? [
-                        h('div', {
-                            style: { padding: '8px 12px', borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))' },
-                        }, [layout.value.toolbarBelow]),
-                    ] : []),
-                    // Main content area (sidebar + grid)
-                    h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, mainAreaChildren),
-                    // Footer strip (pagination)
-                    h('div', {
-                        style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            padding: '8px 0',
-                            borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
-                        },
-                    }, [paginationNode]),
+                        }, [paginationNode]),
+                    ]),
                 ]);
             };
         },

package/dist/esm/composables/useDataGridState.js

@@ -329,6 +329,7 @@ export function useDataGridState(params) {
         setColumnSizingOverrides,
         onColumnResized: props.value.onColumnResized,
         measuredColumnWidths: measuredColumnWidths.value,
+        stickyHeader: props.value.stickyHeader ?? true,
     }));
     const rowSelectionState = computed(() => ({
         selectedRowIds: rowSelectionResult.selectedRowIds.value,

package/dist/esm/composables/useOGrid.js

@@ -367,6 +367,7 @@ export function useOGrid(props) {
             getUserByEmail: ds?.getUserByEmail,
             layoutMode: p.layoutMode,
             suppressHorizontalScroll: p.suppressHorizontalScroll,
+            stickyHeader: p.stickyHeader ?? true,
             columnReorder: p.columnReorder,
             virtualScroll: p.virtualScroll,
             rowHeight: p.rowHeight,
@@ -402,6 +403,7 @@ export function useOGrid(props) {
         className: props.value.className,
         emptyState: props.value.emptyState,
         sideBarProps: sideBarProps.value,
+        fullScreen: props.value.fullScreen,
     }));
     const filtersResult = computed(() => ({
         hasActiveFilters: hasActiveFilters.value,

package/dist/esm/styles/ogrid-layout.css

@@ -77,20 +77,27 @@
 
 .ogrid-header-cell {
   font-weight: 600;
-  position: sticky;
-  top: 0;
   background-color: var(--ogrid-header-bg);
   z-index: 8;
 }
 
+.ogrid-sticky-header .ogrid-header-cell {
+  position: sticky;
+  top: 0;
+}
+
 .ogrid-header-cell--pinned-left {
   z-index: 10;
   will-change: transform;
+  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-header-cell--pinned-right {
   z-index: 10;
   will-change: transform;
+  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-header-content {
@@ -185,6 +192,8 @@
   z-index: 6;
   background-color: var(--ogrid-bg);
   will-change: transform;
+  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-data-cell--pinned-right {
@@ -192,6 +201,8 @@
   z-index: 6;
   background-color: var(--ogrid-bg);
   will-change: transform;
+  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-cell-content {

package/dist/types/composables/useDataGridState.d.ts

@@ -28,6 +28,7 @@ export interface DataGridLayoutState<T> {
      *  UI packages use these as a minWidth floor to prevent columns from
      *  shrinking when new data loads (e.g. during server-side pagination). */
     measuredColumnWidths: Record<string, number>;
+    stickyHeader: boolean;
 }
 export interface DataGridRowSelectionState {
     selectedRowIds: Set<RowId>;

package/dist/types/composables/useOGrid.d.ts

@@ -30,6 +30,7 @@ export interface UseOGridLayout {
         render?: () => unknown;
     };
     sideBarProps: SideBarProps | null;
+    fullScreen?: boolean;
 }
 /** Filter state. */
 export interface UseOGridFilters {

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

@@ -63,6 +63,10 @@ interface IOGridBaseProps<T> {
     layoutMode?: 'content' | 'fill';
     /** When true, horizontal scrolling is suppressed (overflow-x hidden). */
     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;
     /** Side bar configuration. `true` shows default panels (columns + filters). Pass ISideBarDef for options. */
     sideBar?: boolean | ISideBarDef;
     /** Page size options shown in the pagination dropdown. Default: [10, 20, 50, 100]. */
@@ -122,6 +126,8 @@ export interface IOGridDataGridProps<T> {
     layoutMode?: 'content' | 'fill';
     /** When true, horizontal scrolling is suppressed (overflow-x hidden). */
     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-vue",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.1"
+    "@alaarab/ogrid-core": "2.1.3"
   },
   "peerDependencies": {
     "vue": "^3.3.0"