@alaarab/ogrid-js 2.0.0-beta

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

@@ -0,0 +1,35 @@
+import type { IActiveCell, ISelectionRange, IColumnDef, ICellValueChangedEvent } from '@alaarab/ogrid-core';
+interface ClipboardStateEvents extends Record<string, unknown> {
+    rangesChange: {
+        copyRange: ISelectionRange | null;
+        cutRange: ISelectionRange | null;
+    };
+}
+export interface ClipboardParams<T> {
+    items: T[];
+    visibleCols: IColumnDef<T>[];
+    colOffset: number;
+    editable?: boolean;
+    onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+}
+export declare class ClipboardState<T> {
+    private emitter;
+    private params;
+    private getActiveCell;
+    private getSelectionRange;
+    private _cutRange;
+    private _copyRange;
+    private internalClipboard;
+    constructor(params: ClipboardParams<T>, getActiveCell: () => IActiveCell | null, getSelectionRange: () => ISelectionRange | null);
+    updateParams(params: ClipboardParams<T>): void;
+    get cutRange(): ISelectionRange | null;
+    get copyRange(): ISelectionRange | null;
+    private getEffectiveRange;
+    handleCopy(): void;
+    handleCut(): void;
+    handlePaste(): Promise<void>;
+    clearClipboardRanges(): void;
+    onRangesChange(handler: (data: ClipboardStateEvents['rangesChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,36 @@
+import type { IColumnDef } from '@alaarab/ogrid-core';
+interface ColumnPinningEvents extends Record<string, unknown> {
+    pinningChange: {
+        pinnedColumns: Record<string, 'left' | 'right'>;
+    };
+}
+/**
+ * Manages column pinning state — tracks which columns are pinned left/right.
+ * Computes sticky offsets for the renderer.
+ */
+export declare class ColumnPinningState {
+    private emitter;
+    private _pinnedColumns;
+    constructor(pinnedColumns?: Record<string, 'left' | 'right'>, columns?: IColumnDef[]);
+    get pinnedColumns(): Record<string, 'left' | 'right'>;
+    pinColumn(columnId: string, side: 'left' | 'right'): void;
+    unpinColumn(columnId: string): void;
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    /**
+     * Compute sticky left offsets for left-pinned columns.
+     * Returns a map of columnId -> left offset in pixels.
+     */
+    computeLeftOffsets(visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number): Record<string, number>;
+    /**
+     * Compute sticky right offsets for right-pinned columns.
+     * Returns a map of columnId -> right offset in pixels.
+     */
+    computeRightOffsets(visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number): Record<string, number>;
+    onPinningChange(handler: (data: ColumnPinningEvents['pinningChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,23 @@
+interface ColumnResizeStateEvents extends Record<string, unknown> {
+    columnWidthChange: {
+        columnId: string;
+        widthPx: number;
+    };
+}
+export declare class ColumnResizeState {
+    private emitter;
+    private columnWidths;
+    private isResizing;
+    private resizeColumnId;
+    private resizeStartX;
+    private resizeStartWidth;
+    get resizingColumnId(): string | null;
+    getColumnWidth(columnId: string): number | undefined;
+    getAllColumnWidths(): Record<string, number>;
+    startResize(columnId: string, clientX: number, currentWidth: number): void;
+    updateResize(clientX: number): number | null;
+    endResize(clientX: number): void;
+    onColumnWidthChange(handler: (data: ColumnResizeStateEvents['columnWidthChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,9 @@
+type EventHandler<T = unknown> = (data: T) => void;
+export declare class EventEmitter<TEvents extends Record<string, unknown> = Record<string, unknown>> {
+    private handlers;
+    on<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    off<K extends keyof TEvents>(event: K, handler: EventHandler<TEvents[K]>): void;
+    emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void;
+    removeAllListeners(event?: keyof TEvents): void;
+}
+export {};

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

@@ -0,0 +1,51 @@
+import type { IActiveCell, ISelectionRange, IColumnDef, ICellValueChangedEvent } from '@alaarab/ogrid-core';
+interface FillHandleEvents extends Record<string, unknown> {
+    fillRangeChange: {
+        fillRange: ISelectionRange | null;
+    };
+}
+export interface FillHandleParams<T> {
+    items: T[];
+    visibleCols: IColumnDef<T>[];
+    editable?: boolean;
+    onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+    colOffset: number;
+    beginBatch?: () => void;
+    endBatch?: () => void;
+}
+/**
+ * Manages Excel-style fill handle drag-to-fill for cell ranges (vanilla JS).
+ * Mirrors the React `useFillHandle` hook as a class-based state.
+ */
+export declare class FillHandleState<T> {
+    private emitter;
+    private params;
+    private getSelectionRange;
+    private setSelectionRange;
+    private setActiveCell;
+    private wrapperRef;
+    private _isFillDragging;
+    private fillDragStart;
+    private fillDragEnd;
+    private rafHandle;
+    private liveFillRange;
+    private lastMousePos;
+    private onMoveBound;
+    private onUpBound;
+    constructor(params: FillHandleParams<T>, getSelectionRange: () => ISelectionRange | null, setSelectionRange: (range: ISelectionRange | null) => void, setActiveCell: (cell: IActiveCell | null) => void);
+    get isFillDragging(): boolean;
+    get fillRange(): ISelectionRange | null;
+    setWrapperRef(ref: HTMLElement | null): void;
+    updateParams(params: FillHandleParams<T>): void;
+    /** Called when the fill handle square is mousedown'd. */
+    startFillDrag(e: MouseEvent): void;
+    private onMouseMove;
+    private onMouseUp;
+    private applyFillValues;
+    private resolveRange;
+    private applyDragAttrs;
+    private clearDragAttrs;
+    onFillRangeChange(handler: (data: FillHandleEvents['fillRangeChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,68 @@
+import type { IColumnDef, IColumnGroupDef } from '../types/columnTypes';
+import type { RowId, IFilters, OGridOptions, IJsOGridApi } from '../types/gridTypes';
+import type { FilterValue } from '@alaarab/ogrid-core';
+interface StateChangeEvent {
+    type: 'data' | 'sort' | 'filter' | 'page' | 'columns' | 'loading';
+}
+export declare class GridState<T> {
+    private emitter;
+    private _data;
+    private _page;
+    private _pageSize;
+    private _sort;
+    private _filters;
+    private _visibleColumns;
+    private _isLoading;
+    private _columns;
+    private _allColumns;
+    private _getRowId;
+    private _dataSource;
+    private _serverItems;
+    private _serverTotalCount;
+    private _fetchId;
+    private _onError?;
+    private _onFirstDataRendered?;
+    private _firstDataRendered;
+    private _filterOptions;
+    constructor(options: OGridOptions<T>);
+    get data(): T[];
+    get page(): number;
+    get pageSize(): number;
+    get sort(): {
+        field: string;
+        direction: 'asc' | 'desc';
+    } | undefined;
+    get filters(): IFilters;
+    get visibleColumns(): Set<string>;
+    get isLoading(): boolean;
+    get columns(): IColumnDef<T>[];
+    get allColumns(): (IColumnDef<T> | IColumnGroupDef<T>)[];
+    get getRowId(): (item: T) => RowId;
+    get isServerSide(): boolean;
+    get filterOptions(): Record<string, string[]>;
+    /** Get the visible columns in display order. */
+    get visibleColumnDefs(): IColumnDef<T>[];
+    /** Get processed (sorted, filtered, paginated) items for current page. */
+    getProcessedItems(): {
+        items: T[];
+        totalCount: number;
+    };
+    private fetchServerData;
+    setData(data: T[]): void;
+    setPage(page: number): void;
+    setPageSize(pageSize: number): void;
+    setSort(sort: {
+        field: string;
+        direction: 'asc' | 'desc';
+    } | undefined): void;
+    toggleSort(field: string): void;
+    setFilter(key: string, value: FilterValue | undefined): void;
+    clearFilters(): void;
+    setVisibleColumns(columns: Set<string>): void;
+    setLoading(loading: boolean): void;
+    refreshData(): void;
+    onStateChange(handler: (event: StateChangeEvent) => void): () => void;
+    getApi(): IJsOGridApi<T>;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,64 @@
+import type { IFilters, FilterValue } from '@alaarab/ogrid-core';
+import type { ColumnFilterType } from '@alaarab/ogrid-core';
+export interface HeaderFilterConfig {
+    columnId: string;
+    filterField: string;
+    filterType: ColumnFilterType;
+}
+/**
+ * Manages header filter popover state for all columns.
+ * Equivalent of React's useColumnHeaderFilterState, but class-based.
+ */
+export declare class HeaderFilterState {
+    private emitter;
+    private _openColumnId;
+    private _tempTextValue;
+    private _tempSelected;
+    private _tempDateFrom;
+    private _tempDateTo;
+    private _searchText;
+    private _popoverPosition;
+    private _filters;
+    private _onFilterChange;
+    private _filterOptions;
+    private _clickOutsideHandler;
+    private _escapeHandler;
+    private _popoverEl;
+    private _headerEl;
+    constructor(onFilterChange: (key: string, value: FilterValue | undefined) => void);
+    get openColumnId(): string | null;
+    get tempTextValue(): string;
+    get tempSelected(): Set<string>;
+    get tempDateFrom(): string;
+    get tempDateTo(): string;
+    get searchText(): string;
+    get popoverPosition(): {
+        top: number;
+        left: number;
+    } | null;
+    setFilters(filters: IFilters): void;
+    setFilterOptions(options: Record<string, string[]>): void;
+    getFilterOptions(filterField: string): string[];
+    getFilteredOptions(filterField: string): string[];
+    hasActiveFilter(config: HeaderFilterConfig): boolean;
+    /**
+     * Open a filter popover for a specific column.
+     */
+    open(columnId: string, config: HeaderFilterConfig, headerEl: HTMLElement, popoverEl: HTMLElement): void;
+    close(): void;
+    setTempTextValue(v: string): void;
+    setSearchText(v: string): void;
+    setTempDateFrom(v: string): void;
+    setTempDateTo(v: string): void;
+    handleCheckboxChange(option: string, checked: boolean): void;
+    handleSelectAll(filterField: string): void;
+    handleClearSelection(): void;
+    applyTextFilter(filterField: string): void;
+    clearTextFilter(filterField: string): void;
+    applyMultiSelectFilter(filterField: string): void;
+    applyDateFilter(filterField: string): void;
+    clearDateFilter(filterField: string): void;
+    clearFilter(filterField: string): void;
+    onChange(handler: () => void): () => void;
+    destroy(): void;
+}

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

@@ -0,0 +1,29 @@
+import type { IActiveCell, ISelectionRange, IColumnDef, ICellValueChangedEvent, RowId } from '@alaarab/ogrid-core';
+export interface KeyboardNavParams<T> {
+    items: T[];
+    visibleCols: IColumnDef<T>[];
+    colOffset: number;
+    getRowId: (item: T) => RowId;
+    editable?: boolean;
+    onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+    onCopy?: () => void;
+    onCut?: () => void;
+    onPaste?: () => Promise<void>;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onContextMenu?: (x: number, y: number) => void;
+    onStartEdit?: (rowId: RowId, columnId: string) => void;
+    clearClipboardRanges?: () => void;
+}
+export declare class KeyboardNavState<T> {
+    private params;
+    private getActiveCell;
+    private getSelectionRange;
+    private setActiveCell;
+    private setSelectionRange;
+    private wrapperRef;
+    constructor(params: KeyboardNavParams<T>, getActiveCell: () => IActiveCell | null, getSelectionRange: () => ISelectionRange | null, setActiveCell: (cell: IActiveCell | null) => void, setSelectionRange: (range: ISelectionRange | null) => void);
+    setWrapperRef(ref: HTMLElement | null): void;
+    updateParams(params: KeyboardNavParams<T>): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+}

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

@@ -0,0 +1,23 @@
+import type { RowId, RowSelectionMode, IRowSelectionChangeEvent } from '@alaarab/ogrid-core';
+/**
+ * Manages row selection state for single or multiple selection modes with shift-click range support.
+ * Vanilla JS equivalent of React's `useRowSelection` hook.
+ */
+export declare class RowSelectionState<T> {
+    private emitter;
+    private _selectedRowIds;
+    private _rowSelection;
+    private _lastClickedRow;
+    private _getRowId;
+    constructor(rowSelection: RowSelectionMode, getRowId: (item: T) => RowId);
+    get selectedRowIds(): Set<RowId>;
+    get rowSelection(): RowSelectionMode;
+    updateSelection(newSelectedIds: Set<RowId>, items: T[]): void;
+    handleRowCheckboxChange(rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean, items: T[]): void;
+    handleSelectAll(checked: boolean, items: T[]): void;
+    isAllSelected(items: T[]): boolean;
+    isSomeSelected(items: T[]): boolean;
+    getSelectedRows(items: T[]): T[];
+    onRowSelectionChange(handler: (data: IRowSelectionChangeEvent<T>) => void): () => void;
+    destroy(): void;
+}

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

@@ -0,0 +1,37 @@
+import type { IActiveCell, ISelectionRange, RowId } from '@alaarab/ogrid-core';
+interface SelectionStateEvents extends Record<string, unknown> {
+    selectionChange: {
+        activeCell: IActiveCell | null;
+        selectionRange: ISelectionRange | null;
+    };
+    rowSelectionChange: {
+        selectedRowIds: Set<RowId>;
+    };
+}
+export declare class SelectionState {
+    private emitter;
+    private _activeCell;
+    private _selectionRange;
+    private _selectedRowIds;
+    private _isDragging;
+    private dragStartCell;
+    private rafHandle;
+    private pendingRange;
+    get activeCell(): IActiveCell | null;
+    get selectionRange(): ISelectionRange | null;
+    get selectedRowIds(): Set<RowId>;
+    get isDragging(): boolean;
+    /** Get the current drag range (used during drag for DOM attribute updates). */
+    getDragRange(): ISelectionRange | null;
+    setActiveCell(cell: IActiveCell | null): void;
+    setSelectionRange(range: ISelectionRange | null): void;
+    clearSelection(): void;
+    startDrag(rowIndex: number, colIndex: number): void;
+    updateDrag(rowIndex: number, colIndex: number, applyFn: (range: ISelectionRange) => void): void;
+    endDrag(): void;
+    setSelectedRowIds(ids: Set<RowId>): void;
+    onSelectionChange(handler: (data: SelectionStateEvents['selectionChange']) => void): () => void;
+    onRowSelectionChange(handler: (data: SelectionStateEvents['rowSelectionChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import type { SideBarPanelId, ISideBarDef } from '@alaarab/ogrid-core';
+export declare class SideBarState {
+    private emitter;
+    private _isEnabled;
+    private _panels;
+    private _position;
+    private _activePanel;
+    constructor(config: boolean | ISideBarDef | undefined);
+    get isEnabled(): boolean;
+    get panels(): SideBarPanelId[];
+    get position(): 'left' | 'right';
+    get activePanel(): SideBarPanelId | null;
+    get isOpen(): boolean;
+    setActivePanel(panel: SideBarPanelId | null): void;
+    toggle(panel: SideBarPanelId): void;
+    close(): void;
+    onChange(handler: () => void): () => void;
+    destroy(): void;
+}

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

@@ -0,0 +1,33 @@
+interface LayoutChangeEvent {
+    type: 'containerResize' | 'columnOverride';
+}
+export declare class TableLayoutState {
+    private emitter;
+    private _containerWidth;
+    private _columnSizingOverrides;
+    private _ro;
+    /** Start observing a container element for resize. */
+    observeContainer(el: HTMLElement): void;
+    private disconnectObserver;
+    get containerWidth(): number;
+    get columnSizingOverrides(): Record<string, number>;
+    /** Set a column width override (from resize drag). */
+    setColumnOverride(columnId: string, widthPx: number): void;
+    /** Compute minimum table width from visible columns. */
+    computeMinTableWidth(visibleColumnCount: number, hasCheckboxColumn: boolean): number;
+    /** Compute desired table width respecting overrides. */
+    computeDesiredTableWidth(visibleColumns: {
+        columnId: string;
+        minWidth?: number;
+        width?: number;
+    }[], hasCheckboxColumn: boolean): number;
+    /** Get all column widths (overrides only — non-overridden columns use CSS defaults). */
+    getAllColumnWidths(): Record<string, number>;
+    /** Remove overrides for columns that no longer exist. */
+    cleanupOverrides(validColumnIds: Set<string>): void;
+    /** Apply initial column widths from options. */
+    applyInitialWidths(initialWidths: Record<string, number>): void;
+    onLayoutChange(handler: (event: LayoutChangeEvent) => void): () => void;
+    destroy(): void;
+}
+export {};

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

@@ -0,0 +1,28 @@
+import type { ICellValueChangedEvent } from '@alaarab/ogrid-core';
+interface UndoRedoStateEvents extends Record<string, unknown> {
+    stackChange: {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+}
+export declare class UndoRedoState<T> {
+    private onCellValueChanged;
+    private emitter;
+    private historyStack;
+    private redoStack;
+    private batch;
+    private maxUndoDepth;
+    private wrappedCallback;
+    constructor(onCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined, maxUndoDepth?: number);
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    getWrappedCallback(): ((event: ICellValueChangedEvent<T>) => void) | undefined;
+    beginBatch(): void;
+    endBatch(): void;
+    undo(): void;
+    redo(): void;
+    private emitStackChange;
+    onStackChange(handler: (data: UndoRedoStateEvents['stackChange']) => void): () => void;
+    destroy(): void;
+}
+export {};

package/dist/types/types/columnTypes.d.ts

@@ -0,0 +1,28 @@
+import type { IColumnDef as ICoreColumnDef, CellEditorParams } from '@alaarab/ogrid-core';
+export type { IColumnMeta, ICellValueChangedEvent, CellEditorParams } from '@alaarab/ogrid-core';
+export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IValueParserParams, HeaderCell, HeaderRow, IColumnDefinition, } from '@alaarab/ogrid-core';
+/** Vanilla JS column definition — extends core with DOM rendering capabilities. */
+export interface IColumnDef<T = unknown> extends Omit<ICoreColumnDef<T>, 'cellEditor'> {
+    /** Render cell content by mutating the cell's DOM. Return void. */
+    renderCell?: (cell: HTMLTableCellElement, item: T, value: unknown) => void;
+    /** Static or per-row cell inline styles (Partial<CSSStyleDeclaration>). */
+    cellStyle?: Partial<CSSStyleDeclaration> | ((item: T) => Partial<CSSStyleDeclaration>);
+    /** Built-in editor type or factory function that returns an HTMLElement editor. */
+    cellEditor?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date' | ((params: ICellEditorContext<T>) => HTMLElement);
+}
+/** Context passed to custom cell editor factories. */
+export interface ICellEditorContext<T> {
+    value: unknown;
+    onValueChange: (value: unknown) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+    item: T;
+    column: IColumnDef<T>;
+    cell: HTMLTableCellElement;
+    cellEditorParams?: CellEditorParams;
+}
+/** Column group (uses vanilla JS IColumnDef). */
+export interface IColumnGroupDef<T = unknown> {
+    headerName: string;
+    children: (IColumnGroupDef<T> | IColumnDef<T>)[];
+}

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

@@ -0,0 +1,69 @@
+import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
+import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IOGridApi, } from '@alaarab/ogrid-core';
+/** Extended API for the vanilla JS package (adds methods not in the core IOGridApi). */
+export interface IJsOGridApi<T> extends IOGridApi<T> {
+    /** Export displayed rows to CSV and trigger a download. */
+    exportToCsv: (filename?: string) => void;
+}
+/** Options for the vanilla JS OGrid constructor. */
+export interface OGridOptions<T> {
+    columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
+    getRowId: (item: T) => RowId;
+    /** Client-side data array. Mutually exclusive with dataSource. */
+    data?: T[];
+    /** Server-side data source. Mutually exclusive with data. */
+    dataSource?: IDataSource<T>;
+    /** Initial page (1-based). Default: 1. */
+    page?: number;
+    /** Rows per page. Default: 20. */
+    pageSize?: number;
+    /** Initial sort. */
+    sort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+    /** Initial filters. */
+    filters?: IFilters;
+    /** Initially visible columns (all visible if omitted). */
+    visibleColumns?: Set<string>;
+    editable?: boolean;
+    cellSelection?: boolean;
+    /** Callback fired when a cell value is changed via editing. */
+    onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+    rowSelection?: RowSelectionMode;
+    /** Callback fired when row selection changes. */
+    onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
+    /** Controlled selected row IDs. */
+    selectedRows?: Set<RowId>;
+    /** Pin columns to left/right edges. Keys are columnIds. */
+    pinnedColumns?: Record<string, 'left' | 'right'>;
+    /** Layout mode: 'content' sizes to content, 'fill' fills container. Default: 'fill'. */
+    layoutMode?: 'content' | 'fill';
+    suppressHorizontalScroll?: boolean;
+    /** Custom empty state message. */
+    emptyMessage?: string;
+    /** Accessible label for the grid. */
+    'aria-label'?: string;
+    /** Side bar configuration (columns panel + filters panel). */
+    sideBar?: boolean | ISideBarDef;
+    /** Error callback for server-side data source failures. */
+    onError?: (error: unknown) => void;
+    /** Callback fired when first data is rendered. */
+    onFirstDataRendered?: () => void;
+}
+/** Events emitted by the OGrid instance. */
+export interface OGridEvents<T> extends Record<string, unknown> {
+    cellValueChanged: ICellValueChangedEvent<T>;
+    selectionChange: IRowSelectionChangeEvent<T>;
+    sortChange: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+    filterChange: {
+        filters: IFilters;
+    };
+    pageChange: {
+        page: number;
+    };
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './columnTypes';
+export * from './gridTypes';

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@alaarab/ogrid-js",
+  "version": "2.0.0-beta",
+  "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",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    },
+    "./styles": "./dist/styles/ogrid.css"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "test": "jest"
+  },
+  "keywords": ["ogrid", "datagrid", "vanilla", "javascript", "typescript", "grid"],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": ["dist", "README.md", "LICENSE"],
+  "engines": { "node": ">=18" },
+  "dependencies": {
+    "@alaarab/ogrid-core": "2.0.0-beta"
+  },
+  "publishConfig": { "access": "public" }
+}