@alaarab/ogrid-vue 2.0.18 → 2.0.21

package/dist/esm/components/createDataGridTable.js

@@ -216,6 +216,9 @@ export function createDataGridTable(ui) {
                     backgroundColor: '#fff',
                     willChange: 'scroll-position',
                 };
+                if (p.rowHeight) {
+                    wrapperStyle['--ogrid-row-height'] = `${p.rowHeight}px`;
+                }
                 return h('div', { class: 'ogrid-outer-container' }, [
                     // Scrollable wrapper
                     h('div', {

package/dist/esm/components/createInlineCellEditor.js

@@ -0,0 +1,194 @@
+import { defineComponent, ref, h, onMounted, nextTick, watch } from 'vue';
+const editorWrapperStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 2px',
+    boxSizing: 'border-box',
+};
+export function createInlineCellEditor(options) {
+    const { renderCheckbox, renderDatePicker } = options;
+    return defineComponent({
+        name: 'InlineCellEditor',
+        props: {
+            value: { default: undefined },
+            item: { type: Object, required: true },
+            column: { type: Object, required: true },
+            rowIndex: { type: Number, required: true },
+            editorType: { type: String, required: true },
+            onCommit: { type: Function, required: true },
+            onCancel: { type: Function, required: true },
+        },
+        setup(props) {
+            const inputRef = ref(null);
+            const selectWrapperRef = ref(null);
+            const selectDropdownRef = ref(null);
+            const localValue = ref(props.value);
+            const highlightedIndex = ref(0);
+            const positionDropdown = () => {
+                const wrapper = selectWrapperRef.value;
+                const dropdown = selectDropdownRef.value;
+                if (!wrapper || !dropdown)
+                    return;
+                const rect = wrapper.getBoundingClientRect();
+                const maxH = 200;
+                const spaceBelow = window.innerHeight - rect.bottom;
+                const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+                dropdown.style.position = 'fixed';
+                dropdown.style.left = `${rect.left}px`;
+                dropdown.style.width = `${rect.width}px`;
+                dropdown.style.maxHeight = `${maxH}px`;
+                dropdown.style.zIndex = '9999';
+                dropdown.style.right = 'auto';
+                if (flipUp) {
+                    dropdown.style.top = 'auto';
+                    dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+                }
+                else {
+                    dropdown.style.top = `${rect.bottom}px`;
+                }
+            };
+            onMounted(() => {
+                nextTick(() => {
+                    if (selectWrapperRef.value) {
+                        selectWrapperRef.value.focus();
+                        positionDropdown();
+                        return;
+                    }
+                    inputRef.value?.focus();
+                    inputRef.value?.select();
+                });
+            });
+            // Sync local value when prop changes
+            watch(() => props.value, (v) => { localValue.value = v; });
+            // Initialize highlighted index to current value
+            const initHighlightedIndex = () => {
+                const values = props.column.cellEditorParams?.values ?? [];
+                const idx = values.findIndex((v) => String(v) === String(props.value));
+                highlightedIndex.value = Math.max(idx, 0);
+            };
+            initHighlightedIndex();
+            const scrollHighlightedIntoView = () => {
+                nextTick(() => {
+                    const dropdown = selectDropdownRef.value;
+                    if (!dropdown)
+                        return;
+                    const highlighted = dropdown.children[highlightedIndex.value];
+                    highlighted?.scrollIntoView({ block: 'nearest' });
+                });
+            };
+            const getDisplayText = (value) => {
+                const formatValue = props.column.cellEditorParams?.formatValue;
+                if (formatValue)
+                    return formatValue(value);
+                return value != null ? String(value) : '';
+            };
+            const handleSelectKeyDown = (e) => {
+                const values = props.column.cellEditorParams?.values ?? [];
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        highlightedIndex.value = Math.min(highlightedIndex.value + 1, values.length - 1);
+                        scrollHighlightedIntoView();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+                        scrollHighlightedIntoView();
+                        break;
+                    case 'Enter':
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (values.length > 0 && highlightedIndex.value < values.length) {
+                            props.onCommit(values[highlightedIndex.value]);
+                        }
+                        break;
+                    case 'Tab':
+                        e.preventDefault();
+                        if (values.length > 0 && highlightedIndex.value < values.length) {
+                            props.onCommit(values[highlightedIndex.value]);
+                        }
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        e.stopPropagation();
+                        props.onCancel();
+                        break;
+                }
+            };
+            return () => {
+                if (props.editorType === 'checkbox') {
+                    const checked = !!props.value;
+                    return h('div', { style: { ...editorWrapperStyle, justifyContent: 'center' } }, renderCheckbox({
+                        checked,
+                        onChange: (c) => props.onCommit(c),
+                        onCancel: props.onCancel,
+                    }));
+                }
+                if (props.editorType === 'select') {
+                    const values = props.column.cellEditorParams?.values ?? [];
+                    return h('div', {
+                        ref: (el) => { selectWrapperRef.value = el; },
+                        tabindex: 0,
+                        style: { ...editorWrapperStyle, position: 'relative' },
+                        onKeydown: handleSelectKeyDown,
+                    }, [
+                        h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', cursor: 'pointer', fontSize: '13px', color: 'inherit' } }, [
+                            h('span', getDisplayText(props.value)),
+                            h('span', { style: { marginLeft: '4px', fontSize: '10px', opacity: '0.5' } }, '\u25BE'),
+                        ]),
+                        h('div', {
+                            ref: (el) => { selectDropdownRef.value = el; },
+                            role: 'listbox',
+                            style: { position: 'absolute', top: '100%', left: '0', right: '0', maxHeight: '200px', overflowY: 'auto', background: 'var(--ogrid-bg, #fff)', border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))', zIndex: '10', boxShadow: '0 4px 16px rgba(0,0,0,0.2)' },
+                        }, values.map((v, i) => h('div', {
+                            key: String(v),
+                            role: 'option',
+                            'aria-selected': i === highlightedIndex.value,
+                            onClick: () => props.onCommit(v),
+                            style: { padding: '6px 8px', cursor: 'pointer', color: 'var(--ogrid-fg, #242424)', ...(i === highlightedIndex.value ? { background: 'var(--ogrid-bg-hover, #e8f0fe)' } : {}) },
+                        }, getDisplayText(v)))),
+                    ]);
+                }
+                if (props.editorType === 'date') {
+                    let dateStr = '';
+                    if (localValue.value) {
+                        const d = new Date(String(localValue.value));
+                        if (!Number.isNaN(d.getTime())) {
+                            dateStr = d.toISOString().slice(0, 10);
+                        }
+                    }
+                    return h('div', { style: editorWrapperStyle }, renderDatePicker({
+                        value: dateStr,
+                        onChange: (val) => props.onCommit(val),
+                        onCancel: props.onCancel,
+                    }));
+                }
+                // Default: text editor
+                return h('div', { style: editorWrapperStyle }, h('input', {
+                    ref: (el) => { inputRef.value = el; },
+                    type: 'text',
+                    value: localValue.value != null ? String(localValue.value) : '',
+                    style: { width: '100%', height: '100%', border: 'none', outline: 'none', padding: '0 4px', fontSize: 'inherit', boxSizing: 'border-box' },
+                    onInput: (e) => { localValue.value = e.target.value; },
+                    onKeydown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            props.onCommit(localValue.value);
+                        }
+                        if (e.key === 'Escape') {
+                            e.preventDefault();
+                            props.onCancel();
+                        }
+                        if (e.key === 'Tab') {
+                            e.preventDefault();
+                            props.onCommit(localValue.value);
+                        }
+                    },
+                    onBlur: () => props.onCommit(localValue.value),
+                }));
+            };
+        },
+    });
+}

