@nu-grid/nuxt 0.1.1

package/dist/runtime/components/_internal/NuGridBase.vue

@@ -0,0 +1,1172 @@
+<script setup>
+import { FlexRender } from "@tanstack/vue-table";
+import { createReusableTemplate } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { computed, inject } from "vue";
+import {
+  getHeaderEffectivePinning,
+  getHeaderPinningStyle,
+  resolveStyleObject,
+  resolveValue
+} from "../../composables/_internal";
+import NuGridAddRow from "./NuGridAddRow.vue";
+import NuGridColumnMenu from "./NuGridColumnMenu.vue";
+import NuGridHeaderSortButton from "./NuGridHeaderSortButton.vue";
+import NuGridRow from "./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 performanceContext = inject("nugrid-performance");
+const uiConfigContext = inject("nugrid-ui-config");
+const addRowContext = inject("nugrid-add-row");
+const multiRowContext = inject("nugrid-multi-row");
+const animationContext = inject("nugrid-animation");
+if (!coreContext || !dragContext || !resizeContext || !virtualizationContext || !performanceContext || !uiConfigContext || !addRowContext || !animationContext) {
+  throw new Error("NuGridBase must be used within a NuGrid component.");
+}
+const animationEnabled = animationContext.enabled;
+const { tableRef, rootRef, tableApi, ui, hasFooter, rows: contextRows, propsUi } = coreContext;
+const rows = computed(() => {
+  const currentRows = contextRows.value ?? [];
+  return [...currentRows];
+});
+const { dragFns, rowDragOptions } = dragContext;
+const { handleResizeStart, handleGroupResizeStart, resizingGroupId, resizingColumnId } = resizeContext;
+const {
+  virtualizer,
+  virtualizationEnabled,
+  virtualRowItems,
+  getVirtualItemHeight,
+  stickyOffsets,
+  stickyEnabled
+} = virtualizationContext;
+const { headerGroups, headerGroupsLength, footerGroups } = performanceContext;
+const {
+  sortIcons: gridSortIcons,
+  scrollbarClass,
+  scrollbarThemeClass,
+  scrollbarAttr
+} = uiConfigContext;
+const multiRowEnabled = computed(() => multiRowContext?.enabled.value ?? false);
+const multiRowCount = computed(() => multiRowContext?.rowCount.value ?? 1);
+const alignColumns = computed(() => multiRowContext?.alignColumns.value ?? false);
+const row0Columns = computed(() => multiRowContext?.row0Columns.value ?? []);
+const leftPinnedWidth = computed(() => {
+  if (!alignColumns.value) return 0;
+  return row0Columns.value.filter((col) => col.pinned === "left").reduce((sum, col) => sum + col.width, 0);
+});
+const rightPinnedWidth = computed(() => {
+  if (!alignColumns.value) return 0;
+  return row0Columns.value.filter((col) => col.pinned === "right").reduce((sum, col) => sum + col.width, 0);
+});
+const headersByVisualRow = computed(() => {
+  const groups = headerGroups.value;
+  if (!multiRowEnabled.value || multiRowCount.value <= 1 || groups.length === 0) {
+    return null;
+  }
+  const leafHeaderGroup = groups[groups.length - 1];
+  if (!leafHeaderGroup) return null;
+  const grouped = Array.from({ length: multiRowCount.value }, () => []);
+  leafHeaderGroup.headers.forEach((header) => {
+    const rowNum = header.column.columnDef.row ?? 0;
+    const clampedRow = Math.max(0, Math.min(rowNum, multiRowCount.value - 1));
+    if (alignColumns.value && clampedRow > 0 && header.column.getIsPinned()) {
+      return;
+    }
+    grouped[clampedRow].push(header);
+  });
+  return grouped;
+});
+function getMultiRowHeaderPinningStyle(header, visualRowHeaders) {
+  const pinned = header.column.getIsPinned();
+  if (!pinned) return {};
+  if (pinned === "left") {
+    let leftOffset = 0;
+    for (const h of visualRowHeaders) {
+      if (h.column.id === header.column.id) break;
+      if (h.column.getIsPinned() === "left") {
+        leftOffset += h.getSize();
+      }
+    }
+    return {
+      position: "sticky",
+      left: `${leftOffset}px`,
+      zIndex: 20
+    };
+  }
+  if (pinned === "right") {
+    let rightOffset = 0;
+    let foundSelf = false;
+    for (const h of visualRowHeaders) {
+      if (h.column.id === header.column.id) {
+        foundSelf = true;
+        continue;
+      }
+      if (foundSelf && h.column.getIsPinned() === "right") {
+        rightOffset += h.getSize();
+      }
+    }
+    return {
+      position: "sticky",
+      right: `${rightOffset}px`,
+      zIndex: 20
+    };
+  }
+  return {};
+}
+function getAlignedHeaderStyle(header, visualRowIndex, headerIndexInRow, totalHeadersInRow) {
+  const isPinned = header.column.getIsPinned();
+  if (isPinned) {
+    return {
+      width: `${header.getSize()}px`,
+      minWidth: `${header.getSize()}px`,
+      maxWidth: `${header.getSize()}px`,
+      flexShrink: 0
+    };
+  }
+  if (visualRowIndex === 0 || !alignColumns.value) {
+    return {
+      flexGrow: 1,
+      flexBasis: `${header.getSize()}px`,
+      minWidth: `${header.column.columnDef.minSize ?? 50}px`
+    };
+  }
+  const row0Cols = row0Columns.value;
+  let leftPinnedEnd = 0;
+  while (leftPinnedEnd < row0Cols.length && row0Cols[leftPinnedEnd]?.pinned === "left") {
+    leftPinnedEnd++;
+  }
+  const firstRightPinnedIdx = row0Cols.findIndex(
+    (col, idx) => idx >= leftPinnedEnd && col.pinned === "right"
+  );
+  const unpinnedEndIdx = firstRightPinnedIdx === -1 ? row0Cols.length : firstRightPinnedIdx;
+  const unpinnedSlots = unpinnedEndIdx - leftPinnedEnd;
+  const span = header.column.columnDef.span;
+  let slotsToSpan = 1;
+  let flexBasis = 0;
+  let minWidth = 0;
+  const isLastHeader = headerIndexInRow === totalHeadersInRow - 1;
+  if (span === "*" || isLastHeader) {
+    const remainingSlots = Math.max(1, unpinnedSlots - headerIndexInRow);
+    slotsToSpan = remainingSlots;
+    for (let i = 0; i < remainingSlots && leftPinnedEnd + headerIndexInRow + i < unpinnedEndIdx; i++) {
+      const slotIdx = leftPinnedEnd + headerIndexInRow + i;
+      if (slotIdx < row0Cols.length) {
+        flexBasis += row0Cols[slotIdx].width;
+        minWidth += row0Cols[slotIdx].minWidth;
+      }
+    }
+  } else if (typeof span === "number" && span > 1) {
+    slotsToSpan = Math.min(span, unpinnedSlots - headerIndexInRow);
+    for (let i = 0; i < slotsToSpan; i++) {
+      const slotIdx = leftPinnedEnd + headerIndexInRow + i;
+      if (slotIdx < row0Cols.length && slotIdx < unpinnedEndIdx) {
+        flexBasis += row0Cols[slotIdx].width;
+        minWidth += row0Cols[slotIdx].minWidth;
+      }
+    }
+  } else {
+    const slotIdx = leftPinnedEnd + headerIndexInRow;
+    if (slotIdx < row0Cols.length && slotIdx < unpinnedEndIdx) {
+      flexBasis = row0Cols[slotIdx].width;
+      minWidth = row0Cols[slotIdx].minWidth;
+    } else {
+      flexBasis = header.getSize();
+      minWidth = header.column.columnDef.minSize ?? 50;
+    }
+  }
+  return {
+    flexGrow: slotsToSpan,
+    flexBasis: `${flexBasis}px`,
+    minWidth: `${minWidth}px`
+  };
+}
+const [DefineTableTemplate, ReuseNuGridTemplate] = createReusableTemplate({ inheritAttrs: false });
+function measureElementRef(el) {
+  if (el && virtualizer && virtualizer.value.dynamicRowHeightsEnabled.value) {
+    virtualizer.value.measureElement(el);
+  }
+}
+const totalTableWidth = computed(() => `${tableApi.getTotalSize()}px`);
+function getVirtualItemStyle(type, virtualRow) {
+  if (!virtualizer) {
+    return {};
+  }
+  const useDynamicHeight = virtualizer.value.dynamicRowHeightsEnabled?.value ?? false;
+  const stickyTop = stickyOffsets.value.get(virtualRow.index);
+  const resolvedHeight = getVirtualItemHeight(virtualRow.index);
+  const width = totalTableWidth.value;
+  if (stickyEnabled.value && type === "column-headers") {
+    if (stickyTop !== void 0) {
+      return {
+        position: "sticky",
+        top: `${stickyTop}px`,
+        left: 0,
+        width,
+        zIndex: 30,
+        ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
+        backgroundColor: "var(--ui-bg)"
+      };
+    }
+    return {
+      position: "absolute",
+      top: 0,
+      width,
+      zIndex: 30,
+      ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
+      transform: `translateY(${virtualRow.start}px)`,
+      backgroundColor: "var(--ui-bg)"
+    };
+  }
+  return {
+    position: "absolute",
+    top: 0,
+    width,
+    ...useDynamicHeight ? {} : { height: `${resolvedHeight}px` },
+    transform: `translateY(${virtualRow.start}px)`
+  };
+}
+</script>
+
+<template>
+  <Primitive
+    ref="rootRef"
+    :as="as"
+    :class="[ui.root({ class: [propsUi?.root, props.class] }), scrollbarThemeClass, scrollbarClass]"
+    :style="{
+  '--nugrid-animation-duration': animationEnabled ? `${animationContext.duration.value}ms` : void 0,
+  '--nugrid-animation-easing': animationEnabled ? animationContext.easing.value : void 0
+}"
+    :data-scrollbars="scrollbarAttr"
+  >
+    <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>
+
+        <!-- Multi-row headers: render headers grouped by visual row -->
+        <div
+          v-if="!virtualizationEnabled && multiRowEnabled && headersByVisualRow"
+          :class="[
+  ui.thead({ class: [propsUi?.thead] }),
+  stickyEnabled ? ui.stickyColumnHeader({ class: [propsUi?.stickyColumnHeader] }) : {}
+]"
+          :data-sticky-header="stickyEnabled ? 'true' : void 0"
+          data-multi-row-headers="true"
+        >
+          <div
+            v-for="(visualRowHeaders, visualRowIndex) in headersByVisualRow"
+            :key="`visual-row-${visualRowIndex}`"
+            :data-visual-row="visualRowIndex"
+            :class="ui.multiRowHeaderRow({ class: [propsUi?.multiRowHeaderRow] })"
+          >
+            <!-- Drag handle header placeholder (only on first visual row) -->
+            <div
+              v-if="rowDragOptions.enabled && visualRowIndex === 0"
+              :class="[
+  ui.th({ class: [propsUi?.th] }),
+  ui.rowDragHeaderHandle({ class: [propsUi?.rowDragHeaderHandle] })
+]"
+              :style="{ gridRow: `span ${multiRowCount}` }"
+            />
+            <!-- Left pinned spacer for visual rows 1+ (aligns with pinned columns from row 0) -->
+            <div
+              v-if="alignColumns && visualRowIndex > 0 && leftPinnedWidth > 0"
+              class="nugrid-header-pinned-spacer"
+              :style="{
+  width: `${leftPinnedWidth}px`,
+  minWidth: `${leftPinnedWidth}px`,
+  flexShrink: 0,
+  position: 'sticky',
+  left: 0,
+  zIndex: 20,
+  backgroundColor: 'var(--ui-bg-elevated)'
+}"
+            />
+            <div
+              v-for="(header, headerIndex) in visualRowHeaders"
+              :key="header.id"
+              :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,
+      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),
+  ...getAlignedHeaderStyle(
+    header,
+    visualRowIndex,
+    headerIndex,
+    visualRowHeaders.length
+  ),
+  ...getMultiRowHeaderPinningStyle(header, visualRowHeaders)
+}"
+              @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 :header="header" />
+                <div
+                  v-if="header.column.getCanResize()"
+                  :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                  :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                  @mousedown="handleResizeStart($event, header)"
+                  @touchstart.passive="handleResizeStart($event, header)"
+                >
+                  <div
+                    :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                    :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                  />
+                </div>
+              </div>
+            </div>
+            <!-- Right pinned spacer for visual rows 1+ (aligns with pinned columns from row 0) -->
+            <div
+              v-if="alignColumns && visualRowIndex > 0 && rightPinnedWidth > 0"
+              class="nugrid-header-pinned-spacer"
+              :style="{
+  width: `${rightPinnedWidth}px`,
+  minWidth: `${rightPinnedWidth}px`,
+  flexShrink: 0,
+  position: 'sticky',
+  right: 0,
+  zIndex: 20,
+  backgroundColor: 'var(--ui-bg-elevated)'
+}"
+            />
+          </div>
+
+          <div :class="ui.separator({ class: [propsUi?.separator] })" />
+        </div>
+
+        <!-- Standard headers: original single-row rendering -->
+        <div
+          v-else-if="!virtualizationEnabled"
+          :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] })
+]"
+            />
+            <div
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              :data-column-id="header.column.id"
+              :data-pinned="header.column.getIsPinned()"
+              :data-column-group="header.colSpan > 1 ? 'true' : void 0"
+              :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="[
+  header.colSpan > 1 || rowIndex < headerGroupsLength - 1 ? ui.thGroup({
+    class: [
+      propsUi?.thGroup,
+      rowIndex < headerGroupsLength - 1 ? 'rounded-b-none!' : '',
+      resolveValue(header.column.columnDef.meta?.class?.th, header)
+    ],
+    pinned: !!getHeaderEffectivePinning(header)
+  }) : 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.colSpan > 1 ? { flexGrow: header.colSpan } : {},
+  ...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"
+            >
+              <!-- Column Group Header (multi-column spanning or in group row) -->
+              <template v-if="header.colSpan > 1 || rowIndex < headerGroupsLength - 1">
+                <div :class="ui.headerContainer({ class: [propsUi?.headerContainer] })">
+                  <div :class="ui.thGroupInner({ class: [propsUi?.thGroupInner] })">
+                    <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+                      <FlexRender
+                        v-if="!header.isPlaceholder"
+                        :render="header.column.columnDef.header"
+                        :props="header.getContext()"
+                      />
+                    </slot>
+                  </div>
+                  <!-- Group resize handle -->
+                  <div
+                    v-if="header.colSpan > 1"
+                    :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingGroupId === header.id
+  })
+"
+                    :data-col-resizing="resizingGroupId === header.id ? 'true' : void 0"
+                    @mousedown="handleGroupResizeStart($event, header)"
+                    @touchstart.passive="handleGroupResizeStart($event, header)"
+                  >
+                    <div
+                      :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingGroupId === header.id
+  })
+"
+                      :data-col-resizing="resizingGroupId === header.id ? 'true' : void 0"
+                    />
+                  </div>
+                </div>
+              </template>
+              <!-- Regular Column Header -->
+              <template v-else>
+                <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 :header="header" />
+                  <div
+                    v-if="header.column.getCanResize()"
+                    :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                    :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                    @mousedown="handleResizeStart($event, header)"
+                    @touchstart.passive="handleResizeStart($event, header)"
+                  >
+                    <div
+                      :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                      :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                    />
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div :class="ui.separator({ class: [propsUi?.separator] })" />
+        </div>
+
+        <div
+          data-tbody
+          :class="ui.tbody({ class: [propsUi?.tbody] })"
+          :style="
+  virtualizer ? { position: 'relative', height: `${virtualizer.getTotalSize()}px` } : void 0
+"
+        >
+          <slot name="body-top" />
+
+          <template v-if="rows.length">
+            <template v-if="virtualizer && virtualizationEnabled">
+              <template v-for="virtualRow in virtualizer.getVirtualItems()" :key="virtualRow.index">
+                <div
+                  v-if="virtualRowItems[virtualRow.index]?.type === 'column-headers'"
+                  :ref="
+  virtualizer && virtualizer.dynamicRowHeightsEnabled.value ? measureElementRef : void 0
+"
+                  :data-sticky-header="stickyEnabled ? 'true' : void 0"
+                  :data-index="virtualRow.index"
+                  :data-multi-row-headers="
+  multiRowEnabled && headersByVisualRow ? 'true' : void 0
+"
+                  :class="[
+  ui.thead({ class: [propsUi?.thead] }),
+  stickyEnabled ? ui.stickyColumnHeader({ class: [propsUi?.stickyColumnHeader] }) : {}
+]"
+                  :style="getVirtualItemStyle('column-headers', virtualRow)"
+                >
+                  <!-- Multi-row virtualized headers -->
+                  <template v-if="multiRowEnabled && headersByVisualRow">
+                    <div
+                      v-for="(visualRowHeaders, visualRowIndex) in headersByVisualRow"
+                      :key="`virtual-visual-row-${visualRowIndex}-${virtualRow.index}`"
+                      :data-visual-row="visualRowIndex"
+                      :class="ui.multiRowHeaderRow({ class: [propsUi?.multiRowHeaderRow] })"
+                    >
+                      <!-- Drag handle header placeholder (only on first visual row) -->
+                      <div
+                        v-if="rowDragOptions.enabled && visualRowIndex === 0"
+                        :class="[
+  ui.th({ class: [propsUi?.th] }),
+  ui.rowDragHeaderHandle({ class: [propsUi?.rowDragHeaderHandle] })
+]"
+                        :style="{ gridRow: `span ${multiRowCount}` }"
+                      />
+                      <!-- Left pinned spacer for visual rows 1+ -->
+                      <div
+                        v-if="alignColumns && visualRowIndex > 0 && leftPinnedWidth > 0"
+                        class="nugrid-header-pinned-spacer"
+                        :style="{
+  width: `${leftPinnedWidth}px`,
+  minWidth: `${leftPinnedWidth}px`,
+  flexShrink: 0,
+  position: 'sticky',
+  left: 0,
+  zIndex: 20,
+  backgroundColor: 'var(--ui-bg-elevated)'
+}"
+                      />
+                      <div
+                        v-for="(header, headerIndex) in visualRowHeaders"
+                        :key="header.id"
+                        :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,
+      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),
+  ...getAlignedHeaderStyle(
+    header,
+    visualRowIndex,
+    headerIndex,
+    visualRowHeaders.length
+  ),
+  ...getMultiRowHeaderPinningStyle(header, visualRowHeaders)
+}"
+                        @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 :header="header" />
+                          <div
+                            v-if="header.column.getCanResize()"
+                            :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                            :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                            @mousedown="handleResizeStart($event, header)"
+                            @touchstart.passive="handleResizeStart($event, header)"
+                          >
+                            <div
+                              :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                              :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Right pinned spacer for visual rows 1+ -->
+                      <div
+                        v-if="alignColumns && visualRowIndex > 0 && rightPinnedWidth > 0"
+                        class="nugrid-header-pinned-spacer"
+                        :style="{
+  width: `${rightPinnedWidth}px`,
+  minWidth: `${rightPinnedWidth}px`,
+  flexShrink: 0,
+  position: 'sticky',
+  right: 0,
+  zIndex: 20,
+  backgroundColor: 'var(--ui-bg-elevated)'
+}"
+                      />
+                    </div>
+                  </template>
+
+                  <!-- Standard virtualized headers -->
+                  <template v-else>
+                    <div
+                      v-for="(headerGroup, rowIndex) in headerGroups"
+                      :key="`${headerGroup.id}-${virtualRow.index}`"
+                      :class="ui.tr({ class: propsUi?.tr })"
+                    >
+                      <div
+                        v-if="rowDragOptions.enabled"
+                        :class="[
+  ui.th({ class: [propsUi?.th] }),
+  ui.rowDragHeaderHandle({ class: [propsUi?.rowDragHeaderHandle] })
+]"
+                      />
+                      <div
+                        v-for="header in headerGroup.headers"
+                        :key="header.id"
+                        :data-column-id="header.column.id"
+                        :data-pinned="header.column.getIsPinned()"
+                        :data-column-group="header.colSpan > 1 ? 'true' : void 0"
+                        :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="[
+  header.colSpan > 1 || rowIndex < headerGroupsLength - 1 ? ui.thGroup({
+    class: [
+      propsUi?.thGroup,
+      rowIndex < headerGroupsLength - 1 ? 'rounded-b-none!' : '',
+      resolveValue(header.column.columnDef.meta?.class?.th, header)
+    ],
+    pinned: !!getHeaderEffectivePinning(header)
+  }) : 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.colSpan > 1 ? { flexGrow: header.colSpan } : {},
+  ...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"
+                      >
+                        <!-- Column Group Header (multi-column spanning or in group row) -->
+                        <template v-if="header.colSpan > 1 || rowIndex < headerGroupsLength - 1">
+                          <div :class="ui.headerContainer({ class: [propsUi?.headerContainer] })">
+                            <div :class="ui.thGroupInner({ class: [propsUi?.thGroupInner] })">
+                              <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+                                <FlexRender
+                                  v-if="!header.isPlaceholder"
+                                  :render="header.column.columnDef.header"
+                                  :props="header.getContext()"
+                                />
+                              </slot>
+                            </div>
+                            <!-- Group resize handle -->
+                            <div
+                              v-if="header.colSpan > 1"
+                              :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingGroupId === header.id
+  })
+"
+                              @mousedown="handleGroupResizeStart($event, header)"
+                              @touchstart.passive="handleGroupResizeStart($event, header)"
+                            >
+                              <div
+                                :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingGroupId === header.id
+  })
+"
+                              />
+                            </div>
+                          </div>
+                        </template>
+                        <!-- Regular Column Header -->
+                        <template v-else>
+                          <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 :header="header" />
+                            <div
+                              v-if="header.column.getCanResize()"
+                              :class="
+  ui.colResizeHandle({
+    class: [propsUi?.colResizeHandle],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                              :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                              @mousedown="handleResizeStart($event, header)"
+                              @touchstart.passive="handleResizeStart($event, header)"
+                            >
+                              <div
+                                :class="
+  ui.colResizer({
+    class: [propsUi?.colResizer],
+    colResizing: resizingColumnId === header.column.id || header.column.getIsResizing()
+  })
+"
+                                :data-col-resizing="
+  resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
+"
+                              />
+                            </div>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </template>
+
+                  <div :class="ui.separator({ class: [propsUi?.separator] })" />
+                </div>
+
+                <component
+                  :is="
+  addRowContext.isAddRowRow(virtualRowItems[virtualRow.index]?.dataRow) ? NuGridAddRow : NuGridRow
+"
+                  v-else-if="virtualRowItems[virtualRow.index]?.type === 'data'"
+                  :key="virtualRowItems[virtualRow.index]?.dataRow?.id"
+                  :row="virtualRowItems[virtualRow.index]?.dataRow"
+                  :data-index="virtualRow.index"
+                  :data-row-id="virtualRowItems[virtualRow.index]?.dataRow?.id"
+                  :measure-ref="
+  virtualizer && virtualizer.dynamicRowHeightsEnabled.value ? measureElementRef : void 0
+"
+                  :style="getVirtualItemStyle('data', virtualRow)"
+                />
+
+                <div
+                  v-else-if="virtualRowItems[virtualRow.index]?.type === 'footer'"
+                  :ref="
+  virtualizer && virtualizer.dynamicRowHeightsEnabled.value ? measureElementRef : void 0
+"
+                  :data-index="virtualRow.index"
+                  :class="ui.tfoot({ class: [propsUi?.tfoot] })"
+                  :style="getVirtualItemStyle('footer', virtualRow)"
+                >
+                  <div :class="ui.separator({ class: [propsUi?.separator] })" />
+
+                  <div
+                    v-for="footerGroup in footerGroups"
+                    :key="`${footerGroup.id}-${virtualRow.index}`"
+                    :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>
+            </template>
+
+            <!-- Non-virtualized rows (animation handled by useVirtualizedRowAnimation composable) -->
+            <template v-else>
+              <component
+                :is="addRowContext.isAddRowRow(row) ? NuGridAddRow : NuGridRow"
+                v-for="row in rows"
+                :key="row.id"
+                :row="row"
+                :data-row-id="row.id"
+              />
+            </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>
+
+        <div
+          v-if="hasFooter && !virtualizationEnabled"
+          :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>
+
+    <div
+      v-if="virtualizer"
+      :style="{
+  height: `${virtualizer.getTotalSize()}px`
+}"
+    >
+      <ReuseNuGridTemplate />
+    </div>
+    <ReuseNuGridTemplate v-else />
+  </Primitive>
+</template>