@alaarab/ogrid-vue-vuetify 2.0.6 → 2.0.8

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -5,7 +5,6 @@ import { TextFilterPopover } from './TextFilterPopover';
 import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
 import { PeopleFilterPopover } from './PeopleFilterPopover';
 // Vuetify component types don't align with h() overloads; cast to Component
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const _VBtn = VBtn;
 const _VIcon = VIcon;
 const _VMenu = VMenu;

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -1,12 +1,10 @@
 import { defineComponent, h } from 'vue';
 import { VBtn, VTextField, VCheckbox, VProgressCircular, VDivider } from 'vuetify/components';
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const _VBtn = VBtn;
 const _VTextField = VTextField;
 const _VCheckbox = VCheckbox;
 const _VProgressCircular = VProgressCircular;
 const _VDivider = VDivider;
-/* eslint-enable @typescript-eslint/no-explicit-any */
 export const MultiSelectFilterPopover = defineComponent({
     name: 'MultiSelectFilterPopover',
     props: {

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -1,6 +1,5 @@
 import { defineComponent, h } from 'vue';
 import { VBtn, VTextField, VProgressCircular, VAvatar, VIcon, VDivider } from 'vuetify/components';
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const _VBtn = VBtn;
 const _VTextField = VTextField;
 const _VProgressCircular = VProgressCircular;

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -1,9 +1,7 @@
 import { defineComponent, h } from 'vue';
 import { VBtn, VTextField } from 'vuetify/components';
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const _VBtn = VBtn;
 const _VTextField = VTextField;
-/* eslint-enable @typescript-eslint/no-explicit-any */
 export const TextFilterPopover = defineComponent({
     name: 'TextFilterPopover',
     props: {

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -0,0 +1,55 @@
+import { defineComponent, h } from 'vue';
+import { VMenu, VList, VListItem } from 'vuetify/components';
+import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-vue';
+export const ColumnHeaderMenu = defineComponent({
+    name: 'ColumnHeaderMenu',
+    props: {
+        isOpen: { type: Boolean, required: true },
+        anchorElement: { type: Object, default: null },
+        onClose: { type: Function, required: true },
+        onPinLeft: { type: Function, required: true },
+        onPinRight: { type: Function, required: true },
+        onUnpin: { type: Function, required: true },
+        canPinLeft: { type: Boolean, required: true },
+        canPinRight: { type: Boolean, required: true },
+        canUnpin: { type: Boolean, required: true },
+    },
+    setup(props) {
+        const handleOpenChange = (open) => {
+            if (!open) {
+                props.onClose();
+            }
+        };
+        const items = COLUMN_HEADER_MENU_ITEMS;
+        const getDisabled = (index) => {
+            if (index === 0)
+                return !props.canPinLeft;
+            if (index === 1)
+                return !props.canPinRight;
+            if (index === 2)
+                return !props.canUnpin;
+            return false;
+        };
+        const getHandler = (index) => {
+            if (index === 0)
+                return props.onPinLeft;
+            if (index === 1)
+                return props.onPinRight;
+            if (index === 2)
+                return props.onUnpin;
+            return () => { };
+        };
+        return () => h(VMenu, {
+            modelValue: props.isOpen,
+            'onUpdate:modelValue': handleOpenChange,
+            activator: props.anchorElement || undefined,
+            location: 'bottom start',
+        }, {
+            default: () => h(VList, { density: 'compact', 'aria-label': 'Column options' }, () => items.map((item, index) => h(VListItem, {
+                key: item.id,
+                disabled: getDisabled(index),
+                onClick: () => { getHandler(index)(); },
+            }, () => item.label))),
+        });
+    },
+});

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,9 +1,9 @@
 import { defineComponent, computed, h, Teleport } from 'vue';
 import { VCheckbox, VProgressCircular, VBtn } from 'vuetify/components';
-import { useDataGridTableSetup, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, buildHeaderRows, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-vue';
+import { useDataGridTableSetup, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, buildHeaderRows, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, StatusBar, } from '@alaarab/ogrid-vue';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { ColumnHeaderMenu } from '../ColumnHeaderMenu/ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
-import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
 const NOOP = () => { };
 export const DataGridTable = defineComponent({
@@ -14,7 +14,7 @@ export const DataGridTable = defineComponent({
     },
     setup(props) {
         const propsRef = computed(() => props.gridProps);
-        const { wrapperRef, tableContainerRef, tableRef, lastMouseShift, state, columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown }, virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight, scrollToRow }, virtualScrollEnabled, columnResize: { handleResizeStart, getColumnWidth }, } = useDataGridTableSetup({ props: propsRef });
+        const { wrapperRef, tableContainerRef, tableRef, lastMouseShift, state, columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown }, virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight: _totalHeight, scrollToRow: _scrollToRow }, virtualScrollEnabled, columnResize: { handleResizeStart, getColumnWidth }, } = useDataGridTableSetup({ props: propsRef });
         return () => {
             /**
              * Vue Performance: Fine-grained reactivity vs React memoization
@@ -40,15 +40,17 @@ export const DataGridTable = defineComponent({
             const interaction = state.interaction.value;
             const ctxMenu = state.contextMenu.value;
             const viewModels = state.viewModels.value;
-            const { visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, } = layout;
+            const pinning = state.pinning.value;
+            const { headerMenu } = pinning;
+            const { visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset: _colOffset, containerWidth, minTableWidth, desiredTableWidth, } = layout;
             const currentPage = props.gridProps.currentPage ?? 1;
             const pageSize = props.gridProps.pageSize ?? 25;
             const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * pageSize : 0;
             const { selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
-            const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
-            const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, } = interaction;
+            const { editingCell: _editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+            const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange: _cutRange, copyRange: _copyRange, canUndo, canRedo, onUndo, onRedo, isDragging: _isDragging, } = interaction;
             const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
-            const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
+            const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError: _onCellError } = viewModels;
             const items = p.items;
             const getRowId = p.getRowId;
             const layoutMode = p.layoutMode ?? 'fill';
@@ -77,7 +79,7 @@ export const DataGridTable = defineComponent({
             // Render a cell's content
             const renderCellContent = (item, col, rowIndex, colIdx) => {
                 const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
-                const rowId = getRowId(item);
+                const _rowId = getRowId(item);
                 if (descriptor.mode === 'editing-inline') {
                     const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
                     return h(InlineCellEditor, {
@@ -112,7 +114,7 @@ export const DataGridTable = defineComponent({
                 const cellStyle = resolveCellStyle(col, item);
                 const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
                 // Compute cell CSS classes based on state
-                const cellClasses = ['ogrid-cell'];
+                const _cellClasses = ['ogrid-cell'];
                 const cellInlineStyle = {
                     width: '100%',
                     height: '100%',
@@ -361,7 +363,27 @@ export const DataGridTable = defineComponent({
                                                 },
                                                 onMousedown: (e) => handleReorderMouseDown(col.columnId, e),
                                             }, [
-                                                h(ColumnHeaderFilter, getHeaderFilterConfig(col, headerFilterInput)),
+                                                h('div', { style: { display: 'flex', alignItems: 'center', width: '100%' } }, [
+                                                    h(ColumnHeaderFilter, getHeaderFilterConfig(col, headerFilterInput)),
+                                                    h('button', {
+                                                        onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            headerMenu.open(col.columnId, e.currentTarget);
+                                                        },
+                                                        'aria-label': 'Column options',
+                                                        title: 'Column options',
+                                                        style: {
+                                                            background: 'none',
+                                                            border: 'none',
+                                                            cursor: 'pointer',
+                                                            padding: '2px 4px',
+                                                            fontSize: '14px',
+                                                            color: 'rgba(0,0,0,0.5)',
+                                                            lineHeight: '1',
+                                                            flexShrink: '0',
+                                                        },
+                                                    }, '\u22EE'),
+                                                ]),
                                                 h('div', {
                                                     onMousedown: (e) => { e.stopPropagation(); handleResizeStart(e, col); },
                                                     style: {
@@ -509,6 +531,18 @@ export const DataGridTable = defineComponent({
                         onClose: closeContextMenu,
                     })),
                 ] : []),
+                // Column header menu
+                h(ColumnHeaderMenu, {
+                    isOpen: headerMenu.isOpen,
+                    anchorElement: headerMenu.anchorElement,
+                    onClose: headerMenu.close,
+                    onPinLeft: headerMenu.handlePinLeft,
+                    onPinRight: headerMenu.handlePinRight,
+                    onUnpin: headerMenu.handleUnpin,
+                    canPinLeft: headerMenu.canPinLeft,
+                    canPinRight: headerMenu.canPinRight,
+                    canUnpin: headerMenu.canUnpin,
+                }),
                 // Status bar
                 ...(statusBarConfig ? [
                     h(StatusBar, {

package/dist/esm/OGrid/OGrid.js

@@ -3,6 +3,225 @@ import { useOGrid, } from '@alaarab/ogrid-vue';
 import { DataGridTable } from '../DataGridTable/DataGridTable';
 import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
+// --- SideBar constants and styles ---
+const PANEL_WIDTH = 240;
+const TAB_WIDTH = 36;
+const PANEL_LABELS = {
+    columns: 'Columns',
+    filters: 'Filters',
+};
+const PANEL_ICONS = {
+    columns: '\u2261', // hamburger icon
+    filters: '\u2A65', // filter icon
+};
+/** Render the SideBar inline (tab strip + panel content). */
+function renderSideBar(sb) {
+    const isOpen = sb.activePanel !== null;
+    const position = sb.position ?? 'right';
+    const tabStripStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        width: `${TAB_WIDTH}px`,
+        background: 'var(--ogrid-header-bg, #f5f5f5)',
+        ...(position === 'right'
+            ? { borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' }
+            : { borderRight: '1px solid var(--ogrid-border, #e0e0e0)' }),
+    };
+    const tabStrip = h('div', { style: tabStripStyle, role: 'tablist', 'aria-label': 'Side bar tabs' }, sb.panels.map((panel) => h('button', {
+        key: panel,
+        role: 'tab',
+        'aria-selected': sb.activePanel === panel,
+        'aria-label': PANEL_LABELS[panel],
+        title: PANEL_LABELS[panel],
+        onClick: () => sb.onPanelChange(sb.activePanel === panel ? null : panel),
+        style: {
+            width: `${TAB_WIDTH}px`,
+            height: `${TAB_WIDTH}px`,
+            border: 'none',
+            cursor: 'pointer',
+            color: 'var(--ogrid-fg, #242424)',
+            fontSize: '14px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: sb.activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent',
+            fontWeight: sb.activePanel === panel ? 'bold' : 'normal',
+        },
+    }, PANEL_ICONS[panel])));
+    let panelContent = null;
+    if (isOpen && sb.activePanel) {
+        const panelContainerStyle = {
+            width: `${PANEL_WIDTH}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            background: 'var(--ogrid-bg, #fff)',
+            color: 'var(--ogrid-fg, #242424)',
+            ...(position === 'right'
+                ? { borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' }
+                : { borderRight: '1px solid var(--ogrid-border, #e0e0e0)' }),
+        };
+        const panelBodyChildren = [];
+        if (sb.activePanel === 'columns') {
+            const allVisible = sb.columns.every((c) => sb.visibleColumns.has(c.columnId));
+            // Select All / Clear All buttons
+            panelBodyChildren.push(h('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px' } }, [
+                h('button', {
+                    disabled: allVisible,
+                    onClick: () => {
+                        const next = new Set(sb.visibleColumns);
+                        sb.columns.forEach((c) => next.add(c.columnId));
+                        sb.onSetVisibleColumns(next);
+                    },
+                    style: { flex: '1', cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px', padding: '4px 8px' },
+                }, 'Select All'),
+                h('button', {
+                    onClick: () => {
+                        const next = new Set();
+                        sb.columns.forEach((c) => {
+                            if (c.required && sb.visibleColumns.has(c.columnId))
+                                next.add(c.columnId);
+                        });
+                        sb.onSetVisibleColumns(next);
+                    },
+                    style: { flex: '1', cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px', padding: '4px 8px' },
+                }, 'Clear All'),
+            ]));
+            // Column checkboxes
+            sb.columns.forEach((col) => {
+                panelBodyChildren.push(h('label', { key: col.columnId, style: { display: 'flex', alignItems: 'center', gap: '6px', padding: '2px 0', cursor: 'pointer' } }, [
+                    h('input', {
+                        type: 'checkbox',
+                        checked: sb.visibleColumns.has(col.columnId),
+                        disabled: col.required,
+                        onChange: (e) => sb.onVisibilityChange(col.columnId, e.target.checked),
+                    }),
+                    h('span', null, col.name),
+                ]));
+            });
+        }
+        if (sb.activePanel === 'filters') {
+            if (sb.filterableColumns.length === 0) {
+                panelBodyChildren.push(h('div', { style: { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' } }, 'No filterable columns'));
+            }
+            else {
+                sb.filterableColumns.forEach((col) => {
+                    const filterKey = col.filterField;
+                    const groupChildren = [
+                        h('div', { style: { fontWeight: '500', marginBottom: '4px', fontSize: '13px' } }, col.name),
+                    ];
+                    if (col.filterType === 'text') {
+                        const currentVal = sb.filters[filterKey]?.type === 'text' ? sb.filters[filterKey].value : '';
+                        groupChildren.push(h('input', {
+                            type: 'text',
+                            value: currentVal,
+                            onInput: (e) => {
+                                const val = e.target.value;
+                                sb.onFilterChange(filterKey, val ? { type: 'text', value: val } : undefined);
+                            },
+                            placeholder: `Filter ${col.name}...`,
+                            'aria-label': `Filter ${col.name}`,
+                            style: { width: '100%', boxSizing: 'border-box', padding: '4px 6px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
+                        }));
+                    }
+                    if (col.filterType === 'multiSelect') {
+                        const options = sb.filterOptions[filterKey] ?? [];
+                        const msChildren = options.map((opt) => {
+                            const selected = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value.includes(opt) : false;
+                            return h('label', { key: opt, style: { display: 'flex', alignItems: 'center', gap: '4px', padding: '1px 0', cursor: 'pointer', fontSize: '13px' } }, [
+                                h('input', {
+                                    type: 'checkbox',
+                                    checked: selected,
+                                    onChange: (e) => {
+                                        const current = sb.filters[filterKey]?.type === 'multiSelect' ? sb.filters[filterKey].value : [];
+                                        const next = e.target.checked
+                                            ? [...current, opt]
+                                            : current.filter((v) => v !== opt);
+                                        sb.onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
+                                    },
+                                }),
+                                h('span', null, opt),
+                            ]);
+                        });
+                        groupChildren.push(h('div', { style: { maxHeight: '120px', overflowY: 'auto' }, role: 'group', 'aria-label': `${col.name} options` }, msChildren));
+                    }
+                    if (col.filterType === 'date') {
+                        const existingValue = sb.filters[filterKey]?.type === 'date' ? sb.filters[filterKey].value : { from: undefined, to: undefined };
+                        groupChildren.push(h('div', { style: { display: 'flex', flexDirection: 'column', gap: '4px' } }, [
+                            h('label', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } }, [
+                                'From:',
+                                h('input', {
+                                    type: 'date',
+                                    value: existingValue.from ?? '',
+                                    onInput: (e) => {
+                                        const from = e.target.value || undefined;
+                                        const to = existingValue.to;
+                                        sb.onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
+                                    },
+                                    'aria-label': `${col.name} from date`,
+                                    style: { flex: '1', padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
+                                }),
+                            ]),
+                            h('label', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } }, [
+                                'To:',
+                                h('input', {
+                                    type: 'date',
+                                    value: existingValue.to ?? '',
+                                    onInput: (e) => {
+                                        const to = e.target.value || undefined;
+                                        const from = existingValue.from;
+                                        sb.onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
+                                    },
+                                    'aria-label': `${col.name} to date`,
+                                    style: { flex: '1', padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: '4px' },
+                                }),
+                            ]),
+                        ]));
+                    }
+                    panelBodyChildren.push(h('div', { key: col.columnId, style: { marginBottom: '12px' } }, groupChildren));
+                });
+            }
+        }
+        panelContent = h('div', { role: 'tabpanel', 'aria-label': PANEL_LABELS[sb.activePanel], style: panelContainerStyle }, [
+            // Panel header
+            h('div', {
+                style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '8px 12px',
+                    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+                    fontWeight: '600',
+                },
+            }, [
+                h('span', null, PANEL_LABELS[sb.activePanel]),
+                h('button', {
+                    onClick: () => sb.onPanelChange(null),
+                    style: { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: '16px', color: 'var(--ogrid-fg, #242424)' },
+                    'aria-label': 'Close panel',
+                }, '\u00D7'),
+            ]),
+            // Panel body
+            h('div', { style: { flex: '1', overflowY: 'auto', padding: '8px 12px' } }, panelBodyChildren),
+        ]);
+    }
+    const children = [];
+    if (position === 'left') {
+        children.push(tabStrip);
+        if (panelContent)
+            children.push(panelContent);
+    }
+    else {
+        if (panelContent)
+            children.push(panelContent);
+        children.push(tabStrip);
+    }
+    return h('div', {
+        style: { display: 'flex', flexDirection: 'row', flexShrink: '0' },
+        role: 'complementary',
+        'aria-label': 'Side bar',
+    }, children);
+}
 export const OGrid = defineComponent({
     name: 'OGrid',
     props: {
@@ -15,6 +234,8 @@ export const OGrid = defineComponent({
         expose({ api: api.value });
         return () => {
             const sideBar = layout.value.sideBarProps;
+            const hasSideBar = sideBar != null;
+            const sideBarPosition = sideBar?.position ?? 'right';
             // Toolbar
             const toolbarChildren = [];
             if (layout.value.toolbar) {
@@ -41,6 +262,23 @@ export const OGrid = defineComponent({
                 pageSizeOptions: pagination.value.pageSizeOptions,
                 entityLabelPlural: pagination.value.entityLabelPlural,
             });
+            // Grid content area
+            const gridChild = h('div', {
+                style: { flex: '1', minWidth: '0', minHeight: '0', display: 'flex', flexDirection: 'column' },
+            }, [
+                h(DataGridTable, {
+                    gridProps: dataGridProps.value,
+                }),
+            ]);
+            // Main content area (sidebar + grid)
+            const mainAreaChildren = [];
+            if (hasSideBar && sideBarPosition === 'left') {
+                mainAreaChildren.push(renderSideBar(sideBar));
+            }
+            mainAreaChildren.push(gridChild);
+            if (hasSideBar && sideBarPosition !== 'left') {
+                mainAreaChildren.push(renderSideBar(sideBar));
+            }
             return h('div', {
                 class: layout.value.className,
                 style: {
@@ -74,12 +312,7 @@ export const OGrid = defineComponent({
                     }, [layout.value.toolbarBelow]),
                 ] : []),
                 // Main content area (sidebar + grid)
-                h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, [
-                    // DataGridTable
-                    h(DataGridTable, {
-                        gridProps: dataGridProps.value,
-                    }),
-                ]),
+                h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, mainAreaChildren),
                 // Footer strip (pagination)
                 h('div', {
                     style: {

package/dist/esm/index.js

@@ -6,3 +6,8 @@ export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { PaginationControls } from './PaginationControls/PaginationControls';
+export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
+// Re-export shared components from base
+export { StatusBar, MarchingAntsOverlay } from '@alaarab/ogrid-vue';
+export { GridContextMenu } from './DataGridTable/GridContextMenu';
+export { InlineCellEditor } from './DataGridTable/InlineCellEditor';

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

@@ -0,0 +1,91 @@
+import { type PropType } from 'vue';
+export interface ColumnHeaderMenuProps {
+    isOpen: boolean;
+    anchorElement: HTMLElement | null;
+    onClose: () => void;
+    onPinLeft: () => void;
+    onPinRight: () => void;
+    onUnpin: () => void;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+}
+export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    anchorElement: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    onClose: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onPinLeft: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onPinRight: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onUnpin: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    canPinLeft: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canPinRight: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canUnpin: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    anchorElement: {
+        type: PropType<HTMLElement | null>;
+        default: null;
+    };
+    onClose: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onPinLeft: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onPinRight: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onUnpin: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    canPinLeft: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canPinRight: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    canUnpin: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    anchorElement: HTMLElement | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/OGrid/OGrid.d.ts

@@ -1,11 +1,11 @@
-import { type PropType } from 'vue';
+import { type PropType, type VNode } from 'vue';
 import { type IOGridProps } from '@alaarab/ogrid-vue';
 export declare const OGrid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     gridProps: {
         type: PropType<IOGridProps<unknown>>;
         required: true;
     };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     gridProps: {

package/dist/types/index.d.ts

@@ -7,3 +7,8 @@ export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export type { IColumnChooserProps } from './ColumnChooser/ColumnChooser';
 export { PaginationControls } from './PaginationControls/PaginationControls';
 export type { IPaginationControlsProps } from './PaginationControls/PaginationControls';
+export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
+export type { ColumnHeaderMenuProps } from './ColumnHeaderMenu/ColumnHeaderMenu';
+export { StatusBar, MarchingAntsOverlay } from '@alaarab/ogrid-vue';
+export { GridContextMenu } from './DataGridTable/GridContextMenu';
+export { InlineCellEditor } from './DataGridTable/InlineCellEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "OGrid Vuetify – Vuetify-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -14,28 +14,47 @@
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json",
-    "test": "jest --passWithNoTests"
+    "test": "jest --passWithNoTests",
+    "storybook": "storybook dev -p 6011 --no-open",
+    "build-storybook": "storybook build"
   },
-  "keywords": ["ogrid", "vue", "vuetify", "datatable", "typescript", "grid"],
+  "keywords": [
+    "ogrid",
+    "vue",
+    "vuetify",
+    "datatable",
+    "typescript",
+    "grid"
+  ],
   "author": "Ala Arab",
   "license": "MIT",
-  "files": ["dist", "README.md", "LICENSE"],
-  "engines": { "node": ">=18" },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.0.6"
+    "@alaarab/ogrid-vue": "2.0.7"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
     "vuetify": "^3.0.0"
   },
   "devDependencies": {
-    "vue": "^3.5.28",
-    "vuetify": "^3.11.8",
+    "@storybook/vue3-vite": "^10.2.8",
     "@vitejs/plugin-vue": "^6.0.4",
+    "storybook": "^10.2.8",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "typescript": "^5.9.3"
+    "vue": "^3.5.28",
+    "vuetify": "^3.11.8"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/esm/DataGridTable/StatusBar.js

@@ -1,45 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { getStatusBarParts } from '@alaarab/ogrid-vue';
-export const StatusBar = defineComponent({
-    name: 'StatusBar',
-    props: {
-        totalCount: { type: Number, required: true },
-        filteredCount: { type: Number, default: undefined },
-        selectedCount: { type: Number, default: undefined },
-        selectedCellCount: { type: Number, default: undefined },
-        aggregation: { type: Object, default: undefined },
-        suppressRowCount: { type: Boolean, default: false },
-    },
-    setup(props) {
-        return () => {
-            const parts = getStatusBarParts(props);
-            return h('div', {
-                role: 'status',
-                'aria-live': 'polite',
-                style: {
-                    marginTop: 'auto',
-                    padding: '6px 12px',
-                    borderTop: '1px solid rgba(0,0,0,0.12)',
-                    backgroundColor: 'rgba(0,0,0,0.04)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '16px',
-                    fontSize: '0.875rem',
-                },
-            }, parts.map((p, i) => h('span', {
-                key: p.key,
-                style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    ...(i < parts.length - 1
-                        ? { marginRight: '16px', borderRight: '1px solid rgba(0,0,0,0.12)', paddingRight: '16px' }
-                        : {}),
-                },
-            }, [
-                h('span', { style: { color: 'rgba(0,0,0,0.6)' } }, p.label),
-                h('span', { style: { fontWeight: '600' } }, p.value.toLocaleString()),
-            ])));
-        };
-    },
-});

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

@@ -1,80 +0,0 @@
-import { type PropType } from 'vue';
-export interface StatusBarProps {
-    totalCount: number;
-    filteredCount?: number;
-    selectedCount?: number;
-    selectedCellCount?: number;
-    aggregation?: {
-        sum: number;
-        avg: number;
-        min: number;
-        max: number;
-        count: number;
-    } | null;
-    suppressRowCount?: boolean;
-}
-export declare const StatusBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    totalCount: {
-        type: NumberConstructor;
-        required: true;
-    };
-    filteredCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    selectedCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    selectedCellCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    aggregation: {
-        type: PropType<StatusBarProps["aggregation"]>;
-        default: undefined;
-    };
-    suppressRowCount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    totalCount: {
-        type: NumberConstructor;
-        required: true;
-    };
-    filteredCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    selectedCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    selectedCellCount: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    aggregation: {
-        type: PropType<StatusBarProps["aggregation"]>;
-        default: undefined;
-    };
-    suppressRowCount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    aggregation: {
-        sum: number;
-        avg: number;
-        min: number;
-        max: number;
-        count: number;
-    } | null | undefined;
-    filteredCount: number;
-    selectedCount: number;
-    selectedCellCount: number;
-    suppressRowCount: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;