@alaarab/ogrid-js 2.6.0 → 2.6.1

package/dist/styles/ogrid.css

@@ -580,6 +580,54 @@
   color: var(--ogrid-fg, #242424);
 }
 
+/* ── Sheet tabs ── */
+
+.ogrid-sheet-tabs-container:empty {
+  display: none;
+}
+
+.ogrid-sheet-tabs {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-header-bg, #f5f5f5);
+  min-height: 30px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  gap: 0;
+  font-size: 12px;
+}
+
+.ogrid-sheet-tabs__add-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 10px;
+  font-size: 16px;
+  line-height: 22px;
+  color: var(--ogrid-fg-secondary, #666);
+  flex-shrink: 0;
+}
+
+.ogrid-sheet-tabs__tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  padding: 4px 16px;
+  font-size: 12px;
+  line-height: 22px;
+  color: var(--ogrid-fg, #242424);
+  white-space: nowrap;
+  position: relative;
+}
+
+.ogrid-sheet-tabs__tab--active {
+  font-weight: 600;
+  border-bottom-color: var(--ogrid-primary, #217346);
+  background: var(--ogrid-bg, #fff);
+}
+
 /* ── Pagination ── */
 
 .ogrid-pagination-container {

package/dist/types/OGrid.d.ts

@@ -123,10 +123,13 @@ export declare class OGrid<T> {
     private formulaEngine;
     private formulaBar;
     private formulaBarContainer;
+    private sheetTabs;
+    private sheetTabsContainer;
     /** Tracks the text currently displayed/edited in the formula bar. */
     private formulaBarText;
     /** Whether the formula bar input is currently in editing mode. */
     private formulaBarEditing;
+    private activeSheetId;
     private events;
     private unsubscribes;
     private containerEl;
@@ -138,6 +141,12 @@ export declare class OGrid<T> {
     private isFullScreen;
     private fullscreenBtn;
     private nameBoxEl;
+    private lastPage;
+    private lastPageSize;
+    private lastSort;
+    private lastFilters;
+    private lastColumnOrder;
+    private lastPinnedColumns;
     private renderingHelper;
     private eventWiringHelper;
     /** The imperative grid API (extends React's IOGridApi with JS-specific methods). */
@@ -158,14 +167,13 @@ export declare class OGrid<T> {
     private handleFormulaBarCommit;
     private handleFormulaBarCancel;
     private handleFormulaBarStartEditing;
-    /** Set which columns to group by. Pass empty array to clear grouping. */
-    setGroupBy(columnIds: string[]): void;
-    /** Toggle a group open/closed by its key. */
-    toggleGroup(groupKey: string): void;
-    /** Expand all groups. */
-    expandAllGroups(): void;
-    /** Collapse all groups. */
-    collapseAllGroups(): void;
+    private bindColumnStateApi;
+    private bindSheetTabsApi;
+    private setActiveSheet;
+    private handleSheetAdd;
+    private renderSheetTabs;
+    private emitGridStateEvents;
+    private emitPinnedColumnChanges;
     /** Subscribe to grid events. */
     on<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
     /** Unsubscribe from grid events. */

package/dist/types/OGridEventWiring.d.ts

@@ -45,6 +45,7 @@ export interface InteractionResult<T> {
  */
 export interface EventWiringCallbacks<_T> {
     updateRendererInteractionState: () => void;
+    renderAll: () => void;
     updateDragAttributes: () => void;
     clearCachedDragCells: () => void;
     showContextMenu: (x: number, y: number) => void;

package/dist/types/OGridRendering.d.ts

@@ -66,7 +66,7 @@ export interface OGridRenderingContext<T> {
     filterConfigs: Map<string, HeaderFilterConfig>;
     loadingOverlay: HTMLElement | null;
     setLoadingOverlay: (el: HTMLElement | null) => void;
-    handleCellClick: (rowIndex: number, colIndex: number) => void;
+    handleCellClick: (rowIndex: number, colIndex: number, shiftKey?: boolean) => void;
     handleCellMouseDown: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
     handleCellContextMenu: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
     startCellEdit: (rowId: import('@alaarab/ogrid-core').RowId, columnId: string) => void;

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

@@ -0,0 +1,9 @@
+import { type ColumnHeaderMenuHandlers, type ColumnHeaderMenuInput } from '@alaarab/ogrid-core';
+export declare class ColumnHeaderMenu {
+    private menu;
+    private outsideClickHandler;
+    private escapeHandler;
+    show(anchorElement: HTMLElement, input: ColumnHeaderMenuInput, handlers: Partial<ColumnHeaderMenuHandlers>): void;
+    close(): void;
+    destroy(): void;
+}

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

@@ -10,8 +10,13 @@ export interface ContextMenuHandlers {
 export declare class ContextMenu {
     private menu;
     private handlers;
+    private menuItems;
+    private outsideClickCleanup;
     show(x: number, y: number, handlers: ContextMenuHandlers, canUndo: boolean, canRedo: boolean, selectionRange: ISelectionRange | null): void;
     close(): void;
     private handleItemClick;
     destroy(): void;
+    private focusAdjacentMenuItem;
+    private focusFirstEnabledMenuItem;
+    private focusLastEnabledMenuItem;
 }

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

@@ -16,6 +16,7 @@ export declare class InlineCellEditor<T> {
         rowId: RowId;
         columnId: string;
     } | null;
+    cancelEdit(): boolean;
     closeEditor(): void;
     private createEditor;
     /**

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

@@ -0,0 +1,14 @@
+import type { ISheetDef } from '@alaarab/ogrid-core';
+export interface SheetTabsRenderProps {
+    sheets: ISheetDef[];
+    activeSheet: string;
+    onSheetChange: (sheetId: string) => void;
+    onSheetAdd?: () => void;
+}
+export declare class SheetTabs {
+    private container;
+    private el;
+    constructor(container: HTMLElement);
+    render(props: SheetTabsRenderProps): void;
+    destroy(): void;
+}

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

@@ -1,8 +1,10 @@
-import type { IStatusBarProps } from '@alaarab/ogrid-core';
+import type { IStatusBarProps, StatusBarPartsInput } from '@alaarab/ogrid-core';
+type JSStatusBarProps = IStatusBarProps & Pick<StatusBarPartsInput, 'selectedCellCount'>;
 export declare class StatusBar {
     private container;
     private el;
     constructor(container: HTMLElement);
-    render(props: IStatusBarProps): void;
+    render(props: JSStatusBarProps): void;
     destroy(): void;
 }
+export {};

package/dist/types/index.d.ts

@@ -2,8 +2,6 @@ export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IColumnMeta,
 export { toUserLike, isInSelectionRange, normalizeSelectionRange, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, isColumnEditable, createGridDataAccessor, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, computeVisibleColumnRange, partitionColumnsForVirtualization, createSortFilterWorker, terminateSortFilterWorker, extractValueMatrix, processClientSideDataAsync, getHeaderFilterConfig, getCellRenderDescriptor, CellDescriptorCache, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, measureRange, buildCellIndex, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, validateVirtualScrollConfig, indexToColumnLetter, columnLetterToIndex, formatCellReference, getResponsiveHiddenColumns, RESPONSIVE_BREAKPOINTS, resolveResponsiveConfig, applyResponsiveHiding, } from '@alaarab/ogrid-core';
 export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
 export { FormulaError, FormulaEngine, FormulaEvaluator, DependencyGraph, tokenize, parse, createBuiltInFunctions, parseCellRef, parseRange, formatAddress, toCellKey, fromCellKey, adjustFormulaReferences, toNumber, formulaToString, toBoolean, flattenArgs, isFormulaError, REF_ERROR, DIV_ZERO_ERROR, VALUE_ERROR, NAME_ERROR, CIRC_ERROR, GENERAL_ERROR, NA_ERROR, extractFormulaReferences, processFormulaBarCommit, deriveFormulaBarText, handleFormulaBarKeyDown, canInsertReference, insertReferenceAtCursor, FORMULA_REF_COLORS, FORMULA_BAR_CSS, FORMULA_BAR_STYLES, } from '@alaarab/ogrid-core/formula';
-export type { IRowGroup, IRowGroupingConfig, RowGroupingDisplayRow, } from '@alaarab/ogrid-core';
-export { isGroupHeader, buildGroupedRows } from '@alaarab/ogrid-core';
 export type { IColumnDef, IColumnGroupDef, ICellEditorContext } from './types/columnTypes';
 export type { OGridOptions, OGridEvents, IJsOGridApi, CellEvent } from './types/gridTypes';
 export { debounce } from './utils';

package/dist/types/renderer/TableRenderer.d.ts

@@ -35,6 +35,10 @@ export interface TableRendererInteractionState {
     rightOffsets?: Record<string, number>;
     onColumnReorderStart?: (columnId: string, event: PointerEvent) => void;
     onBooleanToggle?: (rowId: RowId, columnId: string, currentValue: boolean) => void;
+    onPinColumn?: (columnId: string, side: 'left' | 'right' | null) => void;
+    onSetColumnSort?: (columnId: string, direction: 'asc' | 'desc' | null) => void;
+    onAutosizeColumn?: (columnId: string) => void;
+    onAutosizeAllColumns?: () => void;
 }
 export declare class TableRenderer<T> {
     private container;
@@ -71,6 +75,7 @@ export declare class TableRenderer<T> {
     private lastAllSelected;
     private lastSomeSelected;
     private formulaEngine;
+    private headerMenu;
     constructor(container: HTMLElement, state: GridState<T>);
     setFormulaEngine(engine: FormulaEngineState): void;
     setVirtualScrollState(vs: VirtualScrollState): void;
@@ -78,6 +83,8 @@ export declare class TableRenderer<T> {
     setOnFilterIconClick(handler: (columnId: string, headerEl: HTMLElement) => void): void;
     setInteractionState(state: TableRendererInteractionState | null): void;
     private getCellFromEvent;
+    private addDelegatedListeners;
+    private removeDelegatedListeners;
     private attachBodyDelegation;
     private detachBodyDelegation;
     /** Attach delegated event listeners to <thead> for sort clicks, resize, reorder, and filter icon clicks. */
@@ -102,8 +109,11 @@ export declare class TableRenderer<T> {
     getColOffset(): number;
     private applyPinningStyles;
     private renderHeader;
+    private appendHeaderContent;
+    private createHeaderFilterButton;
+    private createHeaderMenuButton;
+    private openColumnMenu;
     private appendSelectAllCheckbox;
-    private renderGroupHeaderRow;
     private renderBody;
     /** Get the table element (used by ColumnReorderState for header cell queries). */
     getTableElement(): HTMLTableElement | null;

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

@@ -1,11 +1,33 @@
 import type { IColumnDef, IColumnGroupDef } from '../types/columnTypes';
 import type { RowId, IFilters, OGridOptions, IJsOGridApi } from '../types/gridTypes';
 import type { FilterValue, IResponsiveColumnsConfig } from '@alaarab/ogrid-core';
-import type { RowGroupingDisplayRow } from '@alaarab/ogrid-core';
 import type { FormulaEngineState } from './FormulaEngineState';
-interface StateChangeEvent {
-    type: 'data' | 'sort' | 'filter' | 'page' | 'columns' | 'loading';
-}
+type StateChangeEvent = {
+    type: 'data';
+} | {
+    type: 'loading';
+} | {
+    type: 'sort';
+    sort: {
+        field: string;
+        direction: 'asc' | 'desc';
+    } | undefined;
+} | {
+    type: 'filter';
+    filters: IFilters;
+} | {
+    type: 'page';
+    page: number;
+} | {
+    type: 'pageSize';
+    page: number;
+    pageSize: number;
+} | {
+    type: 'columns';
+    reason: 'visibleColumns' | 'columnOrder' | 'responsive';
+    visibleColumns?: Set<string>;
+    columnOrder?: string[];
+};
 export declare class GridState<T> {
     private emitter;
     private _data;
@@ -28,20 +50,25 @@ export declare class GridState<T> {
     private _firstDataRendered;
     private _rowHeight?;
     private _ariaLabel?;
+    private _ariaLabelledBy?;
     private _stickyHeader;
     private _fullScreen;
     private _workerSort;
     private _formulaEngine;
     private _filterOptions;
     private _columnOrder;
-    private _groupByColumnIds;
-    private _expandedGroups;
     private _responsiveColumns;
     private _containerWidth;
     private _visibleColsCache;
     private _visibleColsDirty;
     private _sortedIndices;
     private _sortDirty;
+    private getKnownColumnIds;
+    private normalizeVisibleColumns;
+    private normalizeColumnOrder;
+    private emitStateChange;
+    private emitDataChange;
+    private handleQueryStateChange;
     constructor(options: OGridOptions<T>);
     get data(): T[];
     get page(): number;
@@ -63,9 +90,8 @@ export declare class GridState<T> {
     get columnOrder(): string[];
     get rowHeight(): number | undefined;
     get ariaLabel(): string | undefined;
+    get ariaLabelledBy(): string | undefined;
     get responsiveColumns(): IResponsiveColumnsConfig | null;
-    get groupByColumnIds(): string[];
-    get expandedGroups(): Set<string>;
     /** Get the visible columns in display order (respects column reorder and responsive hiding). Memoized via dirty flag. */
     get visibleColumnDefs(): IColumnDef<T>[];
     /** Get processed (sorted, filtered, paginated) items for current page. */
@@ -73,18 +99,6 @@ export declare class GridState<T> {
         items: T[];
         totalCount: number;
     };
-    /** Whether row grouping is currently active. */
-    get isGrouped(): boolean;
-    /**
-     * Get display rows with group headers interleaved when grouping is active.
-     * When groupBy is empty, returns the same items as getProcessedItems.
-     * When groupBy is set, returns a flat array of RowGroupingDisplayRow<T>
-     * (group headers + data rows) with pagination applied to the flat list.
-     */
-    getGroupedDisplayRows(): {
-        displayRows: RowGroupingDisplayRow<T>[];
-        totalCount: number;
-    };
     /** Whether worker sort should be used for the current data set. */
     get useWorkerSort(): boolean;
     /**
@@ -98,10 +112,6 @@ export declare class GridState<T> {
     }>;
     private fetchServerData;
     setData(data: T[]): void;
-    setGroupBy(columnIds: string[]): void;
-    toggleGroup(groupKey: string): void;
-    expandAllGroups(): void;
-    collapseAllGroups(): void;
     setPage(page: number): void;
     setPageSize(pageSize: number): void;
     setSort(sort: {
@@ -113,6 +123,7 @@ export declare class GridState<T> {
     clearFilters(): void;
     setVisibleColumns(columns: Set<string>): void;
     setColumnOrder(order: string[]): void;
+    setFilterModel(filters: IFilters): void;
     /** Update the container width for responsive column hiding. Invalidates the visible-cols cache. */
     setContainerWidth(width: number): void;
     setLoading(loading: boolean): void;

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

@@ -13,6 +13,7 @@ export interface KeyboardNavParams<T> {
     onRedo?: () => void;
     onContextMenu?: (x: number, y: number) => void;
     onStartEdit?: (rowId: RowId, columnId: string) => void;
+    onCancelEdit?: () => boolean;
     clearClipboardRanges?: () => void;
     /** Custom keydown handler. Called before grid default. preventDefault() suppresses grid handling. */
     onKeyDown?: (event: KeyboardEvent) => void;

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

@@ -1,6 +1,6 @@
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef, IStatusBarProps, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IResponsiveColumnsConfig } from '@alaarab/ogrid-core';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IOGridApi, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, IResponsiveColumnsConfig, } from '@alaarab/ogrid-core';
+import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef, ISheetDef, IStatusBarProps, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor, IResponsiveColumnsConfig } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, ISheetDef, IVirtualScrollConfig, IOGridApi, IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail, IResponsiveColumnsConfig, } from '@alaarab/ogrid-core';
 /** Standardized cell event parameter for cell interaction callbacks. */
 export interface CellEvent {
     /** Zero-based row index within the current page. */
@@ -28,6 +28,16 @@ export interface IJsOGridApi<T> extends IOGridApi<T> {
     getColumnOrder: () => string[];
     /** Set the column display order. */
     setColumnOrder: (order: string[]) => void;
+    /** Get the currently active sheet tab id. */
+    getActiveSheet: () => string | null;
+    /** Set the active sheet tab id. */
+    setActiveSheet: (sheetId: string) => void;
+    /** Get the current sheet tab definitions. */
+    getSheetDefs: () => ISheetDef[];
+    /** Replace the current sheet tab definitions. */
+    setSheetDefs: (sheetDefs: ISheetDef[], options?: {
+        activeSheet?: string;
+    }) => void;
 }
 /** Options for the vanilla JS OGrid constructor. */
 export interface OGridOptions<T> {
@@ -84,6 +94,14 @@ export interface OGridOptions<T> {
     'aria-labelledby'?: string;
     /** Side bar configuration (columns panel + filters panel). */
     sideBar?: boolean | ISideBarDef;
+    /** Sheet definitions for bottom tab bar. When set, renders Excel-style sheet tabs. */
+    sheetDefs?: ISheetDef[];
+    /** Initially active sheet id. Defaults to the first provided sheet. */
+    activeSheet?: string;
+    /** Called when the user switches sheets. */
+    onSheetChange?: (sheetId: string) => void;
+    /** Called when the user clicks the add-sheet button. */
+    onSheetAdd?: () => void;
     /** Error callback for server-side data source failures. */
     onError?: (error: unknown) => void;
     /** Called when a cell editor throws an error. JS alternative: listen to the 'cellError' event. */
@@ -119,8 +137,6 @@ export interface OGridOptions<T> {
      * - `false` (default): use synchronous sort
      */
     workerSort?: boolean | 'auto';
-    /** Column IDs to group rows by. Groups are collapsed by default. */
-    groupBy?: string[];
     /** Fixed row height in pixels. Overrides default row height (36px). */
     rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
@@ -167,8 +183,10 @@ export interface OGridEvents<T> extends Record<string, unknown> {
     cellValueChanged: ICellValueChangedEvent<T>;
     selectionChange: IRowSelectionChangeEvent<T>;
     sortChange: {
-        field: string;
-        direction: 'asc' | 'desc';
+        sort: {
+            field: string;
+            direction: 'asc' | 'desc';
+        } | undefined;
     };
     filterChange: {
         filters: IFilters;
@@ -176,4 +194,23 @@ export interface OGridEvents<T> extends Record<string, unknown> {
     pageChange: {
         page: number;
     };
+    pageSizeChange: {
+        page: number;
+        pageSize: number;
+    };
+    columnOrderChange: {
+        order: string[];
+    };
+    columnResized: {
+        columnId: string;
+        width: number;
+    };
+    columnPinned: {
+        columnId: string;
+        pin: 'left' | 'right' | null;
+    };
+    sheetChange: {
+        sheetId: string;
+    };
+    sheetAdd: Record<string, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "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,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.6.0"
+    "@alaarab/ogrid-core": "2.6.1"
   },
   "sideEffects": [
     "**/*.css"