@alaarab/ogrid-vue 2.0.6 → 2.0.7

package/dist/esm/composables/index.js

@@ -28,4 +28,6 @@ export { useRichSelectState } from './useRichSelectState';
 export { useSideBarState } from './useSideBarState';
 export { useColumnReorder } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
+export { useColumnPinning } from './useColumnPinning';
+export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
 export { useDataGridTableSetup } from './useDataGridTableSetup';

package/dist/esm/composables/useCellSelection.js

@@ -10,8 +10,9 @@ function rangesEqual(a, b) {
     return a.startRow === b.startRow && a.endRow === b.endRow &&
         a.startCol === b.startCol && a.endCol === b.endCol;
 }
-/** DOM attribute name used for drag-range highlighting (bypasses Vue). */
+/** DOM attribute names used for drag-range highlighting (bypasses Vue). */
 const DRAG_ATTR = 'data-drag-range';
+const DRAG_ANCHOR_ATTR = 'data-drag-anchor';
 /** Auto-scroll config */
 const AUTO_SCROLL_EDGE = 40;
 const AUTO_SCROLL_MIN_SPEED = 2;
@@ -72,6 +73,9 @@ export function useCellSelection(params) {
             liveDragRange = initial;
             setActiveCell({ rowIndex, columnIndex: globalColIndex });
             isDraggingInternal = true;
+            // Apply drag attrs immediately for the initial cell so the anchor styling shows
+            // even before the first mousemove. This ensures instant visual feedback.
+            setTimeout(() => applyDragAttrs(initial), 0);
         }
     };
     const handleSelectAllCells = () => {
@@ -87,6 +91,9 @@ export function useCellSelection(params) {
         setActiveCell({ rowIndex: 0, columnIndex: colOffset });
     };
     // --- Window mouse move/up for drag selection ---
+    /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
+     *  Also sets edge box-shadows for a green border around the selection range,
+     *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
     const applyDragAttrs = (range) => {
         const wrapper = wrapperRef.value;
         if (!wrapper)
@@ -95,6 +102,7 @@ export function useCellSelection(params) {
         const maxR = Math.max(range.startRow, range.endRow);
         const minC = Math.min(range.startCol, range.endCol);
         const maxC = Math.max(range.startCol, range.endCol);
+        const anchor = dragStart;
         const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
         for (let i = 0; i < cells.length; i++) {
             const el = cells[i];
@@ -104,10 +112,35 @@ export function useCellSelection(params) {
             if (inRange) {
                 if (!el.hasAttribute(DRAG_ATTR))
                     el.setAttribute(DRAG_ATTR, '');
+                // Anchor cell gets white background instead of green
+                const isAnchor = anchor && r === anchor.row && c === anchor.col;
+                if (isAnchor) {
+                    if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
+                        el.setAttribute(DRAG_ANCHOR_ATTR, '');
+                }
+                else {
+                    if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                        el.removeAttribute(DRAG_ANCHOR_ATTR);
+                }
+                // Edge borders via inset box-shadow (no layout shift)
+                const shadows = [];
+                if (r === minR)
+                    shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
+                if (r === maxR)
+                    shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
+                if (c === minC)
+                    shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
+                if (c === maxC)
+                    shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
+                el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
             }
             else {
                 if (el.hasAttribute(DRAG_ATTR))
                     el.removeAttribute(DRAG_ATTR);
+                if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                    el.removeAttribute(DRAG_ANCHOR_ATTR);
+                if (el.style.boxShadow)
+                    el.style.boxShadow = '';
             }
         }
     };
@@ -116,8 +149,12 @@ export function useCellSelection(params) {
         if (!wrapper)
             return;
         const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-        for (let i = 0; i < marked.length; i++)
-            marked[i].removeAttribute(DRAG_ATTR);
+        for (let i = 0; i < marked.length; i++) {
+            const el = marked[i];
+            el.removeAttribute(DRAG_ATTR);
+            el.removeAttribute(DRAG_ANCHOR_ATTR);
+            el.style.boxShadow = '';
+        }
     };
     const resolveRange = (cx, cy) => {
         if (!dragStart)

package/dist/esm/composables/useColumnHeaderMenuState.js

@@ -0,0 +1,56 @@
+import { ref, computed } from 'vue';
+/**
+ * Manages state for the column header menu (pin left/right/unpin actions).
+ * Tracks which column's menu is open, anchor element, and action handlers.
+ */
+export function useColumnHeaderMenuState(params) {
+    const { pinnedColumns, onPinColumn, onUnpinColumn } = params;
+    const isOpen = ref(false);
+    const openForColumn = ref(null);
+    const anchorElement = ref(null);
+    const open = (columnId, anchorEl) => {
+        openForColumn.value = columnId;
+        anchorElement.value = anchorEl;
+        isOpen.value = true;
+    };
+    const close = () => {
+        isOpen.value = false;
+        openForColumn.value = null;
+        anchorElement.value = null;
+    };
+    const currentPinState = computed(() => openForColumn.value ? pinnedColumns.value[openForColumn.value] : undefined);
+    const canPinLeft = computed(() => currentPinState.value !== 'left');
+    const canPinRight = computed(() => currentPinState.value !== 'right');
+    const canUnpin = computed(() => !!currentPinState.value);
+    const handlePinLeft = () => {
+        if (openForColumn.value && canPinLeft.value) {
+            onPinColumn(openForColumn.value, 'left');
+            close();
+        }
+    };
+    const handlePinRight = () => {
+        if (openForColumn.value && canPinRight.value) {
+            onPinColumn(openForColumn.value, 'right');
+            close();
+        }
+    };
+    const handleUnpin = () => {
+        if (openForColumn.value && canUnpin.value) {
+            onUnpinColumn(openForColumn.value);
+            close();
+        }
+    };
+    return {
+        isOpen,
+        openForColumn,
+        anchorElement,
+        open,
+        close,
+        handlePinLeft,
+        handlePinRight,
+        handleUnpin,
+        canPinLeft,
+        canPinRight,
+        canUnpin,
+    };
+}

package/dist/esm/composables/useColumnPinning.js

@@ -0,0 +1,64 @@
+import { ref, computed } from 'vue';
+/**
+ * Manages column pinning state (left/right sticky positioning).
+ * Supports controlled and uncontrolled modes.
+ * Initializes from column.pinned definitions and pinnedColumns prop.
+ */
+export function useColumnPinning(params) {
+    const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
+    // Initialize internal state from column.pinned definitions (only on mount)
+    const initialPinnedColumns = {};
+    for (const col of columns.value) {
+        if (col.pinned) {
+            initialPinnedColumns[col.columnId] = col.pinned;
+        }
+    }
+    const internalPinnedColumns = ref(initialPinnedColumns);
+    // Use controlled state if provided, otherwise internal
+    const pinnedColumns = computed(() => controlledPinnedColumns?.value ?? internalPinnedColumns.value);
+    const pinColumn = (columnId, side) => {
+        const next = { ...pinnedColumns.value, [columnId]: side };
+        internalPinnedColumns.value = next;
+        onColumnPinned?.(columnId, side);
+    };
+    const unpinColumn = (columnId) => {
+        const next = { ...pinnedColumns.value };
+        delete next[columnId];
+        internalPinnedColumns.value = next;
+        onColumnPinned?.(columnId, null);
+    };
+    const isPinned = (columnId) => {
+        return pinnedColumns.value[columnId];
+    };
+    const computeLeftOffsets = (visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) => {
+        const offsets = {};
+        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        for (const col of visibleCols) {
+            if (pinnedColumns.value[col.columnId] === 'left') {
+                offsets[col.columnId] = left;
+                left += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    };
+    const computeRightOffsets = (visibleCols, columnWidths, defaultWidth) => {
+        const offsets = {};
+        let right = 0;
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+            const col = visibleCols[i];
+            if (pinnedColumns.value[col.columnId] === 'right') {
+                offsets[col.columnId] = right;
+                right += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    };
+    return {
+        pinnedColumns,
+        pinColumn,
+        unpinColumn,
+        isPinned,
+        computeLeftOffsets,
+        computeRightOffsets,
+    };
+}

package/dist/esm/composables/useDataGridState.js

@@ -10,6 +10,8 @@ import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useFillHandle } from './useFillHandle';
 import { useUndoRedo } from './useUndoRedo';
 import { useTableLayout } from './useTableLayout';
+import { useColumnPinning } from './useColumnPinning';
+import { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
 // Stable no-op handlers
 const NOOP = () => { };
 const NOOP_ASYNC = async () => { };
@@ -39,6 +41,7 @@ export function useDataGridState(params) {
     const initialColumnWidths = computed(() => props.value.initialColumnWidths);
     const onColumnResizedProp = computed(() => props.value.onColumnResized);
     const pinnedColumnsProp = computed(() => props.value.pinnedColumns);
+    const onColumnPinnedProp = computed(() => props.value.onColumnPinned);
     const onCellErrorProp = computed(() => props.value.onCellError);
     // Undo/redo wrapping
     const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp.value });
@@ -166,6 +169,17 @@ export function useDataGridState(params) {
         initialColumnWidths: initialColumnWidths.value,
         onColumnResized: onColumnResizedProp.value,
     });
+    // --- Column pinning ---
+    const pinningResult = useColumnPinning({
+        columns: flatColumns,
+        pinnedColumns: pinnedColumnsProp,
+        onColumnPinned: onColumnPinnedProp.value,
+    });
+    const headerMenuResult = useColumnHeaderMenuState({
+        pinnedColumns: pinningResult.pinnedColumns,
+        onPinColumn: pinningResult.pinColumn,
+        onUnpinColumn: pinningResult.unpinColumn,
+    });
     const aggregation = computed(() => computeAggregations(items.value, visibleCols.value, cellSelection.value ? selectionRange.value : null));
     const statusBarConfig = computed(() => {
         const base = getDataGridStatusBarConfig(statusBarProp.value, items.value.length, rowSelectionResult.selectedRowIds.value.size);
@@ -305,6 +319,27 @@ export function useDataGridState(params) {
         showEmptyInGrid: showEmptyInGrid.value,
         onCellError: onCellErrorProp.value,
     }));
+    const pinningState = computed(() => ({
+        pinnedColumns: pinningResult.pinnedColumns.value,
+        pinColumn: pinningResult.pinColumn,
+        unpinColumn: pinningResult.unpinColumn,
+        isPinned: pinningResult.isPinned,
+        computeLeftOffsets: pinningResult.computeLeftOffsets,
+        computeRightOffsets: pinningResult.computeRightOffsets,
+        headerMenu: {
+            isOpen: headerMenuResult.isOpen.value,
+            openForColumn: headerMenuResult.openForColumn.value,
+            anchorElement: headerMenuResult.anchorElement.value,
+            open: headerMenuResult.open,
+            close: headerMenuResult.close,
+            handlePinLeft: headerMenuResult.handlePinLeft,
+            handlePinRight: headerMenuResult.handlePinRight,
+            handleUnpin: headerMenuResult.handleUnpin,
+            canPinLeft: headerMenuResult.canPinLeft.value,
+            canPinRight: headerMenuResult.canPinRight.value,
+            canUnpin: headerMenuResult.canUnpin.value,
+        },
+    }));
     return {
         layout: layoutState,
         rowSelection: rowSelectionState,
@@ -312,5 +347,6 @@ export function useDataGridState(params) {
         interaction: interactionState,
         contextMenu: contextMenuState,
         viewModels: viewModelsState,
+        pinning: pinningState,
     };
 }

package/dist/esm/composables/useOGrid.js

@@ -252,7 +252,7 @@ export function useOGrid(props) {
     };
     const handleColumnPinned = (columnId, pinned) => {
         if (pinned === null) {
-            const { [columnId]: _, ...rest } = pinnedOverrides.value;
+            const { [columnId]: _removed, ...rest } = pinnedOverrides.value;
             pinnedOverrides.value = rest;
         }
         else {

package/dist/esm/index.js

@@ -2,6 +2,6 @@
 export * from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Composables
-export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useDataGridTableSetup, } from './composables';
+export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from './composables';
 // View model utilities (for UI packages)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';

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

@@ -1,7 +1,7 @@
 export { useOGrid } from './useOGrid';
 export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, } from './useOGrid';
 export { useDataGridState } from './useDataGridState';
-export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, } from './useDataGridState';
+export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, } from './useDataGridState';
 export { useActiveCell } from './useActiveCell';
 export type { UseActiveCellResult } from './useActiveCell';
 export { useCellEditing } from './useCellEditing';
@@ -51,5 +51,9 @@ export { useColumnReorder } from './useColumnReorder';
 export type { UseColumnReorderParams, UseColumnReorderResult } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
 export type { UseVirtualScrollParams, UseVirtualScrollResult } from './useVirtualScroll';
+export { useColumnPinning } from './useColumnPinning';
+export type { UseColumnPinningParams, UseColumnPinningResult } from './useColumnPinning';
+export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
+export type { UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult } from './useColumnHeaderMenuState';
 export { useDataGridTableSetup } from './useDataGridTableSetup';
 export type { UseDataGridTableSetupParams, UseDataGridTableSetupResult } from './useDataGridTableSetup';

package/dist/types/composables/useColumnHeaderMenuState.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'vue';
+export interface UseColumnHeaderMenuStateParams {
+    pinnedColumns: Ref<Record<string, 'left' | 'right'>>;
+    onPinColumn: (columnId: string, side: 'left' | 'right') => void;
+    onUnpinColumn: (columnId: string) => void;
+}
+export interface UseColumnHeaderMenuStateResult {
+    isOpen: Ref<boolean>;
+    openForColumn: Ref<string | null>;
+    anchorElement: Ref<HTMLElement | null>;
+    open: (columnId: string, anchorEl: HTMLElement) => void;
+    close: () => void;
+    handlePinLeft: () => void;
+    handlePinRight: () => void;
+    handleUnpin: () => void;
+    canPinLeft: Ref<boolean>;
+    canPinRight: Ref<boolean>;
+    canUnpin: Ref<boolean>;
+}
+/**
+ * Manages state for the column header menu (pin left/right/unpin actions).
+ * Tracks which column's menu is open, anchor element, and action handlers.
+ */
+export declare function useColumnHeaderMenuState(params: UseColumnHeaderMenuStateParams): UseColumnHeaderMenuStateResult;

package/dist/types/composables/useColumnPinning.d.ts

@@ -0,0 +1,33 @@
+import { type Ref } from 'vue';
+import type { IColumnDef } from '../types';
+export interface UseColumnPinningParams<T = unknown> {
+    columns: Ref<IColumnDef<T>[]>;
+    /** Controlled pinned columns state. If provided, component is controlled. */
+    pinnedColumns?: Ref<Record<string, 'left' | 'right'> | undefined>;
+    /** Called when user pins/unpins a column via UI. */
+    onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
+}
+export interface UseColumnPinningResult {
+    /** Current pinned columns (controlled or internal). */
+    pinnedColumns: Ref<Record<string, 'left' | 'right'>>;
+    /** Pin a column to left or right. */
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    /** Unpin a column. */
+    unpinColumn: (columnId: string) => void;
+    /** Check if a column is pinned and which side. */
+    isPinned: (columnId: string) => 'left' | 'right' | undefined;
+    /** Compute sticky left offsets for pinned columns. */
+    computeLeftOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
+    /** Compute sticky right offsets for pinned columns. */
+    computeRightOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+}
+/**
+ * Manages column pinning state (left/right sticky positioning).
+ * Supports controlled and uncontrolled modes.
+ * Initializes from column.pinned definitions and pinnedColumns prop.
+ */
+export declare function useColumnPinning<T = unknown>(params: UseColumnPinningParams<T>): UseColumnPinningResult;

package/dist/types/composables/useDataGridState.d.ts

@@ -115,6 +115,32 @@ export interface DataGridViewModelState<T> {
     showEmptyInGrid: boolean;
     onCellError?: (error: Error, info: unknown) => void;
 }
+/** Column pinning state and column header menu. */
+export interface DataGridPinningState {
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    unpinColumn: (columnId: string) => void;
+    isPinned: (columnId: string) => 'left' | 'right' | undefined;
+    computeLeftOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
+    computeRightOffsets: (visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+    headerMenu: {
+        isOpen: boolean;
+        openForColumn: string | null;
+        anchorElement: HTMLElement | null;
+        open: (columnId: string, anchorEl: HTMLElement) => void;
+        close: () => void;
+        handlePinLeft: () => void;
+        handlePinRight: () => void;
+        handleUnpin: () => void;
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+}
 export interface UseDataGridStateResult<T> {
     layout: Ref<DataGridLayoutState<T>>;
     rowSelection: Ref<DataGridRowSelectionState>;
@@ -122,6 +148,7 @@ export interface UseDataGridStateResult<T> {
     interaction: Ref<DataGridCellInteractionState>;
     contextMenu: Ref<DataGridContextMenuState>;
     viewModels: Ref<DataGridViewModelState<T>>;
+    pinning: Ref<DataGridPinningState>;
 }
 /**
  * Single orchestration composable for DataGridTable. Takes grid props and wrapper ref,

package/dist/types/index.d.ts

@@ -2,8 +2,8 @@ export * from '@alaarab/ogrid-core';
 export type { IColumnDef, ICellEditorProps, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, } from './types';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useDataGridTableSetup, } from './composables';
-export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseDataGridTableSetupParams, UseDataGridTableSetupResult, } from './composables';
+export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from './composables';
+export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseActiveCellResult, EditingCell, UseCellEditingParams, UseCellEditingResult, UseCellSelectionParams, UseCellSelectionResult, UseClipboardParams, UseClipboardResult, UseRowSelectionParams, UseRowSelectionResult, UseKeyboardNavigationParams, UseKeyboardNavigationResult, UseFillHandleParams, UseFillHandleResult, UseUndoRedoParams, UseUndoRedoResult, ContextMenuPosition, UseContextMenuResult, UseColumnResizeParams, UseColumnResizeResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UseFilterOptionsResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, InlineCellEditorType, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, DebouncedFn, UseColumnPinningParams, UseColumnPinningResult, UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, UseDataGridTableSetupParams, UseDataGridTableSetupResult, } from './composables';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from './utils';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';

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

@@ -73,8 +73,12 @@ interface IOGridBaseProps<T> {
     onError?: (error: unknown) => void;
     /** Called when a cell renderer or custom editor throws an error. */
     onCellError?: (error: Error, info: unknown) => void;
+    /** Enable column reordering via drag-and-drop on header cells. Default: false. */
+    columnReorder?: boolean;
     /** Virtual scrolling configuration. Set `enabled: true` with a fixed `rowHeight` to virtualize large datasets. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
+    density?: 'compact' | 'normal' | 'comfortable';
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -151,8 +155,12 @@ export interface IOGridDataGridProps<T> {
     };
     /** Called when a cell renderer or custom editor throws an error. */
     onCellError?: (error: Error, info: unknown) => void;
+    /** Enable column reordering via drag-and-drop on header cells. Default: false. */
+    columnReorder?: boolean;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
+    density?: 'compact' | 'normal' | 'comfortable';
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.6"
+    "@alaarab/ogrid-core": "2.0.7"
   },
   "peerDependencies": {
     "vue": "^3.3.0"