@alaarab/ogrid-vue-vuetify 2.0.11 → 2.0.13

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -60,16 +60,16 @@ export const ColumnHeaderMenu = defineComponent({
             }, {
                 default: () => h(VList, { density: 'compact', 'aria-label': 'Column options' }, () => {
                     const children = [];
-                    items.value.forEach((item, index) => {
-                        // Add divider before item if needed (but not at the start)
-                        if (item.divider && index > 0) {
-                            children.push(h(VDivider, { key: `divider-${item.id}` }));
-                        }
+                    items.value.forEach((item) => {
                         children.push(h(VListItem, {
                             key: item.id,
                             disabled: item.disabled,
                             onClick: () => { getHandler(item.id)(); },
                         }, () => item.label));
+                        // Add divider after item to separate sections
+                        if (item.divider) {
+                            children.push(h(VDivider, { key: `divider-${item.id}` }));
+                        }
                     });
                     return children;
                 }),

package/dist/esm/DataGridTable/DataGridTable.css

@@ -1,4 +1,55 @@
-/* OGrid Vue Vuetify – DataGridTable styles */
+/* OGrid Vue Vuetify - DataGridTable styles */
+
+/* ─── 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);
+}
 
 /* Remove focus outline from scrollable wrapper (keyboard nav is handled via cell outlines) */
 [role="region"][tabindex="0"] {
@@ -12,18 +63,18 @@
 
 /* Cut range highlighting */
 .ogrid-cell-cut {
-  background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
+  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-bg-range, rgba(33, 115, 70, 0.12)) !important;
+  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, #fff) !important;
+  background: var(--ogrid-bg) !important;
 }
 
 /* Accessibility: Focus visible styles */
@@ -49,3 +100,299 @@
   outline-offset: -2px;
   z-index: 3;
 }
+
+/* === 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);
+}
+
+/* === 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;
+}
+
+/* === 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/DataGridTable/DataGridTable.js

@@ -1,609 +1,28 @@
-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, StatusBar, } from '@alaarab/ogrid-vue';
+import { h } from 'vue';
+import { VCheckbox, VProgressCircular } from 'vuetify/components';
+import { createDataGridTable } from '@alaarab/ogrid-vue';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { ColumnHeaderMenu } from '../ColumnHeaderMenu/ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
 import { GridContextMenu } from './GridContextMenu';
+import { renderEmptyState } from './EmptyState';
 import './DataGridTable.css';
-const NOOP = () => { };
-export const DataGridTable = defineComponent({
-    name: 'DataGridTable',
-    props: {
-        // Pass all IOGridDataGridProps as a single prop object for simplicity with generics
-        gridProps: { type: Object, required: true },
-    },
-    setup(props) {
-        const propsRef = computed(() => props.gridProps);
-        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
-             *
-             * This render function destructures all state properties upfront (lines 43-63),
-             * which differs from React's GridRow memoization pattern. However, benchmarking
-             * shows excellent performance (4.74ms for selection change with 1000 rows).
-             *
-             * Why Vue doesn't need React-style memoization:
-             * - Vue tracks which specific reactive properties are accessed during render
-             * - When `activeCell` changes, Vue only re-runs code paths that access it
-             * - React re-runs the entire render function unless explicitly memoized
-             *
-             * The over-dereferencing pattern here is intentional for code clarity.
-             * Vue's reactivity system compensates for it automatically.
-             *
-             * Benchmark results (1000 rows): Initial: 19.07ms, Selection change: 4.74ms
-             */
-            const p = props.gridProps;
-            const layout = state.layout.value;
-            const rowSel = state.rowSelection.value;
-            const editing = state.editing.value;
-            const interaction = state.interaction.value;
-            const ctxMenu = state.contextMenu.value;
-            const viewModels = state.viewModels.value;
-            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: _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: _onCellError } = viewModels;
-            const items = p.items;
-            const getRowId = p.getRowId;
-            const layoutMode = p.layoutMode ?? 'fill';
-            const rowSelection = p.rowSelection ?? 'none';
-            const freezeRows = p.freezeRows;
-            const freezeCols = p.freezeCols;
-            const suppressHorizontalScroll = p.suppressHorizontalScroll;
-            const isLoading = p.isLoading ?? false;
-            const loadingMessage = p.loadingMessage ?? 'Loading\u2026';
-            const ariaLabel = p['aria-label'];
-            const ariaLabelledBy = p['aria-labelledby'];
-            const fitToContent = layoutMode === 'content';
-            const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
-            const headerRows = buildHeaderRows(p.columns, p.visibleColumns);
-            const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
-            const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
-            const handleSingleRowClick = (e) => {
-                if (rowSelection !== 'single')
-                    return;
-                const tr = e.currentTarget;
-                const rowId = tr.dataset.rowId;
-                if (!rowId)
-                    return;
-                rowSel.updateSelection(selectedRowIds.has(rowId) ? new Set() : new Set([rowId]));
-            };
-            // Render a cell's content
-            const renderCellContent = (item, col, rowIndex, colIdx) => {
-                const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
-                const _rowId = getRowId(item);
-                if (descriptor.mode === 'editing-inline') {
-                    const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
-                    return h(InlineCellEditor, {
-                        value: editorProps.value,
-                        item: editorProps.item,
-                        column: editorProps.column,
-                        rowIndex: editorProps.rowIndex,
-                        editorType: editorProps.editorType,
-                        onCommit: editorProps.onCommit,
-                        onCancel: editorProps.onCancel,
-                    });
-                }
-                if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
-                    const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, editCallbacks);
-                    // For Vue, custom editors are components
-                    const CustomEditor = col.cellEditor;
-                    return h('div', [
-                        h('div', {
-                            ref: (el) => { if (el)
-                                setPopoverAnchorEl(el); },
-                            style: { minHeight: '100%', minWidth: '40px' },
-                            'aria-hidden': 'true',
-                        }),
-                        // Render custom editor inline (Vue doesn't have Popover built-in to Vuetify in this pattern)
-                        popoverAnchorEl
-                            ? h(CustomEditor, editorProps)
-                            : null,
-                    ]);
-                }
-                // Display mode
-                const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-                const cellStyle = resolveCellStyle(col, item);
-                const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
-                // Compute cell CSS classes based on state
-                const _cellClasses = ['ogrid-cell'];
-                const cellInlineStyle = {
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    minWidth: '0',
-                    padding: '6px 10px',
-                    boxSizing: 'border-box',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    userSelect: 'none',
-                    outline: 'none',
-                };
-                if (col.type === 'numeric') {
-                    cellInlineStyle.justifyContent = 'flex-end';
-                    cellInlineStyle.textAlign = 'right';
-                }
-                else if (col.type === 'boolean') {
-                    cellInlineStyle.justifyContent = 'center';
-                    cellInlineStyle.textAlign = 'center';
-                }
-                if (descriptor.canEditAny) {
-                    cellInlineStyle.cursor = 'cell';
-                }
-                if (descriptor.isActive && !descriptor.isInRange) {
-                    cellInlineStyle.outline = '2px solid var(--ogrid-selection, #217346)';
-                    cellInlineStyle.outlineOffset = '-1px';
-                    cellInlineStyle.zIndex = '2';
-                    cellInlineStyle.position = 'relative';
-                    cellInlineStyle.overflow = 'visible';
-                }
-                // Apply range/cut highlighting via CSS classes + data attributes for proper precedence
-                let highlightClass = '';
-                if (descriptor.isInRange) {
-                    highlightClass = 'ogrid-cell-in-range';
-                }
-                if (descriptor.isInCutRange) {
-                    highlightClass = 'ogrid-cell-cut';
-                }
-                const styledContent = cellStyle
-                    ? h('span', { style: cellStyle }, content)
-                    : content;
-                return h('div', {
-                    ...interactionProps,
-                    class: highlightClass || undefined,
-                    style: cellInlineStyle,
-                }, [
-                    styledContent,
-                    ...(descriptor.canEditAny && descriptor.isSelectionEndCell ? [
-                        h('div', {
-                            onMousedown: handleFillHandleMouseDown,
-                            'aria-label': 'Fill handle',
-                            style: {
-                                position: 'absolute',
-                                right: '-3px',
-                                bottom: '-3px',
-                                width: '7px',
-                                height: '7px',
-                                backgroundColor: 'var(--ogrid-selection, #217346)',
-                                border: '1px solid var(--ogrid-bg, #fff)',
-                                borderRadius: '1px',
-                                cursor: 'crosshair',
-                                pointerEvents: 'auto',
-                                zIndex: '3',
-                            },
-                        }),
-                    ] : []),
-                ]);
-            };
-            // Compute pinning offsets
-            const columnWidthsMap = {};
-            visibleCols.forEach((col) => {
-                columnWidthsMap[col.columnId] = getColumnWidth(col);
-            });
-            const leftOffsets = pinning.computeLeftOffsets(visibleCols, columnWidthsMap, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol, CHECKBOX_COLUMN_WIDTH);
-            const rightOffsets = pinning.computeRightOffsets(visibleCols, columnWidthsMap, DEFAULT_MIN_COLUMN_WIDTH);
-            // Build column layouts
-            const columnLayouts = visibleCols.map((col, colIdx) => {
-                const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                const isPinnedLeft = col.pinned === 'left';
-                const isPinnedRight = col.pinned === 'right';
-                const columnWidth = getColumnWidth(col);
-                const tdStyle = {
-                    position: 'relative',
-                    padding: '0',
-                    height: '1px',
-                };
-                if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
-                    tdStyle.position = 'sticky';
-                    tdStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
-                    tdStyle.zIndex = '6';
-                    tdStyle.backgroundColor = '#fff';
-                    tdStyle.willChange = 'transform';
-                }
-                else if (isPinnedRight) {
-                    tdStyle.position = 'sticky';
-                    tdStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
-                    tdStyle.zIndex = '6';
-                    tdStyle.backgroundColor = '#fff';
-                    tdStyle.willChange = 'transform';
-                }
-                return { col, tdStyle, minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, width: columnWidth, maxWidth: columnWidth };
-            });
-            // Build header cell styles
-            const getHeaderStyle = (col, colIdx) => {
-                const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                const isPinnedLeft = col.pinned === 'left';
-                const isPinnedRight = col.pinned === 'right';
-                const base = { fontWeight: '600', position: 'sticky', top: '0', backgroundColor: 'rgba(0,0,0,0.04)', zIndex: '8' };
-                if (isPinnedLeft || (isFreezeCol && colIdx === 0)) {
-                    const leftOffset = leftOffsets[col.columnId] ?? 0;
-                    return { ...base, position: 'sticky', left: `${leftOffset}px`, top: '0', zIndex: '10', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
-                }
-                if (isPinnedRight) {
-                    const rightOffset = rightOffsets[col.columnId] ?? 0;
-                    return { ...base, position: 'sticky', right: `${rightOffset}px`, top: '0', zIndex: '10', backgroundColor: 'rgba(0,0,0,0.04)', willChange: 'transform' };
-                }
-                return base;
-            };
-            const wrapperStyle = {
-                position: 'relative',
-                flex: '1',
-                minHeight: '0',
-                width: fitToContent ? 'fit-content' : '100%',
-                maxWidth: '100%',
-                overflowX: suppressHorizontalScroll ? 'hidden' : allowOverflowX ? 'auto' : 'hidden',
-                overflowY: 'auto',
-                backgroundColor: '#fff',
-                willChange: 'scroll-position',
-            };
-            return h('div', { style: { position: 'relative', flex: '1', minHeight: '0', display: 'flex', flexDirection: 'column' } }, [
-                // Scrollable wrapper
-                h('div', {
-                    ref: (el) => { wrapperRef.value = el; vsContainerRef.value = el; },
-                    tabindex: 0,
-                    role: 'region',
-                    'aria-label': ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'),
-                    'aria-labelledby': ariaLabelledBy,
-                    onMousedown: (e) => { lastMouseShift.value = e.shiftKey; },
-                    onKeydown: handleGridKeyDown,
-                    onContextmenu: (e) => e.preventDefault(),
-                    'data-overflow-x': allowOverflowX ? 'true' : 'false',
-                    style: wrapperStyle,
-                }, [
-                    h('div', { style: { display: 'flex', flexDirection: 'column', minHeight: '100%' } }, [
-                        h('div', { style: { minWidth: allowOverflowX ? `${minTableWidth}px` : undefined } }, [
-                            h('div', {
-                                ref: (el) => { tableContainerRef.value = el; },
-                                style: isLoading && items.length > 0
-                                    ? { position: 'relative', opacity: '0.6' }
-                                    : { position: 'relative', opacity: '1' },
-                            }, [
-                                // Drop indicator for column reorder
-                                ...(isReorderDragging.value && dropIndicatorX.value !== null ? [
-                                    h('div', {
-                                        style: {
-                                            position: 'absolute',
-                                            top: '0',
-                                            bottom: '0',
-                                            width: '3px',
-                                            background: 'var(--ogrid-primary, #217346)',
-                                            pointerEvents: 'none',
-                                            zIndex: '100',
-                                            left: `${dropIndicatorX.value}px`,
-                                        },
-                                    }),
-                                ] : []),
-                                // Table
-                                h('table', {
-                                    ref: (el) => { tableRef.value = el; },
-                                    style: {
-                                        width: '100%',
-                                        borderCollapse: 'collapse',
-                                        minWidth: `${minTableWidth}px`,
-                                        fontSize: '0.875rem',
-                                    },
-                                    'data-freeze-rows': freezeRows != null && freezeRows >= 1 ? freezeRows : undefined,
-                                    'data-freeze-cols': freezeCols != null && freezeCols >= 1 ? freezeCols : undefined,
-                                }, [
-                                    // Header
-                                    h('thead', { style: { zIndex: '8', backgroundColor: 'rgba(0,0,0,0.04)' } }, headerRows.map((row, rowIdx) => h('tr', { key: rowIdx, style: { backgroundColor: 'rgba(0,0,0,0.04)' } }, [
-                                        // Checkbox header cell (last leaf row only)
-                                        ...(rowIdx === headerRows.length - 1 && hasCheckboxCol ? [
-                                            h('th', {
-                                                style: {
-                                                    width: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                    minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                    maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                    textAlign: 'center',
-                                                    padding: '4px',
-                                                },
-                                            }, h(VCheckbox, {
-                                                modelValue: allSelected,
-                                                indeterminate: someSelected,
-                                                hideDetails: true,
-                                                density: 'compact',
-                                                'aria-label': 'Select all rows',
-                                                'onUpdate:modelValue': (c) => handleSelectAll(!!c),
-                                            })),
-                                        ] : []),
-                                        // Empty placeholder for checkbox in first group row
-                                        ...(rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol ? [
-                                            h('th', {
-                                                rowSpan: headerRows.length - 1,
-                                                style: { width: `${CHECKBOX_COLUMN_WIDTH}px`, minWidth: `${CHECKBOX_COLUMN_WIDTH}px`, padding: '0' },
-                                            }),
-                                        ] : []),
-                                        // Row numbers header cell (last leaf row only)
-                                        ...(rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
-                                            h('th', {
-                                                style: {
-                                                    width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                    minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                    maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                    textAlign: 'center',
-                                                    fontWeight: '600',
-                                                    padding: '6px',
-                                                    backgroundColor: 'rgba(0,0,0,0.04)',
-                                                    color: 'rgba(0,0,0,0.6)',
-                                                },
-                                            }, '#'),
-                                        ] : []),
-                                        // Empty placeholder for row numbers in first group row
-                                        ...(rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
-                                            h('th', {
-                                                rowSpan: headerRows.length - 1,
-                                                style: { width: `${ROW_NUMBER_COLUMN_WIDTH}px`, minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`, padding: '0' },
-                                            }),
-                                        ] : []),
-                                        // Header cells
-                                        ...row.map((cell, cellIdx) => {
-                                            if (cell.isGroup) {
-                                                return h('th', {
-                                                    key: cellIdx,
-                                                    colSpan: cell.colSpan,
-                                                    scope: 'colgroup',
-                                                    style: { textAlign: 'center', fontWeight: '600', borderBottom: '2px solid rgba(0,0,0,0.12)', padding: '6px' },
-                                                }, cell.label);
-                                            }
-                                            const col = cell.columnDef;
-                                            const colIdx = visibleCols.indexOf(col);
-                                            const columnWidth = getColumnWidth(col);
-                                            const headerStyle = getHeaderStyle(col, colIdx);
-                                            return h('th', {
-                                                key: col.columnId,
-                                                scope: 'col',
-                                                'data-column-id': col.columnId,
-                                                rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined,
-                                                style: {
-                                                    ...headerStyle,
-                                                    cursor: isReorderDragging.value ? 'grabbing' : 'grab',
-                                                    minWidth: `${col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH}px`,
-                                                    width: `${columnWidth}px`,
-                                                    maxWidth: `${columnWidth}px`,
-                                                },
-                                                onMousedown: (e) => handleReorderMouseDown(col.columnId, e),
-                                            }, [
-                                                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: {
-                                                        position: 'absolute',
-                                                        top: '0',
-                                                        right: '-3px',
-                                                        bottom: '0',
-                                                        width: '8px',
-                                                        cursor: 'col-resize',
-                                                        userSelect: 'none',
-                                                    },
-                                                }),
-                                            ]);
-                                        }),
-                                    ]))),
-                                    // Body
-                                    ...(!showEmptyInGrid ? [
-                                        h('tbody', {}, (() => {
-                                            const vsEnabled = virtualScrollEnabled.value;
-                                            const vr = visibleRange.value;
-                                            const startIdx = vsEnabled ? vr.startIndex : 0;
-                                            const endIdx = vsEnabled ? Math.min(vr.endIndex, items.length - 1) : items.length - 1;
-                                            const rows = [];
-                                            // Top spacer for virtual scrolling
-                                            if (vsEnabled && vr.offsetTop > 0) {
-                                                rows.push(h('tr', { key: '__vs-top', style: { height: `${vr.offsetTop}px` } }));
-                                            }
-                                            for (let rowIndex = startIdx; rowIndex <= endIdx; rowIndex++) {
-                                                const item = items[rowIndex];
-                                                if (!item)
-                                                    continue;
-                                                const rowIdStr = getRowId(item);
-                                                const isSelected = selectedRowIds.has(rowIdStr);
-                                                rows.push(h('tr', {
-                                                    key: rowIdStr,
-                                                    'data-row-id': rowIdStr,
-                                                    onClick: handleSingleRowClick,
-                                                    style: { cursor: rowSelection === 'single' ? 'pointer' : undefined },
-                                                }, [
-                                                    // Checkbox cell
-                                                    ...(hasCheckboxCol ? [
-                                                        h('td', {
-                                                            style: {
-                                                                width: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                                minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                                maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
-                                                                textAlign: 'center',
-                                                                padding: '0',
-                                                            },
-                                                        }, h('div', {
-                                                            'data-row-index': rowIndex,
-                                                            'data-col-index': 0,
-                                                            onClick: (e) => e.stopPropagation(),
-                                                            style: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
-                                                        }, h(VCheckbox, {
-                                                            modelValue: isSelected,
-                                                            hideDetails: true,
-                                                            density: 'compact',
-                                                            'aria-label': `Select row ${rowIndex + 1}`,
-                                                            'onUpdate:modelValue': (checked) => handleRowCheckboxChange(rowIdStr, checked, rowIndex, lastMouseShift.value),
-                                                        }))),
-                                                    ] : []),
-                                                    // Row numbers cell
-                                                    ...(hasRowNumbersCol ? [
-                                                        h('td', {
-                                                            style: {
-                                                                width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                                minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                                maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
-                                                                textAlign: 'center',
-                                                                fontWeight: '600',
-                                                                fontVariantNumeric: 'tabular-nums',
-                                                                padding: '6px',
-                                                                backgroundColor: 'rgba(0,0,0,0.04)',
-                                                                color: 'rgba(0,0,0,0.6)',
-                                                            },
-                                                        }, String(rowNumberOffset + rowIndex + 1)),
-                                                    ] : []),
-                                                    // Data cells
-                                                    ...columnLayouts.map((cl, colIdx) => h('td', {
-                                                        key: cl.col.columnId,
-                                                        style: {
-                                                            ...cl.tdStyle,
-                                                            minWidth: `${cl.minWidth}px`,
-                                                            width: `${cl.width}px`,
-                                                            maxWidth: `${cl.maxWidth}px`,
-                                                        },
-                                                    }, [renderCellContent(item, cl.col, rowIndex, colIdx)])),
-                                                ]));
-                                            }
-                                            // Bottom spacer for virtual scrolling
-                                            if (vsEnabled && vr.offsetBottom > 0) {
-                                                rows.push(h('tr', { key: '__vs-bottom', style: { height: `${vr.offsetBottom}px` } }));
-                                            }
-                                            return rows;
-                                        })()),
-                                    ] : []),
-                                ]),
-                                // Empty state
-                                ...(showEmptyInGrid && p.emptyState ? [
-                                    h('div', {
-                                        style: {
-                                            padding: '32px 16px',
-                                            textAlign: 'center',
-                                            borderTop: '1px solid rgba(0,0,0,0.12)',
-                                            backgroundColor: 'rgba(0,0,0,0.04)',
-                                        },
-                                    }, p.emptyState.render
-                                        ? [p.emptyState.render()]
-                                        : [
-                                            h('div', { style: { fontSize: '1.25rem', fontWeight: '600', marginBottom: '8px' } }, 'No results found'),
-                                            h('div', { style: { fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, p.emptyState.message != null
-                                                ? String(p.emptyState.message)
-                                                : p.emptyState.hasActiveFilters
-                                                    ? [
-                                                        'No items match your current filters. Try adjusting your search or ',
-                                                        h(VBtn, {
-                                                            variant: 'text',
-                                                            size: 'small',
-                                                            onClick: p.emptyState.onClearAll,
-                                                        }, () => 'clear all filters'),
-                                                        ' to see all items.',
-                                                    ]
-                                                    : 'There are no items available at this time.'),
-                                        ]),
-                                ] : []),
-                            ]),
-                        ]),
-                    ]),
-                ]),
-                // Context menu (teleported to body)
-                ...(menuPosition ? [
-                    h(Teleport, { to: 'body' }, h(GridContextMenu, {
-                        x: menuPosition.x,
-                        y: menuPosition.y,
-                        hasSelection: hasCellSelection,
-                        canUndo,
-                        canRedo,
-                        onUndo: onUndo ?? NOOP,
-                        onRedo: onRedo ?? NOOP,
-                        onCopy: handleCopy,
-                        onCut: handleCut,
-                        onPaste: () => { void handlePaste(); },
-                        onSelectAll: handleSelectAllCells,
-                        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,
-                    onSortAsc: headerMenu.handleSortAsc,
-                    onSortDesc: headerMenu.handleSortDesc,
-                    onClearSort: headerMenu.handleClearSort,
-                    onAutosizeThis: headerMenu.handleAutosizeThis,
-                    onAutosizeAll: headerMenu.handleAutosizeAll,
-                    canPinLeft: headerMenu.canPinLeft,
-                    canPinRight: headerMenu.canPinRight,
-                    canUnpin: headerMenu.canUnpin,
-                    currentSort: headerMenu.currentSort,
-                    isSortable: headerMenu.isSortable,
-                    isResizable: headerMenu.isResizable,
-                }),
-                // Status bar
-                ...(statusBarConfig ? [
-                    h(StatusBar, {
-                        totalCount: statusBarConfig.totalCount,
-                        filteredCount: statusBarConfig.filteredCount,
-                        selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
-                        selectedCellCount: selectionRange
-                            ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1)
-                            : undefined,
-                        aggregation: statusBarConfig.aggregation,
-                        suppressRowCount: statusBarConfig.suppressRowCount,
-                    }),
-                ] : []),
-                // Loading overlay
-                ...(isLoading ? [
-                    h('div', {
-                        style: {
-                            position: 'absolute',
-                            inset: '0',
-                            zIndex: '2',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: 'rgba(255,255,255,0.7)',
-                        },
-                    }, h('div', {
-                        style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            gap: '8px',
-                            padding: '16px',
-                            backgroundColor: '#fff',
-                            border: '1px solid rgba(0,0,0,0.12)',
-                            borderRadius: '4px',
-                        },
-                    }, [
-                        h(VProgressCircular, { size: 24, indeterminate: true }),
-                        h('span', { style: { fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, loadingMessage),
-                    ])),
-                ] : []),
-            ]);
-        };
-    },
+export const DataGridTable = createDataGridTable({
+    renderCheckbox: ({ modelValue, indeterminate, ariaLabel, onChange }) => h(VCheckbox, {
+        modelValue,
+        indeterminate,
+        hideDetails: true,
+        density: 'compact',
+        'aria-label': ariaLabel,
+        'onUpdate:modelValue': (c) => onChange(!!c),
+    }),
+    renderSpinner: (message) => h('div', { class: 'ogrid-loading-inner' }, [
+        h(VProgressCircular, { size: 24, indeterminate: true }),
+        h('span', { class: 'ogrid-loading-message' }, message),
+    ]),
+    ColumnHeaderFilter,
+    ColumnHeaderMenu,
+    InlineCellEditor,
+    GridContextMenu,
+    renderEmptyState: (emptyState) => renderEmptyState({ emptyState }),
 });

package/dist/esm/DataGridTable/EmptyState.js

@@ -0,0 +1,22 @@
+import { h } from 'vue';
+import { VBtn } from 'vuetify/components';
+export function renderEmptyState({ emptyState }) {
+    return h('div', { class: 'ogrid-empty-state' }, emptyState.render
+        ? [emptyState.render()]
+        : [
+            h('div', { class: 'ogrid-empty-state-title' }, 'No results found'),
+            h('div', { class: 'ogrid-empty-state-message' }, emptyState.message != null
+                ? String(emptyState.message)
+                : emptyState.hasActiveFilters
+                    ? [
+                        'No items match your current filters. Try adjusting your search or ',
+                        h(VBtn, {
+                            variant: 'text',
+                            size: 'small',
+                            onClick: emptyState.onClearAll,
+                        }, () => 'clear all filters'),
+                        ' to see all items.',
+                    ]
+                    : 'There are no items available at this time.'),
+        ]);
+}

package/dist/esm/OGrid/OGrid.js

@@ -284,7 +284,7 @@ export const OGrid = defineComponent({
                 style: {
                     display: 'flex',
                     flexDirection: 'column',
-                    border: '1px solid rgba(0,0,0,0.12)',
+                    border: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
                     borderRadius: '4px',
                     overflow: 'hidden',
                 },
@@ -297,7 +297,7 @@ export const OGrid = defineComponent({
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             padding: '8px 12px',
-                            borderBottom: '1px solid rgba(0,0,0,0.12)',
+                            borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
                             gap: '8px',
                         },
                     }, [
@@ -308,7 +308,7 @@ export const OGrid = defineComponent({
                 // Below toolbar strip
                 ...(layout.value.toolbarBelow ? [
                     h('div', {
-                        style: { padding: '8px 12px', borderBottom: '1px solid rgba(0,0,0,0.12)' },
+                        style: { padding: '8px 12px', borderBottom: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))' },
                     }, [layout.value.toolbarBelow]),
                 ] : []),
                 // Main content area (sidebar + grid)
@@ -319,7 +319,7 @@ export const OGrid = defineComponent({
                         display: 'flex',
                         alignItems: 'center',
                         padding: '8px 0',
-                        borderTop: '1px solid rgba(0,0,0,0.12)',
+                        borderTop: '1px solid var(--ogrid-border, rgba(0,0,0,0.12))',
                     },
                 }, [paginationNode]),
             ]);

package/dist/esm/PaginationControls/PaginationControls.js

@@ -37,7 +37,7 @@ export const PaginationControls = defineComponent({
             }, [
                 // Summary text
                 h('span', {
-                    style: { fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' },
+                    style: { fontSize: '0.875rem', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' },
                 }, `Showing ${startItem} to ${endItem} of ${props.totalCount.toLocaleString()} ${label}`),
                 // Page buttons
                 h('div', { style: { display: 'flex', alignItems: 'center', gap: '4px' } }, [
@@ -68,7 +68,7 @@ export const PaginationControls = defineComponent({
                             style: { minWidth: '32px' },
                             onClick: () => props.onPageChange(1),
                         }, () => '1'),
-                        h('span', { style: { margin: '0 4px', color: 'rgba(0,0,0,0.6)' }, 'aria-hidden': 'true' }, '\u2026'),
+                        h('span', { style: { margin: '0 4px', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' }, 'aria-hidden': 'true' }, '\u2026'),
                     ] : []),
                     // Page numbers
                     ...pageNumbers.map((pageNum) => h(VBtn, {
@@ -83,7 +83,7 @@ export const PaginationControls = defineComponent({
                     }, () => String(pageNum))),
                     // End ellipsis
                     ...(showEndEllipsis ? [
-                        h('span', { style: { margin: '0 4px', color: 'rgba(0,0,0,0.6)' }, 'aria-hidden': 'true' }, '\u2026'),
+                        h('span', { style: { margin: '0 4px', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' }, 'aria-hidden': 'true' }, '\u2026'),
                         h(VBtn, {
                             size: 'small',
                             variant: 'outlined',
@@ -113,7 +113,7 @@ export const PaginationControls = defineComponent({
                 ]),
                 // Page size selector
                 h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, [
-                    h('span', { style: { fontSize: '0.875rem', color: 'rgba(0,0,0,0.6)' } }, 'Rows'),
+                    h('span', { style: { fontSize: '0.875rem', color: 'var(--ogrid-fg-secondary, rgba(0,0,0,0.6))' } }, 'Rows'),
                     h(VSelect, {
                         modelValue: props.pageSize,
                         items: v.pageSizeOptions,

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

@@ -1,16 +1,14 @@
-import { type PropType, type VNode } from 'vue';
-import { type IOGridDataGridProps } from '@alaarab/ogrid-vue';
 import './DataGridTable.css';
 export declare const DataGridTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     gridProps: {
-        type: PropType<IOGridDataGridProps<unknown>>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IOGridDataGridProps<unknown>>;
         required: true;
     };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => 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<{
     gridProps: {
-        type: PropType<IOGridDataGridProps<unknown>>;
+        type: import("vue").PropType<import("@alaarab/ogrid-vue").IOGridDataGridProps<unknown>>;
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,11 @@
+import { type VNode } from 'vue';
+interface EmptyStateProps {
+    emptyState: {
+        render?: () => unknown;
+        message?: string | null;
+        hasActiveFilters?: boolean;
+        onClearAll?: () => void;
+    };
+}
+export declare function renderEmptyState({ emptyState }: EmptyStateProps): VNode;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "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",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.0.11"
+    "@alaarab/ogrid-vue": "2.0.13"
   },
   "peerDependencies": {
     "vue": "^3.3.0",