@alaarab/ogrid-react 2.1.1 → 2.1.3

package/dist/esm/components/OGridLayout.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
 import { SideBar } from './SideBar';
 import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
 // Stable style objects (avoid re-creating on every render)
@@ -12,6 +13,11 @@ const borderedContainerStyle = {
     minHeight: 0,
     background: 'var(--ogrid-bg, #fff)',
 };
+const fullscreenContainerStyle = {
+    ...borderedContainerStyle,
+    borderRadius: 0,
+    border: 'none',
+};
 const toolbarStripBase = {
     display: 'flex',
     justifyContent: 'space-between',
@@ -72,6 +78,29 @@ const rootStyle = {
     flexDirection: 'column',
     height: '100%',
 };
+const fullscreenRootStyle = {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 9999,
+    display: 'flex',
+    flexDirection: 'column',
+    background: 'var(--ogrid-bg, #fff)',
+};
+const fullscreenBtnStyle = {
+    background: 'none',
+    border: '1px solid var(--ogrid-border, #e0e0e0)',
+    borderRadius: 4,
+    padding: '4px 6px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'var(--ogrid-fg, #242424)',
+};
+// SVG expand icon (enter fullscreen)
+const ExpandIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "10 2 14 2 14 6" }), _jsx("polyline", { points: "6 14 2 14 2 10" }), _jsx("line", { x1: "14", y1: "2", x2: "10", y2: "6" }), _jsx("line", { x1: "2", y1: "14", x2: "6", y2: "10" })] }));
+// SVG collapse icon (exit fullscreen)
+const CollapseIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "4 10 0 10 0 14" }), _jsx("polyline", { points: "12 6 16 6 16 2" }), _jsx("line", { x1: "0", y1: "10", x2: "4", y2: "6" }), _jsx("line", { x1: "16", y1: "6", x2: "12", y2: "10" })] }));
 /**
  * Renders OGrid layout as a unified bordered container:
  *   ┌────────────────────────────────────┐
@@ -83,9 +112,25 @@ const rootStyle = {
  *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, children, pagination, sideBar, } = props;
+    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, children, pagination, sideBar, fullScreen, } = props;
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    const toggleFullScreen = useCallback(() => {
+        setIsFullScreen((prev) => !prev);
+    }, []);
+    // ESC key to exit fullscreen
+    useEffect(() => {
+        if (!isFullScreen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                setIsFullScreen(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isFullScreen]);
     const hasSideBar = sideBar != null;
     const sideBarPosition = sideBar?.position ?? 'right';
-    const hasToolbar = toolbar != null || toolbarEnd != null;
-    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarBelow ? toolbarStripNoBorderStyle : toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), toolbarBelow && (_jsx("div", { style: toolbarBelowStyle, children: toolbarBelow })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] }) }));
+    const hasToolbar = toolbar != null || toolbarEnd != null || fullScreen;
+    const fullscreenButton = fullScreen ? (_jsx("button", { type: "button", style: fullscreenBtnStyle, onClick: toggleFullScreen, title: isFullScreen ? 'Exit fullscreen' : 'Fullscreen', "aria-label": isFullScreen ? 'Exit fullscreen' : 'Fullscreen', children: isFullScreen ? _jsx(CollapseIcon, {}) : _jsx(ExpandIcon, {}) })) : null;
+    return (_jsx(Container, { className: className, style: isFullScreen ? fullscreenRootStyle : rootStyle, ...containerProps, children: _jsxs("div", { style: isFullScreen ? fullscreenContainerStyle : borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarBelow ? toolbarStripNoBorderStyle : toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsxs("div", { style: toolbarSectionStyle, children: [toolbarEnd, fullscreenButton] })] })), toolbarBelow && (_jsx("div", { style: toolbarBelowStyle, children: toolbarBelow })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] }) }));
 }

package/dist/esm/components/createOGrid.js

@@ -12,7 +12,7 @@ export function createOGrid(components) {
     const { DataGridTable, ColumnChooser, PaginationControls, containerComponent, containerProps, } = components;
     const OGridInner = forwardRef(function OGridInner(props, ref) {
         const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
-        return (_jsx(OGridLayout, { containerComponent: containerComponent, containerProps: containerProps, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange, onSetVisibleColumns: columnChooser.onSetVisibleColumns })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: pagination.setPageSize, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+        return (_jsx(OGridLayout, { containerComponent: containerComponent, containerProps: containerProps, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, fullScreen: layout.fullScreen, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange, onSetVisibleColumns: columnChooser.onSetVisibleColumns })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: pagination.setPageSize, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
     });
     OGridInner.displayName = 'OGrid';
     return React.memo(OGridInner);

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -35,7 +35,7 @@ export function useDataGridTableOrchestration(params) {
     const { headerMenu } = pinning;
     const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
     // ── Props destructuring ─────────────────────────────────────────────────
-    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, rowHeight, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, stickyHeader = true, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, rowHeight, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
     // ── Derived values ──────────────────────────────────────────────────────
     const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
     const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
@@ -116,6 +116,7 @@ export function useDataGridTableOrchestration(params) {
         layoutMode,
         rowSelection,
         suppressHorizontalScroll,
+        stickyHeader,
         isLoading,
         loadingMessage,
         ariaLabel,

package/dist/esm/hooks/useOGrid.js

@@ -17,7 +17,7 @@ const EMPTY_LOADING_OPTIONS = {};
  * @returns Grouped props for DataGridTable, pagination controls, column chooser, layout, and filters.
  */
 export function useOGrid(props, ref) {
-    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, showRowNumbers, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, rowHeight, density = 'normal', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, showRowNumbers, statusBar, pageSizeOptions, sideBar, stickyHeader, fullScreen, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, rowHeight, density = 'normal', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // --- Derived column state ---
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -73,6 +73,22 @@ export function useOGrid(props, ref) {
             .map((c) => c.columnId);
         return new Set(visible.length > 0 ? visible : columns.map((c) => c.columnId));
     });
