@alaarab/ogrid-js 2.4.2 → 2.5.1

package/dist/styles/ogrid.css

@@ -296,9 +296,18 @@
   width: 8px;
   cursor: col-resize;
   user-select: none;
+  touch-action: none; /* Prevent browser scroll/zoom during column resize drag */
   z-index: var(--ogrid-z-resize-handle, 1);
 }
 
+/* Increase touch target on touch-capable devices */
+@media (pointer: coarse) {
+  .ogrid-resize-handle {
+    width: 16px;
+    right: -8px;
+  }
+}
+
 .ogrid-resize-handle::after {
   content: '';
   position: absolute;
@@ -406,6 +415,7 @@
   outline-offset: -1px;
   z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
+  contain: none;
 }
 
 /* Cell range/drag highlights: qualify with .ogrid-container to reach specificity 0,3,0,
@@ -447,9 +457,21 @@
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
+  touch-action: none; /* Prevent browser scroll/zoom during fill handle drag */
   z-index: var(--ogrid-z-fill-handle, 3);
 }
 
+/* Increase touch target on touch-capable devices */
+@media (pointer: coarse) {
+  .ogrid-fill-handle {
+    width: 14px;
+    height: 14px;
+    right: -7px;
+    bottom: -7px;
+    border-radius: 2px;
+  }
+}
+
 /* ── Pinned Columns ── */
 
 .ogrid-table th[data-pinned='left'],
@@ -1072,3 +1094,50 @@
 .ogrid-table td[data-type='numeric'] {
   text-align: right;
 }
+
+/* ── Responsive Layout ── */
+
+/* Compact pagination on small screens */
+@media (max-width: 576px) {
+  .ogrid-pagination {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 6px 8px;
+  }
+
+  .ogrid-pagination-nav {
+    order: -1;
+    justify-content: center;
+  }
+
+  .ogrid-pagination-info {
+    font-size: 11px;
+    text-align: center;
+  }
+
+  .ogrid-pagination-size {
+    font-size: 11px;
+    justify-content: center;
+  }
+
+  .ogrid-toolbar {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px 8px;
+  }
+
+  /* Sidebar becomes overlay on narrow viewports */
+  .ogrid-sidebar-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 50;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .ogrid-body-area {
+    position: relative;
+  }
+}

package/dist/types/OGridEventWiring.d.ts

@@ -3,7 +3,7 @@
  *
  * Extracts event subscription setup from OGrid for modularity:
  *   - initializeInteraction() — creates interaction states and subscribes events
- *   - attachGlobalHandlers() — global mouse handlers for resize and drag
+ *   - attachGlobalHandlers() — global pointer handlers for resize and drag
  *
  * Not exported publicly — instantiated and owned by OGrid.
  */

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

