@nu-grid/nuxt 0.1.4 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nu-grid/nuxt",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "description": "A powerful data grid component for Nuxt with virtualization, cell editing, and TanStack Table integration",
   "license": "MIT",
   "homepage": "https://www.nu-grid.dev",
@@ -52,7 +52,8 @@
   ],
   "peerDependencies": {
     "@nuxt/ui": "^4.0.0",
-    "@vueuse/nuxt": "^14.0.0"
+    "@vueuse/nuxt": "^14.0.0",
+    "reka-ui": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "write-excel-file": {

package/dist/runtime/components/NuGridGroup.d.vue.ts

@@ -1,20 +0,0 @@
-import type { TableData, TableSlots } from '@nuxt/ui';
-import type { NuGridProps } from '../types/index.js';
-declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<NuGridProps<T>> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: TableSlots<T>;
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};

package/dist/runtime/components/NuGridGroup.vue

@@ -1,650 +0,0 @@
-<script setup>
-import { FlexRender } from "@tanstack/vue-table";
-import { createReusableTemplate, useElementSize } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { upperFirst } from "scule";
-import { computed, inject, ref, toValue } from "vue";
-import {
-  getHeaderEffectivePinning,
-  getHeaderPinningStyle,
-  resolveStyleObject,
-  resolveValue,
-  useNuGridGroupSelection
-} from "../composables/_internal";
-import NuGridAddRow from "./_internal/NuGridAddRow.vue";
-import NuGridColumnMenu from "./_internal/NuGridColumnMenu.vue";
-import NuGridGroupCheckbox from "./_internal/NuGridGroupCheckbox.vue";
-import NuGridHeaderSortButton from "./_internal/NuGridHeaderSortButton.vue";
-import NuGridRow from "./_internal/NuGridRow.vue";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  ui: { type: null, required: false },
-  preset: { type: String, required: false },
-  focus: { type: Object, required: false },
-  editing: { type: Object, required: false },
-  validation: { type: [Boolean, Object], required: false },
-  selection: { type: [Boolean, String, Object], required: false },
-  actions: { type: [Boolean, Object], required: false },
-  columnDefaults: { type: Object, required: false },
-  layout: { type: Object, required: false },
-  tooltip: { type: [Boolean, Object], required: false },
-  multiRow: { type: [Boolean, Object], required: false },
-  animation: { type: [Boolean, Object], required: false },
-  paging: { type: [Boolean, Object], required: false },
-  state: { type: [Boolean, Object], required: false },
-  theme: { type: [String, Object], required: false },
-  virtualization: { type: [Boolean, Object], required: false },
-  cellTypes: { type: Array, required: false },
-  skipAutoSizeColumns: { type: Array, required: false },
-  rowDragOptions: { type: Object, required: false },
-  rowId: { type: [String, Function], required: false },
-  addNewRow: { type: [Boolean, Object], required: false },
-  as: { type: null, required: false },
-  data: { type: Array, required: false },
-  columns: { type: Array, required: false },
-  caption: { type: String, required: false },
-  meta: { type: Object, required: false },
-  empty: { type: String, required: false },
-  sticky: { type: [Boolean, String], required: false },
-  loading: { type: Boolean, required: false },
-  loadingColor: { type: null, required: false },
-  loadingAnimation: { type: null, required: false },
-  watchOptions: { type: Object, required: false },
-  globalFilterOptions: { type: Object, required: false },
-  columnFiltersOptions: { type: Object, required: false },
-  columnPinningOptions: { type: Object, required: false },
-  columnSizingOptions: { type: Object, required: false },
-  visibilityOptions: { type: Object, required: false },
-  sortingOptions: { type: Object, required: false },
-  groupingOptions: { type: Object, required: false },
-  expandedOptions: { type: Object, required: false },
-  rowSelectionOptions: { type: Object, required: false },
-  rowPinningOptions: { type: Object, required: false },
-  paginationOptions: { type: Object, required: false },
-  facetedOptions: { type: Object, required: false },
-  onSelect: { type: Function, required: false },
-  onHover: { type: Function, required: false },
-  onContextmenu: { type: [Function, Array], required: false },
-  class: { type: null, required: false },
-  onStateChange: { type: Function, required: false },
-  renderFallbackValue: { type: null, required: false },
-  _features: { type: Array, required: false },
-  autoResetAll: { type: Boolean, required: false },
-  debugAll: { type: Boolean, required: false },
-  debugCells: { type: Boolean, required: false },
-  debugColumns: { type: Boolean, required: false },
-  debugHeaders: { type: Boolean, required: false },
-  debugRows: { type: Boolean, required: false },
-  debugTable: { type: Boolean, required: false },
-  defaultColumn: { type: Object, required: false },
-  getRowId: { type: Function, required: false },
-  getSubRows: { type: Function, required: false },
-  initialState: { type: Object, required: false },
-  mergeOptions: { type: Function, required: false }
-});
-const slots = defineSlots();
-const coreContext = inject("nugrid-core");
-const dragContext = inject("nugrid-drag");
-const resizeContext = inject("nugrid-resize");
-const virtualizationContext = inject("nugrid-virtualization");
-const groupingContext = inject("nugrid-grouping");
-const performanceContext = inject("nugrid-performance");
-const uiConfigContext = inject("nugrid-ui-config");
-const rowInteractionsContext = inject("nugrid-row-interactions");
-const addRowContext = inject("nugrid-add-row");
-if (!coreContext || !dragContext || !resizeContext || !virtualizationContext || !groupingContext || !performanceContext || !uiConfigContext || !rowInteractionsContext || !addRowContext) {
-  throw new Error("NuGridGroup must be used within a NuGrid component.");
-}
-const { tableRef, rootRef, tableApi, ui, hasFooter, propsUi } = coreContext;
-const { dragFns, rowDragOptions } = dragContext;
-const { handleGroupResizeStart, resizingGroupId, resizingColumnId } = resizeContext;
-const { stickyEnabled } = virtualizationContext;
-const { groupingFns } = groupingContext;
-const { headerGroups, headerGroupsLength, footerGroups } = performanceContext;
-const {
-  sortIcons: gridSortIcons,
-  scrollbarClass,
-  scrollbarThemeClass,
-  scrollbarAttr
-} = uiConfigContext;
-const { rowSelectionMode } = rowInteractionsContext;
-const [DefineTableTemplate, ReuseNuGridTemplate] = createReusableTemplate({ inheritAttrs: false });
-const [DefineGroupSubheaderTemplate, ReuseGroupSubheaderTemplate] = createReusableTemplate({ inheritAttrs: false });
-const [DefineHeaderCellTemplate, ReuseHeaderCellTemplate] = createReusableTemplate({ inheritAttrs: false });
-if (!groupingFns) {
-  throw new Error(
-    'NuGridGroup requires groupingFns from context. Ensure gridMode="group" is set on NuGrid.'
-  );
-}
-const {
-  groupRows,
-  groupedRows,
-  virtualRowItems,
-  virtualizer,
-  virtualizationEnabled,
-  toggleGroup,
-  isGroupExpanded,
-  getVirtualItemHeight,
-  stickyOffsets,
-  groupingRowHeights,
-  headerGroupCount
-} = groupingFns;
-const { toggleAllGroupRows, getGroupCheckboxState } = useNuGridGroupSelection(tableApi, groupedRows);
-const rowSelectionEnabled = computed(() => {
-  const mode = rowSelectionMode.value;
-  return mode === true || mode === "single" || mode === "multi" || typeof mode === "object" && !mode.hidden;
-});
-const dynamicRowHeightsEnabled = computed(() => {
-  if (!virtualizer || !virtualizer.value.dynamicRowHeightsEnabled) {
-    return false;
-  }
-  return !!virtualizer.value.dynamicRowHeightsEnabled.value;
-});
-const columnHeadersRef = ref(null);
-const { height: measuredColumnHeaderHeight } = useElementSize(columnHeadersRef);
-const nonVirtStickyTop = computed(() => {
-  if (measuredColumnHeaderHeight.value > 0) {
-    return measuredColumnHeaderHeight.value;
-  }
-  return headerGroupCount.value * groupingRowHeights.value.columnHeader;
-});
-function virtStyle(virtualRow) {
-  const item = virtualRowItems.value[virtualRow.index];
-  const useDynamicHeight = dynamicRowHeightsEnabled.value;
-  const stickyTop = stickyOffsets.value.get(virtualRow.index);
-  const resolvedHeight = getVirtualItemHeight(virtualRow.index);
-  if (stickyEnabled.value && item?.type === "column-headers") {
-    if (stickyTop !== void 0) {
-      return {
-        position: "sticky",
-        top: `${stickyTop}px`,
-        left: 0,
-        width: "100%",
-        zIndex: 30,
-        ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
-        backgroundColor: "var(--ui-bg)",
-        // Shadow extends only above to cover subpixel gap at top
-        boxShadow: "0 -1px 0 var(--ui-bg)"
-      };
-    }
-    return {
-      position: "absolute",
-      top: 0,
-      width: "100%",
-      zIndex: 30,
-      ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
-      transform: `translateY(${virtualRow.start}px)`,
-      backgroundColor: "var(--ui-bg)"
-    };
-  }
-  if (stickyEnabled.value && item?.type === "group-header") {
-    if (stickyTop !== void 0) {
-      return {
-        position: "sticky",
-        top: `${stickyTop}px`,
-        width: "100%",
-        zIndex: 20,
-        ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
-        backgroundColor: "var(--ui-bg)"
-      };
-    }
-    return {
-      position: "absolute",
-      top: 0,
-      width: "100%",
-      zIndex: 20,
-      ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
-      transform: `translateY(${virtualRow.start}px)`,
-      backgroundColor: "var(--ui-bg)"
-    };
-  }
-  return {
-    position: "absolute",
-    top: 0,
-    width: "100%",
-    ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
-    transform: `translateY(${virtualRow.start}px)`
-  };
-}
-function measureElementRef(el) {
-  if (el && virtualizer && virtualizer.value.dynamicRowHeightsEnabled.value) {
-    virtualizer.value.measureElement(el);
-  }
-}
-</script>
-
-<template>
-  <!-- Reusable Group Subheader Template -->
-  <DefineGroupSubheaderTemplate v-slot="{ groupId, groupRow, itemCount, depth = 0 }">
-    <div
-      :data-group-header="groupId"
-      :class="ui.groupHeader({ class: [propsUi?.groupHeader] })"
-      :style="{ width: `${tableApi.getTotalSize()}px` }"
-    >
-      <!-- Fixed left part (doesn't scroll horizontally) -->
-      <div
-        :class="ui.groupHeaderLeft({ class: [propsUi?.groupHeaderLeft] })"
-        :style="{ paddingLeft: depth > 0 ? `${depth * 24}px` : void 0 }"
-      >
-        <!-- Group selection checkbox -->
-        <NuGridGroupCheckbox
-          v-if="rowSelectionEnabled"
-          :model-value="getGroupCheckboxState(groupId)"
-          :aria-label="`Select all in group ${groupId}`"
-          class="mr-2"
-          @click.stop
-          @update:model-value="
-  (value) => toggleAllGroupRows(groupId, !!value)
-"
-        />
-        <div class="flex cursor-pointer items-center gap-3" @click="toggleGroup(groupId)">
-          <UIcon
-            :name="isGroupExpanded(groupId) ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            :class="ui.groupIcon({ class: [propsUi?.groupIcon] })"
-          />
-          <template v-if="groupRow?.groupingColumnId">
-            <span :class="ui.groupLabel({ class: [propsUi?.groupLabel] })">
-              {{ upperFirst(groupRow.groupingColumnId) }}:
-            </span>
-            <span class="text-base font-semibold">
-              {{ groupRow.getGroupingValue(groupRow.groupingColumnId) }}
-            </span>
-          </template>
-          <span :class="ui.groupLabel({ class: [propsUi?.groupLabel] })">
-            ({{ itemCount }} items)
-          </span>
-        </div>
-      </div>
-      <!-- Spacer that scrolls (optional, for visual continuity) -->
-      <div :class="ui.groupHeaderSpacer({ class: [propsUi?.groupHeaderSpacer] })" />
-    </div>
-  </DefineGroupSubheaderTemplate>
-
-  <!-- Reusable Header Cell Template -->
-  <DefineHeaderCellTemplate v-slot="{ header, rowIndex }">
-    <div
-      :data-column-id="header.column.id"
-      :data-pinned="header.column.getIsPinned()"
-      :data-dragging="toValue(dragFns.draggedColumnId) === header.column.id"
-      :data-drop-target="toValue(dragFns.dropTargetColumnId) === header.column.id"
-      :data-drop-position="
-  toValue(dragFns.dropTargetColumnId) === header.column.id ? toValue(dragFns.dropPosition) : void 0
-"
-      :class="[
-  ui.th({
-    class: [
-      propsUi?.th,
-      rowIndex < headerGroupsLength - 1 ? 'rounded-b-none!' : '',
-      headerGroupsLength > 1 && rowIndex === headerGroupsLength - 1 ? 'rounded-t-none!' : '',
-      resolveValue(header.column.columnDef.meta?.class?.th, header)
-    ],
-    pinned: !!getHeaderEffectivePinning(header),
-    colDragging: toValue(dragFns.draggedColumnId) === header.column.id,
-    colDropTarget: toValue(dragFns.dropTargetColumnId) === header.column.id
-  })
-]"
-      :style="{
-  ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
-  ...getHeaderPinningStyle(header),
-  ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
-}"
-      @dragover="
-  (e) => dragFns.isHeaderDraggable(header) && dragFns.handleColumnDragOver(e, header.column.id)
-"
-      @dragenter="dragFns.handleColumnDragEnter"
-      @drop="
-  (e) => dragFns.isHeaderDraggable(header) && dragFns.handleColumnDrop(e, header.column.id)
-"
-      @dragend="dragFns.handleColumnDragEnd"
-      @dragleave="dragFns.handleColumnDragLeave"
-    >
-      <div :class="ui.headerContainer({ class: [propsUi?.headerContainer] })">
-        <div
-          :draggable="dragFns.isHeaderDraggable(header)"
-          :class="
-  ui.thInner({
-    class: [propsUi?.thInner],
-    colDraggable: dragFns.isHeaderDraggable(header)
-  })
-"
-          @dragstart="
-  (e) => dragFns.isHeaderDraggable(header) && dragFns.handleColumnDragStart(e, header.column.id)
-"
-        >
-          <slot :name="`${header.id}-header`" v-bind="header.getContext()">
-            <FlexRender
-              v-if="!header.isPlaceholder"
-              :render="header.column.columnDef.header"
-              :props="header.getContext()"
-            />
-          </slot>
-          <NuGridHeaderSortButton
-            v-if="
-  (header.column.columnDef.sortIcons?.position ?? gridSortIcons?.position ?? 'edge') === 'inline'
-"
-            :header="header"
-            :sort-icons="header.column.columnDef.sortIcons"
-          />
-        </div>
-        <NuGridHeaderSortButton
-          v-if="
-  (header.column.columnDef.sortIcons?.position ?? gridSortIcons?.position ?? 'edge') === 'edge'
-"
-          :header="header"
-          :sort-icons="header.column.columnDef.sortIcons"
-        />
-        <NuGridColumnMenu
-          v-if="header.colSpan === 1 && rowIndex === headerGroupsLength - 1"
-          :header="header"
-        />
-
-        <!-- Column resize handle (works for both regular columns and column groups) -->
-        <div
-          v-if="header.column.getCanResize() || header.colSpan > 1"
-          :class="
-  ui.colResizeHandle({
-    class: [propsUi?.colResizeHandle],
-    colResizing: header.colSpan > 1 ? resizingGroupId === header.id : resizingColumnId === header.column.id || header.column.getIsResizing()
-  })
-"
-          :data-col-resizing="
-  header.colSpan > 1 ? resizingGroupId === header.id : resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
-"
-          @mousedown="handleGroupResizeStart($event, header)"
-          @touchstart.passive="handleGroupResizeStart($event, header)"
-        >
-          <div
-            :class="
-  ui.colResizer({
-    class: [propsUi?.colResizer],
-    colResizing: header.colSpan > 1 ? resizingGroupId === header.id : resizingColumnId === header.column.id || header.column.getIsResizing()
-  })
-"
-            :data-col-resizing="
-  header.colSpan > 1 ? resizingGroupId === header.id : resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
-"
-          />
-        </div>
-      </div>
-    </div>
-  </DefineHeaderCellTemplate>
-
-  <DefineTableTemplate>
-    <div ref="tableRef" :class="ui.base({ class: [propsUi?.base] })">
-      <div v-if="caption || !!slots.caption" :class="ui.caption({ class: [propsUi?.caption] })">
-        <slot name="caption">
-          {{ caption }}
-        </slot>
-      </div>
-
-      <!-- Column headers shown once at the top (non-virtualized) -->
-      <div
-        v-if="!virtualizationEnabled"
-        ref="columnHeadersRef"
-        :class="[
-  ui.thead({ class: [propsUi?.thead] }),
-  stickyEnabled ? ui.stickyColumnHeader({ class: [propsUi?.stickyColumnHeader] }) : {}
-]"
-        :data-sticky-header="stickyEnabled ? 'true' : void 0"
-      >
-        <div
-          v-for="(headerGroup, rowIndex) in headerGroups"
-          :key="headerGroup.id"
-          :class="ui.tr({ class: propsUi?.tr })"
-        >
-          <!-- Drag handle header placeholder -->
-          <div
-            v-if="rowDragOptions.enabled"
-            :class="[
-  ui.th({ class: [propsUi?.th] }),
-  ui.rowDragHeaderHandle({ class: [propsUi?.rowDragHeaderHandle] })
-]"
-          />
-          <ReuseHeaderCellTemplate
-            v-for="header in headerGroup.headers"
-            :key="header.id"
-            :header="header"
-            :row-index="rowIndex"
-          />
-        </div>
-        <div :class="ui.separator({ class: [propsUi?.separator] })" />
-      </div>
-
-      <div
-        data-tbody
-        :class="ui.tbody({ class: [propsUi?.tbody] })"
-        :style="
-  virtualizationEnabled && virtualizer ? {
-    height: `${virtualizer.getTotalSize()}px`,
-    position: 'relative'
-  } : void 0
-"
-      >
-        <slot name="body-top" />
-
-        <template v-if="groupRows.length">
-          <!-- Virtualized rendering -->
-          <template v-if="virtualizationEnabled && virtualizer">
-            <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="virtualRow.index">
-              <div
-                :ref="
-  virtualizer && virtualizer.dynamicRowHeightsEnabled.value ? measureElementRef : void 0
-"
-                :data-index="virtualRow.index"
-                :style="virtStyle(virtualRow)"
-              >
-                <template v-if="virtualRowItems[virtualRow.index]">
-                  <!-- Column Headers (shown once at top in virtualized mode) -->
-                  <template v-if="virtualRowItems[virtualRow.index]?.type === 'column-headers'">
-                    <div
-                      :class="[
-  ui.thead({ class: [propsUi?.thead] }),
-  stickyEnabled ? ui.stickyColumnHeader({ class: [propsUi?.stickyColumnHeader] }) : {}
-]"
-                      :data-sticky-header="stickyEnabled ? 'true' : void 0"
-                    >
-                      <div
-                        v-for="(headerGroup, rowIndex) in headerGroups"
-                        :key="headerGroup.id"
-                        :class="ui.tr({ class: propsUi?.tr })"
-                      >
-                        <!-- Drag handle header placeholder -->
-                        <div
-                          v-if="rowDragOptions.enabled"
-                          :class="[
-  'w-10 max-w-10 min-w-10 shrink-0',
-  ui.th({ class: [propsUi?.th] })
-]"
-                        />
-                        <ReuseHeaderCellTemplate
-                          v-for="header in headerGroup.headers"
-                          :key="header.id"
-                          :header="header"
-                          :row-index="rowIndex"
-                        />
-                      </div>
-                    </div>
-                  </template>
-
-                  <!-- Group Subheader -->
-                  <ReuseGroupSubheaderTemplate
-                    v-else-if="virtualRowItems[virtualRow.index]?.type === 'group-header'"
-                    :group-id="virtualRowItems[virtualRow.index]?.groupId"
-                    :group-row="virtualRowItems[virtualRow.index]?.groupRow"
-                    :item-count="
-  groupedRows[virtualRowItems[virtualRow.index]?.groupId]?.filter(
-    (row) => !addRowContext.isAddRowRow(row)
-  ).length || 0
-"
-                    :depth="virtualRowItems[virtualRow.index]?.depth ?? 0"
-                  />
-
-                  <!-- Data Row -->
-                  <component
-                    :is="
-  addRowContext.isAddRowRow(virtualRowItems[virtualRow.index]?.dataRow) ? NuGridAddRow : NuGridRow
-"
-                    v-else-if="
-  virtualRowItems[virtualRow.index]?.type === 'data' && virtualRowItems[virtualRow.index]?.dataRow
-"
-                    :row="virtualRowItems[virtualRow.index]?.dataRow"
-                  />
-
-                  <!-- Footer Row -->
-                  <div
-                    v-else-if="virtualRowItems[virtualRow.index]?.type === 'footer'"
-                    :class="ui.tfoot({ class: [propsUi?.tfoot] })"
-                  >
-                    <div :class="ui.separator({ class: [propsUi?.separator] })" />
-                    <div
-                      v-for="footerGroup in footerGroups"
-                      :key="footerGroup.id"
-                      :class="ui.tr({ class: [propsUi?.tr] })"
-                    >
-                      <div
-                        v-for="header in footerGroup.headers"
-                        :key="header.id"
-                        :data-pinned="header.column.getIsPinned()"
-                        :class="[
-  ui.th({
-    class: [
-      propsUi?.th,
-      resolveValue(header.column.columnDef.meta?.class?.th, header)
-    ],
-    pinned: !!getHeaderEffectivePinning(header)
-  })
-]"
-                        :style="{
-  ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
-  ...getHeaderPinningStyle(header),
-  ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
-  ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
-}"
-                      >
-                        <div :class="ui.footerContent({ class: [propsUi?.footerContent] })">
-                          <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
-                            <FlexRender
-                              v-if="!header.isPlaceholder"
-                              :render="header.column.columnDef.footer"
-                              :props="header.getContext()"
-                            />
-                          </slot>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </template>
-          </template>
-
-          <!-- Non-virtualized rendering -->
-          <template v-else>
-            <template v-for="item in virtualRowItems" :key="item.index">
-              <!-- Group Subheader Row - uses measured column header height for accurate sticky positioning -->
-              <div
-                v-if="item.type === 'group-header'"
-                :class="[stickyEnabled ? 'sticky top-(--header-height,0px) z-20 bg-default' : '']"
-                :style="stickyEnabled ? { '--header-height': `${nonVirtStickyTop}px` } : {}"
-              >
-                <ReuseGroupSubheaderTemplate
-                  :group-id="item.groupId"
-                  :group-row="item.groupRow"
-                  :item-count="
-  groupedRows[item.groupId]?.filter((row) => !addRowContext.isAddRowRow(row)).length || 0
-"
-                  :depth="item.depth ?? 0"
-                />
-              </div>
-
-              <!-- Data rows for this group (only if expanded) -->
-              <template v-else-if="item.type === 'data' && item.dataRow">
-                <component
-                  :is="addRowContext.isAddRowRow(item.dataRow) ? NuGridAddRow : NuGridRow"
-                  :key="item.dataRow.id"
-                  :row="item.dataRow"
-                />
-              </template>
-            </template>
-          </template>
-        </template>
-
-        <div v-else-if="loading && !!slots.loading" :class="ui.tr({ class: propsUi?.tr })">
-          <div :class="ui.loading({ class: propsUi?.loading })">
-            <slot name="loading" />
-          </div>
-        </div>
-
-        <div v-else :class="ui.tr({ class: propsUi?.tr })">
-          <div :class="ui.empty({ class: propsUi?.empty })">
-            <slot name="empty">
-              {{ empty || "No data available." }}
-            </slot>
-          </div>
-        </div>
-
-        <slot name="body-bottom" />
-      </div>
-
-      <!-- Footer (non-virtualized, only when not in groups or no data) -->
-      <div
-        v-if="hasFooter && !virtualizationEnabled && groupRows.length === 0"
-        :class="ui.tfoot({ class: [propsUi?.tfoot] })"
-      >
-        <div :class="ui.separator({ class: [propsUi?.separator] })" />
-
-        <div
-          v-for="footerGroup in footerGroups"
-          :key="footerGroup.id"
-          :class="ui.tr({ class: [propsUi?.tr] })"
-        >
-          <div
-            v-for="header in footerGroup.headers"
-            :key="header.id"
-            :data-pinned="header.column.getIsPinned()"
-            :class="[
-  ui.th({
-    class: [propsUi?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)],
-    pinned: !!getHeaderEffectivePinning(header)
-  })
-]"
-            :style="{
-  ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
-  ...getHeaderPinningStyle(header),
-  ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
-  ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
-}"
-          >
-            <div :class="ui.footerContent({ class: [propsUi?.footerContent] })">
-              <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
-                <FlexRender
-                  v-if="!header.isPlaceholder"
-                  :render="header.column.columnDef.footer"
-                  :props="header.getContext()"
-                />
-              </slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DefineTableTemplate>
-
-  <Primitive
-    ref="rootRef"
-    :as="as"
-    :class="[ui.root({ class: [propsUi?.root, props.class] }), scrollbarThemeClass, scrollbarClass]"
-    :data-scrollbars="scrollbarAttr"
-  >
-    <ReuseNuGridTemplate />
-  </Primitive>
-</template>