package/dist/esm/components/createOGrid.js

@@ -0,0 +1,338 @@
+/**
+ * Shared OGrid factory for Vue UI packages.
+ *
+ * Both vue-vuetify and vue-primevue OGrid components are 100% identical —
+ * they only differ in which DataGridTable, ColumnChooser, and PaginationControls
+ * components they use. This factory extracts all shared logic into one place.
+ */
+import { defineComponent, h, computed } from 'vue';
+import { useOGrid, } from '../composables';
+// --- 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);
+}
+/**
+ * Creates an OGrid component with framework-specific UI bindings.
+ * All orchestration logic, sidebar, toolbar, and layout are shared.
+ */
+export function createOGrid(ui) {
+    return defineComponent({
+        name: 'OGrid',
+        props: {
+            gridProps: { type: Object, required: true },
+        },
+        setup(props, { expose }) {
+            const propsRef = computed(() => props.gridProps);
+            const { dataGridProps, pagination, columnChooser, layout, api } = useOGrid(propsRef);
+            // Expose the API for parent refs
+            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) {
+                    toolbarChildren.push(layout.value.toolbar);
+                }
+                // ColumnChooser in toolbar
+                const toolbarEnd = columnChooser.value.placement === 'toolbar'
+                    ? h(ui.ColumnChooser, {
+                        columns: columnChooser.value.columns,
+                        visibleColumns: columnChooser.value.visibleColumns,
+                        onVisibilityChange: columnChooser.value.onVisibilityChange,
+                    })
+                    : null;
+                // Pagination
+                const paginationNode = h(ui.PaginationControls, {
+                    currentPage: pagination.value.page,
+                    pageSize: pagination.value.pageSize,
+                    totalCount: pagination.value.displayTotalCount,
+                    onPageChange: pagination.value.setPage,
+                    onPageSizeChange: (size) => {
+                        pagination.value.setPageSize(size);
+                        pagination.value.setPage(1);
+                    },
+                    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(ui.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: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                        borderRadius: '4px',
+                        overflow: 'hidden',
+                    },
+                }, [
+                    // Toolbar strip
+                    ...(toolbarChildren.length || toolbarEnd ? [
+                        h('div', {
+                            style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                padding: '8px 12px',
+                                borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                                gap: '8px',
+                            },
+                        }, [
+                            h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flex: '1' } }, toolbarChildren),
+                            ...(toolbarEnd ? [toolbarEnd] : []),
+                        ]),
+                    ] : []),
+                    // Below toolbar strip
+                    ...(layout.value.toolbarBelow ? [
+                        h('div', {
+                            style: { padding: '8px 12px', borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))' },
+                        }, [layout.value.toolbarBelow]),
+                    ] : []),
+                    // Main content area (sidebar + grid)
+                    h('div', { style: { display: 'flex', flex: '1', minHeight: '0' } }, mainAreaChildren),
+                    // Footer strip (pagination)
+                    h('div', {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: '8px 0',
+                            borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
+                        },
+                    }, [paginationNode]),
+                ]);
+            };
+        },
+    });
+}