@@ -10,7 +10,7 @@ export declare class InlineCellEditor<T> {
     private onAfterCommit;
     private scrollCleanup;
     constructor(container: HTMLElement);
-    startEdit(rowId: RowId, columnId: string, item: T, column: IColumnDef<T>, cell: HTMLTableCellElement, onCommit: (rowId: RowId, columnId: string, value: unknown) => void, onCancel: () => void, onAfterCommit?: () => void): void;
+    startEdit(rowId: RowId, columnId: string, item: T, column: IColumnDef<T>, cell: HTMLTableCellElement, onCommit: (rowId: RowId, columnId: string, value: unknown) => void, onCancel: () => void, onAfterCommit?: () => void, overrideValue?: unknown): void;
     /** Returns the cell currently being edited, or null if no editor is open. */
     getEditingCell(): {
         rowId: RowId;

package/dist/types/index.d.ts

@@ -1,4 +1,7 @@
-export * from '@alaarab/ogrid-core';
+export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IColumnMeta, IValueParserParams, IColumnDef as ICoreColumnDef, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IColumnGroupDef as ICoreColumnGroupDef, HeaderCell, HeaderRow, IColumnDefinition, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, ISheetDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, CsvColumn, FormulaExportOptions, StatusBarPart, StatusBarPartsInput, PaginationViewModel, GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, ColumnPinState, IDropTarget, ICalculateDropTargetParams, IVisibleRange, IVisibleColumnRange, SortFilterRequest, SortFilterResponse, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, OverlayRect, ISortState, ArrowNavigationContext, ArrowNavigationResult, IFillFormulaOptions, FormulaReference, IResponsiveColumnsConfig, ZIndexKey, ICellAddress, ICellRange, CellKey, FormulaErrorType, TokenType, Token, ASTNode, BinaryOp, IFormulaContext, IFormulaFunction, IEvaluator, IRecalcResult, IFormulaEngineConfig, IGridDataAccessor, INamedRange, IAuditEntry, IAuditTrail, } from '@alaarab/ogrid-core';
+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 { 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

@@ -20,7 +20,7 @@ export interface TableRendererInteractionState {
     onCellContextMenu?: (cellEvent: CellEvent) => void;
     onResizeStart?: (columnId: string, clientX: number, currentWidth: number) => void;
     onResizeDoubleClick?: (columnId: string) => void;
-    onFillHandleMouseDown?: (e: MouseEvent) => void;
+    onFillHandleMouseDown?: (e: PointerEvent) => void;
     rowSelectionMode?: 'single' | 'multiple' | 'none';
     selectedRowIds?: Set<RowId>;
     onRowCheckboxChange?: (rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean) => void;
@@ -33,7 +33,7 @@ export interface TableRendererInteractionState {
     pinnedColumns?: Record<string, 'left' | 'right'>;
     leftOffsets?: Record<string, number>;
     rightOffsets?: Record<string, number>;
-    onColumnReorderStart?: (columnId: string, event: MouseEvent) => void;
+    onColumnReorderStart?: (columnId: string, event: PointerEvent) => void;
 }
 export declare class TableRenderer<T> {
     private container;
@@ -49,11 +49,11 @@ export declare class TableRenderer<T> {
     private dropIndicator;
     private virtualScrollState;
     private _tbodyClickHandler;
-    private _tbodyMousedownHandler;
+    private _tbodyPointerdownHandler;
     private _tbodyDblclickHandler;
     private _tbodyContextmenuHandler;
     private _theadClickHandler;
-    private _theadMousedownHandler;
+    private _theadPointerdownHandler;
     private _theadDblclickHandler;
     private lastActiveCell;
     private lastSelectionRange;

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

@@ -29,9 +29,9 @@ export declare class ColumnReorderState {
     get dropIndicatorX(): number | null;
     /**
      * Begin a column drag operation.
-     * Called from mousedown on a header cell.
+     * Called from pointerdown on a header cell.
      */
-    startDrag(columnId: string, event: MouseEvent, columns: {
+    startDrag(columnId: string, event: PointerEvent, columns: {
         columnId: string;
     }[], columnOrder: string[], pinnedColumns: Record<string, 'left' | 'right'> | undefined, tableElement: Element): void;
     private handleMouseMove;

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

@@ -42,8 +42,8 @@ export declare class FillHandleState<T> {
     updateParams(params: FillHandleParams<T>): void;
     /** Fill the current selection down from the top row (keyboard Ctrl+D). No-op if no selection or editable=false. */
     fillDown(): void;
-    /** Called when the fill handle square is mousedown'd. */
-    startFillDrag(e: MouseEvent): void;
+    /** Called when the fill handle square is pointerdown'd. */
+    startFillDrag(e: PointerEvent): void;
     private onMouseMove;
     private onMouseUp;
     private applyFillValuesFromCore;

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

@@ -1,6 +1,6 @@
 import type { IColumnDef, IColumnGroupDef } from '../types/columnTypes';
 import type { RowId, IFilters, OGridOptions, IJsOGridApi } from '../types/gridTypes';
-import type { FilterValue } from '@alaarab/ogrid-core';
+import type { FilterValue, IResponsiveColumnsConfig } from '@alaarab/ogrid-core';
 import type { FormulaEngineState } from './FormulaEngineState';
 interface StateChangeEvent {
     type: 'data' | 'sort' | 'filter' | 'page' | 'columns' | 'loading';
@@ -33,6 +33,8 @@ export declare class GridState<T> {
     private _formulaEngine;
     private _filterOptions;
     private _columnOrder;
+    private _responsiveColumns;
+    private _containerWidth;
     private _visibleColsCache;
     private _visibleColsDirty;
     constructor(options: OGridOptions<T>);
@@ -56,7 +58,8 @@ export declare class GridState<T> {
     get columnOrder(): string[];
     get rowHeight(): number | undefined;
     get ariaLabel(): string | undefined;
-    /** Get the visible columns in display order (respects column reorder). Memoized via dirty flag. */
+    get responsiveColumns(): IResponsiveColumnsConfig | null;
+    /** 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. */
     getProcessedItems(): {
@@ -86,6 +89,8 @@ export declare class GridState<T> {
     clearFilters(): void;
     setVisibleColumns(columns: Set<string>): void;
     setColumnOrder(order: string[]): void;
+    /** Update the container width for responsive column hiding. Invalidates the visible-cols cache. */
+    setContainerWidth(width: number): void;
     setLoading(loading: boolean): void;
     refreshData(): void;
     onStateChange(handler: (event: StateChangeEvent) => void): () => void;

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

@@ -1,14 +1,14 @@
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef, IStatusBarProps, IVirtualScrollConfig, IFormulaFunction, IRecalcResult, IGridDataAccessor } 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, } from '@alaarab/ogrid-core';
+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';
 /** Standardized cell event parameter for cell interaction callbacks. */
 export interface CellEvent {
     /** Zero-based row index within the current page. */
     rowIndex: number;
     /** Zero-based column index among visible columns. */
     colIndex: number;
-    /** The original DOM mouse event, when available. */
-    event?: MouseEvent;
+    /** The original DOM event (MouseEvent for click/dblclick/contextmenu, PointerEvent for pointerdown). */
+    event?: MouseEvent | PointerEvent;
     /** Typed row identifier (string or number). Present for double-click events. */
     rowId?: RowId;
     /** Column identifier string. Present for double-click events. */
@@ -104,6 +104,14 @@ export interface OGridOptions<T> {
     onFirstDataRendered?: () => void;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
+    /**
+     * Enable responsive column hiding based on container width.
+     * Columns with `responsivePriority` are hidden/shown as the container resizes.
+     * - `true`: use default breakpoints
+     * - `IResponsiveColumnsConfig`: custom breakpoints
+     * - `false` or omitted: disabled
+     */
+    responsiveColumns?: boolean | IResponsiveColumnsConfig;
     /**
      * Offload sorting to a Web Worker to avoid blocking the main thread.
      * - `true`: always use worker sort

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.4.2",
+  "version": "2.5.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.4.2"
+    "@alaarab/ogrid-core": "2.5.1"
   },
   "sideEffects": [
     "**/*.css"