@alaarab/ogrid-react 2.1.0 → 2.1.2

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/useFilterOptions.js

@@ -1,10 +1,27 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/** Shallow-compare two string arrays by value. */
+function fieldsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
 /**
  * Load filter options for the given fields from a data source.
  *
  * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
  */
 export function useFilterOptions(dataSource, fields) {
+    // Stabilize the fields array so inline literals (e.g. ['a','b']) don't
+    // cause infinite re-render loops via useCallback/useEffect deps.
+    const fieldsRef = useRef(fields);
+    if (!fieldsEqual(fieldsRef.current, fields)) {
+        fieldsRef.current = fields;
+    }
+    const stableFields = fieldsRef.current;
     const [filterOptions, setFilterOptions] = useState({});
     const [loadingOptions, setLoadingOptions] = useState({});
     const load = useCallback(async () => {
@@ -17,10 +34,10 @@ export function useFilterOptions(dataSource, fields) {
             return;
         }
         const loading = {};
-        fields.forEach((f) => { loading[f] = true; });
+        stableFields.forEach((f) => { loading[f] = true; });
         setLoadingOptions(loading);
         const results = {};
-        await Promise.all(fields.map(async (field) => {
+        await Promise.all(stableFields.map(async (field) => {
             try {
                 results[field] = await fetcher(field);
             }
@@ -30,7 +47,7 @@ export function useFilterOptions(dataSource, fields) {
         }));
         setFilterOptions(results);
         setLoadingOptions({});
-    }, [dataSource, fields]);
+    }, [dataSource, stableFields]);
     useEffect(() => {
         load().catch(() => { });
     }, [load]);

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'
@@ -53,7 +53,6 @@ export function useOGrid(props, ref) {
     const dataFetchingState = useOGridDataFetching({
         isServerSide, dataSource, displayData, columns,
         stableFilters: filtersState.stableFilters,
-        filters: filtersState.filters,
         sort: sortingState.sort,
         page: paginationState.page,
         pageSize: paginationState.pageSize,
@@ -291,6 +290,7 @@ export function useOGrid(props, ref) {
         getUserByEmail: dataSource?.getUserByEmail,
         layoutMode,
         suppressHorizontalScroll,
+        stickyHeader: stickyHeader ?? true,
         columnReorder,
         virtualScroll,
         rowHeight,
@@ -313,7 +313,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,
     ]);
@@ -339,7 +339,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/esm/hooks/useOGridDataFetching.js

@@ -5,7 +5,7 @@ import { processClientSideData } from '../utils';
  * Fires onFirstDataRendered once when items first appear.
  */
 export function useOGridDataFetching(params) {
-    const { isServerSide, dataSource, displayData, columns, stableFilters, filters, sort, page, pageSize, onError, onFirstDataRendered, } = params;
+    const { isServerSide, dataSource, displayData, columns, stableFilters, sort, page, pageSize, onError, onFirstDataRendered, } = params;
     const isClientSide = !isServerSide;
     // --- Client-side filtering & sorting ---
     const clientItemsAndTotal = useMemo(() => {
@@ -35,7 +35,7 @@ export function useOGridDataFetching(params) {
             .fetchPage({
             page, pageSize,
             sort: { field: sort.field, direction: sort.direction },
-            filters,
+            filters: stableFilters,
         })
             .then((res) => {
             if (id !== fetchIdRef.current)
@@ -54,7 +54,7 @@ export function useOGridDataFetching(params) {
             if (id === fetchIdRef.current)
                 setServerLoading(false);
         });
-    }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, filters, onError, refreshCounter]);
+    }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, stableFilters, onError, refreshCounter]);
     const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
     const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
     // Fire onFirstDataRendered once when the grid first has data

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/hooks/useOGridDataFetching.d.ts

@@ -6,7 +6,6 @@ export interface UseOGridDataFetchingParams<T> {
     displayData: T[];
     columns: ICoreColumnDef<T>[];
     stableFilters: IFilters;
-    filters: IFilters;
     sort: {
         field: string;
         direction: 'asc' | 'desc';

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.0",
+  "version": "2.1.2",
   "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.0"
+    "@alaarab/ogrid-core": "2.1.2",
+    "@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",