+    // Re-initialize when columns arrive after starting empty (common pattern: columns
+    // depend on async data, so the initial render passes columns=[] then re-renders
+    // with actual columns once data loads).
+    const prevColumnsLengthRef = useRef(columns.length);
+    useEffect(() => {
+        const prev = prevColumnsLengthRef.current;
+        prevColumnsLengthRef.current = columns.length;
+        if (controlledVisibleColumns !== undefined)
+            return; // controlled — skip
+        if (prev === 0 && columns.length > 0 && internalVisibleColumns.size === 0) {
+            const visible = columns
+                .filter((c) => c.defaultVisible !== false)
+                .map((c) => c.columnId);
+            setInternalVisibleColumns(new Set(visible.length > 0 ? visible : columns.map((c) => c.columnId)));
+        }
+    }, [columns, controlledVisibleColumns, internalVisibleColumns.size]);
     const visibleColumns = controlledVisibleColumns ?? internalVisibleColumns;
     const setVisibleColumns = useCallback((cols) => {
         if (controlledVisibleColumns === undefined)
@@ -290,6 +306,7 @@ export function useOGrid(props, ref) {
         getUserByEmail: dataSource?.getUserByEmail,
         layoutMode,
         suppressHorizontalScroll,
+        stickyHeader: stickyHeader ?? true,
         columnReorder,
         virtualScroll,
         rowHeight,
@@ -312,7 +329,7 @@ export function useOGrid(props, ref) {
         paginationState.page, paginationState.pageSize, statusBarConfig,
         isLoadingResolved, filtersState.filters, filtersState.handleFilterChange,
         filtersState.clientFilterOptions, dataSource, filtersState.loadingFilterOptions,
-        layoutMode, suppressHorizontalScroll, columnReorder, virtualScroll,
+        layoutMode, suppressHorizontalScroll, stickyHeader, columnReorder, virtualScroll,
         rowHeight, density, ariaLabel, ariaLabelledBy,
         filtersState.hasActiveFilters, clearAllFilters, emptyState,
     ]);
@@ -338,7 +355,8 @@ export function useOGrid(props, ref) {
         className,
         emptyState,
         sideBarProps,
-    }), [toolbar, toolbarBelow, className, emptyState, sideBarProps]);
+        fullScreen,
+    }), [toolbar, toolbarBelow, className, emptyState, sideBarProps, fullScreen]);
     const filtersResult = useMemo(() => ({
         hasActiveFilters: filtersState.hasActiveFilters,
         setFilters: filtersState.setFilters,

package/dist/types/components/OGridLayout.d.ts

@@ -23,6 +23,8 @@ export interface OGridLayoutProps {
     pagination?: React.ReactNode;
     /** Side bar props. When provided, renders SideBar alongside the grid. */
     sideBar?: SideBarProps | null;
+    /** When true, render a fullscreen toggle button in the toolbar. */
+    fullScreen?: boolean;
 }
 /**
  * Renders OGrid layout as a unified bordered container:

package/dist/types/hooks/useDataGridTableOrchestration.d.ts

@@ -37,6 +37,7 @@ export interface UseDataGridTableOrchestrationResult<T> {
     layoutMode: 'fill' | 'content';
     rowSelection: IOGridDataGridProps<T>['rowSelection'];
     suppressHorizontalScroll: IOGridDataGridProps<T>['suppressHorizontalScroll'];
+    stickyHeader: boolean;
     isLoading: boolean;
     loadingMessage: string;
     ariaLabel: string | undefined;

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

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

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

@@ -64,6 +64,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]. */
@@ -123,6 +127,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-react",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,18 +36,13 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.1"
+    "@alaarab/ogrid-core": "2.1.3",
+    "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {
-    "@tanstack/react-virtual": "^3.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "@tanstack/react-virtual": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",