package/dist/esm/composables/useCellSelection.js

@@ -286,13 +286,25 @@ export function useCellSelection(params) {
         if (wasDrag)
             isDragging.value = false;
     };
+    let isUnmounted = false;
+    const onMoveSafe = (e) => {
+        if (isUnmounted)
+            return;
+        onMove(e);
+    };
+    const onUpSafe = () => {
+        if (isUnmounted)
+            return;
+        onUp();
+    };
     onMounted(() => {
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
+        window.addEventListener('mousemove', onMoveSafe, true);
+        window.addEventListener('mouseup', onUpSafe, true);
     });
     onUnmounted(() => {
-        window.removeEventListener('mousemove', onMove, true);
-        window.removeEventListener('mouseup', onUp, true);
+        isUnmounted = true;
+        window.removeEventListener('mousemove', onMoveSafe, true);
+        window.removeEventListener('mouseup', onUpSafe, true);
         if (rafId)
             cancelAnimationFrame(rafId);
         stopAutoScroll();

package/dist/esm/composables/useDataGridState.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, shallowRef, computed, watch, nextTick, triggerRef } from 'vue';
 import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
@@ -26,7 +26,7 @@ export function useDataGridState(params) {
     const { props, wrapperRef } = params;
     const items = computed(() => props.value.items);
     const columnsProp = computed(() => props.value.columns);
-    const getRowId = computed(() => props.value.getRowId).value; // getRowId is stable
+    const getRowId = props.value.getRowId; // stable function reference, no reactivity needed
     const visibleColumnsProp = computed(() => props.value.visibleColumns);
     const columnOrderProp = computed(() => props.value.columnOrder);
     const rowSelectionProp = computed(() => props.value.rowSelection ?? 'none');
@@ -86,12 +86,14 @@ export function useDataGridState(params) {
     const hasRowNumbersCol = computed(() => !!props.value.showRowNumbers);
     const specialColsCount = computed(() => (hasCheckboxCol.value ? 1 : 0) + (hasRowNumbersCol.value ? 1 : 0));
     const totalColCount = computed(() => visibleColumnCount.value + specialColsCount.value);
-    const colOffset = computed(() => specialColsCount.value).value; // stable once computed
-    const rowIndexByRowId = computed(() => {
-        const m = new Map();
-        items.value.forEach((item, idx) => m.set(getRowId(item), idx));
-        return m;
-    });
+    const colOffset = specialColsCount.value; // snapshot: checkbox/rowNumbers cols are fixed at setup
+    const rowIndexByRowId = shallowRef(new Map());
+    watch(items, (newItems) => {
+        const m = rowIndexByRowId.value;
+        m.clear();
+        newItems.forEach((item, idx) => m.set(getRowId(item), idx));
+        triggerRef(rowIndexByRowId);
+    }, { immediate: true });
     const rowSelectionResult = useRowSelection({
         items,
         getRowId,

package/dist/esm/composables/useOGrid.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
@@ -173,8 +173,9 @@ export function useOGrid(props) {
     const serverTotalCount = ref(0);
     const loading = ref(true);
     let fetchId = 0;
+    let isDestroyed = false;
     const refreshCounter = ref(0);
-    watch([isServerSide, () => dataProps.value.dataSource, page, pageSize, () => sort.value.field, () => sort.value.direction, filters, refreshCounter], () => {
+    const doFetch = () => {
         if (!isServerSide.value || !dataProps.value.dataSource) {
             if (!isServerSide.value)
                 loading.value = false;
@@ -190,23 +191,34 @@ export function useOGrid(props) {
             filters: filters.value,
         })
             .then((res) => {
-            if (id !== fetchId)
+            if (id !== fetchId || isDestroyed)
                 return;
             serverItems.value = res.items;
             serverTotalCount.value = res.totalCount;
         })
             .catch((err) => {
-            if (id !== fetchId)
+            if (id !== fetchId || isDestroyed)
                 return;
             callbacks.value.onError?.(err);
             serverItems.value = [];
             serverTotalCount.value = 0;
         })
             .finally(() => {
-            if (id === fetchId)
+            if (id === fetchId && !isDestroyed)
                 loading.value = false;
         });
-    }, { immediate: true });
+    };
+    // Initial fetch on mount
+    onMounted(() => {
+        doFetch();
+    });
+    // Subsequent fetches on page/sort/filter changes (no immediate — onMounted handles initial)
+    watch([() => dataProps.value.dataSource, page, pageSize, () => sort.value.field, () => sort.value.direction, filters, refreshCounter], () => {
+        doFetch();
+    });
+    onUnmounted(() => {
+        isDestroyed = true;
+    });
     const displayItems = computed(() => isClientSide.value && clientItemsAndTotal.value
         ? clientItemsAndTotal.value.items
         : serverItems.value);
@@ -339,6 +351,7 @@ export function useOGrid(props) {
             suppressHorizontalScroll: p.suppressHorizontalScroll,
             columnReorder: p.columnReorder,
             virtualScroll: p.virtualScroll,
+            rowHeight: p.rowHeight,
             density: p.density ?? 'normal',
             'aria-label': p['aria-label'],
             'aria-labelledby': p['aria-labelledby'],

package/dist/esm/composables/useRowSelection.js

@@ -1,10 +1,10 @@
-import { ref, computed } from 'vue';
+import { shallowRef, computed } from 'vue';
 /**
  * Manages row selection state for single or multiple selection modes with shift-click range support.
  */
 export function useRowSelection(params) {
     const { items, getRowId, rowSelection, controlledSelectedRows, onSelectionChange, } = params;
-    const internalSelectedRows = ref(new Set());
+    const internalSelectedRows = shallowRef(new Set());
     let lastClickedRow = -1;
     const selectedRowIds = computed(() => {
         const controlled = controlledSelectedRows.value;

package/dist/esm/index.js

@@ -10,3 +10,7 @@ export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelec
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 // DataGridTable factory (for UI packages)
 export { createDataGridTable } from './components/createDataGridTable';
+// InlineCellEditor factory (for UI packages)
+export { createInlineCellEditor } from './components/createInlineCellEditor';
+// OGrid factory (for UI packages)
+export { createOGrid } from './components/createOGrid';

package/dist/esm/styles/ogrid-layout.css

@@ -0,0 +1,344 @@
+/* OGrid Shared Layout Styles — consumed by vue-vuetify and vue-primevue */
+
+/* Remove focus outline from scrollable wrapper (keyboard nav is handled via cell outlines) */
+[role="region"][tabindex="0"] {
+  outline: none !important;
+}
+
+/* Cell selection highlighting */
+.ogrid-cell-in-range {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+/* Cut range highlighting */
+.ogrid-cell-cut {
+  background: var(--ogrid-hover-bg) !important;
+  opacity: 0.7;
+}
+
+/* Drag-range highlight applied via DOM attributes during drag (bypasses Vue for performance) */
+[data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+
+/* Anchor cell during drag: white/transparent background (like Excel) */
+[data-drag-anchor] {
+  background: var(--ogrid-bg) !important;
+}
+
+/* === Layout === */
+
+.ogrid-outer-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--ogrid-bg);
+  color: var(--ogrid-fg);
+}
+
+.ogrid-scroll-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.ogrid-table-container {
+  position: relative;
+}
+
+.ogrid-table-container--loading {
+  opacity: 0.6;
+}
+
+.ogrid-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  background-color: var(--ogrid-bg);
+  color: var(--ogrid-fg);
+}
+
+.ogrid-table tbody tr {
+  height: var(--ogrid-row-height, auto);
+}
+
+/* === Header === */
+
+.ogrid-thead {
+  z-index: 8;
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-header-row {
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-header-cell {
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  background-color: var(--ogrid-header-bg);
+  z-index: 8;
+}
+
+.ogrid-header-cell--pinned-left {
+  z-index: 10;
+  will-change: transform;
+}
+
+.ogrid-header-cell--pinned-right {
+  z-index: 10;
+  will-change: transform;
+}
+
+.ogrid-header-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.ogrid-column-group-header {
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border);
+  padding: 6px;
+}
+
+.ogrid-column-menu-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 6px;
+  font-size: 16px;
+  color: var(--ogrid-fg-muted);
+  line-height: 1;
+  flex-shrink: 0;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  transition: background-color 0.15s;
+}
+
+.ogrid-column-menu-btn:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg);
+}
+
+/* === Checkbox column === */
+
+.ogrid-checkbox-header,
+.ogrid-checkbox-cell {
+  text-align: center;
+  padding: 4px;
+}
+
+.ogrid-checkbox-cell {
+  padding: 0;
+}
+
+.ogrid-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ogrid-checkbox-spacer {
+  padding: 0;
+}
+
+/* === Row numbers === */
+
+.ogrid-row-number-header {
+  text-align: center;
+  font-weight: 600;
+  background-color: var(--ogrid-header-bg);
+  color: var(--ogrid-fg-secondary);
+}
+
+.ogrid-row-number-spacer {
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-row-number-cell {
+  text-align: center;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  background-color: var(--ogrid-header-bg);
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Data cells === */
+
+.ogrid-data-cell {
+  position: relative;
+  padding: 0;
+  height: 1px;
+}
+
+.ogrid-data-cell--pinned-left {
+  position: sticky;
+  z-index: 6;
+  background-color: var(--ogrid-bg);
+  will-change: transform;
+}
+
+.ogrid-data-cell--pinned-right {
+  position: sticky;
+  z-index: 6;
+  background-color: var(--ogrid-bg);
+  will-change: transform;
+}
+
+.ogrid-cell-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+
+.ogrid-cell-content--numeric {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ogrid-cell-content--boolean {
+  justify-content: center;
+  text-align: center;
+}
+
+.ogrid-cell-content--editable {
+  cursor: cell;
+}
+
+.ogrid-cell-content--active {
+  outline: 2px solid var(--ogrid-selection, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+
+/* === Editing cell wrapper === */
+
+.ogrid-editing-cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  background: var(--ogrid-bg, #fff);
+  overflow: visible;
+  padding: 0;
+}
+
+/* === Fill handle === */
+
+.ogrid-fill-handle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background-color: var(--ogrid-selection, #217346);
+  border: 1px solid var(--ogrid-bg);
+  border-radius: 1px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+
+/* === Resize handle === */
+
+.ogrid-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* === Drop indicator === */
+
+.ogrid-drop-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ogrid-primary, #217346);
+  pointer-events: none;
+  z-index: 100;
+}
+
+/* === Empty state === */
+
+.ogrid-empty-state {
+  padding: 32px 16px;
+  text-align: center;
+  border-top: 1px solid var(--ogrid-border);
+  background-color: var(--ogrid-header-bg);
+}
+
+.ogrid-empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.ogrid-empty-state-message {
+  font-size: 0.875rem;
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Loading overlay === */
+
+.ogrid-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ogrid-loading-overlay);
+}
+
+.ogrid-loading-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background-color: var(--ogrid-bg);
+  border: 1px solid var(--ogrid-border);
+  border-radius: 4px;
+}
+
+.ogrid-loading-message {
+  font-size: 0.875rem;
+  color: var(--ogrid-fg-secondary);
+}
+
+/* === Popover editor anchor === */
+
+.ogrid-popover-anchor {
+  min-height: 100%;
+  min-width: 40px;
+}

package/dist/esm/styles/ogrid-theme.css

@@ -0,0 +1,52 @@
+/* OGrid Shared Theme Variables — consumed by vue-vuetify and vue-primevue */
+
+/* ─── OGrid Theme Variables ─── */
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  }
+}
+
+[data-theme="dark"] {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+}

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

@@ -0,0 +1,75 @@
+import { type PropType, type VNode } from 'vue';
+import type { IColumnDef } from '../types';
+export interface CreateInlineCellEditorOptions {
+    renderCheckbox: (props: {
+        checked: boolean;
+        onChange: (val: boolean) => void;
+        onCancel: () => void;
+    }) => VNode;
+    renderDatePicker: (props: {
+        value: string;
+        onChange: (val: string) => void;
+        onCancel: () => void;
+    }) => VNode;
+}
+export declare function createInlineCellEditor(options: CreateInlineCellEditorOptions): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        default: undefined;
+    };
+    item: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    column: {
+        type: PropType<IColumnDef>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    editorType: {
+        type: PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
+        required: true;
+    };
+    onCommit: {
+        type: PropType<(value: unknown) => void>;
+        required: true;
+    };
+    onCancel: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        default: undefined;
+    };
+    item: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    column: {
+        type: PropType<IColumnDef>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    editorType: {
+        type: PropType<"text" | "select" | "checkbox" | "richSelect" | "date">;
+        required: true;
+    };
+    onCommit: {
+        type: PropType<(value: unknown) => void>;
+        required: true;
+    };
+    onCancel: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    value: undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,35 @@
+/**
+ * Shared OGrid factory for Vue UI packages.
+ *
+ * Both vue-vuetify and vue-primevue OGrid components are 100% identical —
+ * they only differ in which DataGridTable, ColumnChooser, and PaginationControls
+ * components they use. This factory extracts all shared logic into one place.
+ */
+import { type PropType, type VNode, type Component } from 'vue';
+import type { IOGridProps } from '../types';
+/** Framework-specific component bindings passed by each UI package */
+export interface IOGridUIBindings {
+    /** Package-local DataGridTable component */
+    DataGridTable: Component;
+    /** Package-local ColumnChooser component */
+    ColumnChooser: Component;
+    /** Package-local PaginationControls component */
+    PaginationControls: Component;
+}
+/**
+ * Creates an OGrid component with framework-specific UI bindings.
+ * All orchestration logic, sidebar, toolbar, and layout are shared.
+ */
+export declare function createOGrid(ui: IOGridUIBindings): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    gridProps: {
+        type: PropType<IOGridProps<unknown>>;
+        required: true;
+    };
+}>, () => 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: {
+        type: PropType<IOGridProps<unknown>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/index.d.ts

@@ -9,4 +9,6 @@ export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGri
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, CellInteractionProps, } from './utils';
 export { createDataGridTable, type IDataGridTableUIBindings } from './components/createDataGridTable';
+export { createInlineCellEditor, type CreateInlineCellEditorOptions } from './components/createInlineCellEditor';
+export { createOGrid, type IOGridUIBindings } from './components/createOGrid';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';

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

@@ -77,6 +77,8 @@ interface IOGridBaseProps<T> {
     columnReorder?: boolean;
     /** Virtual scrolling configuration. Set `enabled: true` with a fixed `rowHeight` to virtualize large datasets. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
     density?: 'compact' | 'normal' | 'comfortable';
     'aria-label'?: string;
@@ -157,6 +159,8 @@ export interface IOGridDataGridProps<T> {
     columnReorder?: boolean;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
     density?: 'compact' | 'normal' | 'comfortable';
     'aria-label'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "description": "OGrid Vue – Vue 3 composables, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -10,10 +10,11 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/esm/index.js"
-    }
+    },
+    "./styles/*": "./dist/esm/styles/*"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/copy-css.js",
     "test": "jest --passWithNoTests"
   },
   "keywords": [
@@ -35,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.18"
+    "@alaarab/ogrid-core": "2.0.21"
   },
   "peerDependencies": {
     "vue": "^3.3.0"
@@ -47,7 +48,9 @@
     "vite-plugin-dts": "^4.5.4",
     "typescript": "^5.9.3"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   }