@nu-grid/nuxt 0.1.1

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

@@ -0,0 +1,20 @@
+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/_internal/NuGridCellContent.d.vue.ts

@@ -0,0 +1,9 @@
+import type { NuGridCellEditing } from '../../types/_internal/index.js';
+interface Props {
+    cell: any;
+    row: any;
+    cellEditingFns: NuGridCellEditing<any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,202 @@
+<script setup>
+import { FlexRender } from "@tanstack/vue-table";
+import { computed, inject, ref, resolveComponent, watch } from "vue";
+import { nuGridCellTypeRegistry } from "../../composables/useNuGridCellTypeRegistry";
+const props = defineProps({
+  cell: { type: null, required: true },
+  row: { type: null, required: true },
+  cellEditingFns: { type: Object, required: true }
+});
+const uiConfig = inject("nugrid-ui-config", null);
+const wrapperRef = ref(null);
+const capturedHeight = ref(null);
+const addRowContext = inject("nugrid-add-row", null);
+const isAddRow = computed(() => addRowContext?.isAddRowRow(props.row) ?? false);
+const shouldHideContent = computed(() => {
+  if (!isAddRow.value) return false;
+  const columnDef = props.cell.column.columnDef;
+  return columnDef.showNew === false;
+});
+const isEditing = computed(
+  () => props.cellEditingFns.isEditingCell(props.row, props.cell.column.id)
+);
+watch(
+  isEditing,
+  (newValue, oldValue) => {
+    if (newValue && !oldValue && wrapperRef.value) {
+      capturedHeight.value = wrapperRef.value.offsetHeight;
+    } else if (!newValue && oldValue) {
+      capturedHeight.value = null;
+    }
+  },
+  { flush: "sync" }
+);
+const hasOverrideCellRender = computed(
+  () => props.cell.column.columnDef.overrideCellRender === true
+);
+const cellDataType = computed(() => {
+  const columnDef = props.cell.column.columnDef;
+  const defined = columnDef.cellDataType;
+  if (defined && defined !== "text") return defined;
+  if (columnDef.wrapText === true) {
+    return "textarea";
+  }
+  const value = props.cell.getValue();
+  if (typeof value === "string" && value.includes("\n")) {
+    return "textarea";
+  }
+  return "text";
+});
+const pluginRenderer = computed(() => {
+  const type = cellDataType.value;
+  return nuGridCellTypeRegistry.getRenderer(type);
+});
+const shouldUsePluginRenderer = computed(() => {
+  if (isEditing.value || hasOverrideCellRender.value) return false;
+  const renderer = pluginRenderer.value;
+  return !!renderer && renderer !== void 0;
+});
+const resolvedComponentCache = /* @__PURE__ */ new Map();
+const isRendererFunction = computed(() => {
+  const renderer = pluginRenderer.value;
+  if (!renderer) return false;
+  return typeof renderer === "function" && !("component" in renderer) && !("__name" in renderer);
+});
+const pluginRendererComponent = computed(() => {
+  if (!shouldUsePluginRenderer.value || !pluginRenderer.value || isRendererFunction.value)
+    return null;
+  const renderer = pluginRenderer.value;
+  if (typeof renderer === "string") {
+    if (!resolvedComponentCache.has(renderer)) {
+      const resolved = resolveComponent(renderer);
+      resolvedComponentCache.set(renderer, resolved);
+      return resolved;
+    }
+    return resolvedComponentCache.get(renderer);
+  } else if (typeof renderer === "object" && "component" in renderer) {
+    const component = renderer.component;
+    if (typeof component === "string") {
+      if (!resolvedComponentCache.has(component)) {
+        const resolved = resolveComponent(component);
+        resolvedComponentCache.set(component, resolved);
+        return resolved;
+      }
+      return resolvedComponentCache.get(component);
+    }
+    return component;
+  } else {
+    return renderer;
+  }
+});
+const pluginRendererProps = computed(() => {
+  if (!shouldUsePluginRenderer.value || !pluginRenderer.value || isRendererFunction.value) {
+    return {};
+  }
+  const renderer = pluginRenderer.value;
+  const baseProps = {
+    value: props.cell.getValue(),
+    row: props.row,
+    cell: props.cell,
+    editable: props.cellEditingFns.isCellEditable(props.row, props.cell),
+    onUpdateValue: (value) => {
+      props.cellEditingFns.stopEditing(props.row, props.cell, value);
+    }
+  };
+  if (typeof renderer === "object" && "component" in renderer && renderer.props) {
+    return { ...baseProps, ...renderer.props };
+  }
+  return baseProps;
+});
+const functionRendererResult = computed(() => {
+  if (!isRendererFunction.value || !pluginRenderer.value) return null;
+  const renderer = pluginRenderer.value;
+  return renderer({
+    cell: props.cell,
+    row: props.row,
+    getValue: () => props.cell.getValue(),
+    column: props.cell.column,
+    table: props.cell.table
+  });
+});
+const shouldWrapText = computed(() => {
+  const columnDef = props.cell.column.columnDef;
+  if (columnDef.wrapText !== void 0) {
+    return columnDef.wrapText;
+  }
+  return uiConfig?.wrapText.value ?? false;
+});
+const wrapperClass = computed(() => {
+  const baseClass = shouldWrapText.value ? "w-full whitespace-normal break-words" : "truncate w-full";
+  if (isEditing.value) {
+    return `${baseClass} relative`;
+  }
+  const preventSelect = props.cellEditingFns.startClicks.value === "double";
+  return preventSelect ? `${baseClass} select-none` : baseClass;
+});
+const wrapperStyle = computed(() => {
+  if (isEditing.value && capturedHeight.value !== null) {
+    return {
+      minHeight: `${capturedHeight.value}px`,
+      height: `${capturedHeight.value}px`,
+      display: "flex",
+      alignItems: "center"
+    };
+  }
+  return void 0;
+});
+const editorContent = computed(() => {
+  const _focus = props.cellEditingFns.shouldFocusEditor.value;
+  const _showErrors = props.cellEditingFns.showValidationErrors.value;
+  return props.cellEditingFns.renderCellContent(props.cell, props.row);
+});
+</script>
+
+<template>
+  <div v-if="shouldHideContent" :class="wrapperClass">
+    <span class="invisible select-none" aria-hidden="true">Aa</span>
+  </div>
+  <!-- Editing mode: textarea needs overlay for popout, others render inline -->
+  <div
+    v-else-if="isEditing && cellDataType === 'textarea'"
+    ref="wrapperRef"
+    :class="wrapperClass"
+    :style="wrapperStyle"
+    data-editing
+  >
+    <!-- Original content stays visible to maintain exact height -->
+    <component :is="functionRendererResult" v-if="shouldUsePluginRenderer && isRendererFunction" />
+    <component
+      :is="pluginRendererComponent"
+      v-else-if="shouldUsePluginRenderer && pluginRendererComponent"
+      v-bind="pluginRendererProps"
+    />
+    <FlexRender v-else :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+    <!-- Textarea overlay expands beyond cell -->
+    <div class="absolute inset-0 -mx-2.5 -my-2">
+      <component :is="editorContent" />
+    </div>
+  </div>
+  <!-- Regular editors render inline without overlay, negative margin compensates for input border/padding -->
+  <div
+    v-else-if="isEditing"
+    ref="wrapperRef"
+    class="-ml-3 w-full"
+    :style="wrapperStyle"
+    data-editing
+  >
+    <component :is="editorContent" />
+  </div>
+  <!-- Display mode: tooltip handled by grid-level event delegation -->
+  <div v-else ref="wrapperRef" :class="wrapperClass" :style="wrapperStyle">
+    <!-- Function-based renderer -->
+    <component :is="functionRendererResult" v-if="shouldUsePluginRenderer && isRendererFunction" />
+    <!-- Component-based plugin renderer -->
+    <component
+      :is="pluginRendererComponent"
+      v-else-if="shouldUsePluginRenderer && pluginRendererComponent"
+      v-bind="pluginRendererProps"
+    />
+    <!-- Display mode - render custom or default cell content -->
+    <FlexRender v-else :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+  </div>
+</template>

package/dist/runtime/components/_internal/NuGridCellContent.vue.d.ts

@@ -0,0 +1,9 @@
+import type { NuGridCellEditing } from '../../types/_internal/index.js';
+interface Props {
+    cell: any;
+    row: any;
+    cellEditingFns: NuGridCellEditing<any>;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/_internal/NuGridColumnMenu.d.vue.ts

@@ -0,0 +1,25 @@
+import type { TableData } from '@nuxt/ui';
+import type { Header } from '@tanstack/vue-table';
+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<{
+        /**
+         * The TanStack Table header object
+         */
+        header: Header<any, unknown>;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    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/_internal/NuGridColumnMenu.vue

@@ -0,0 +1,391 @@
+<script setup>
+import { computed, inject, ref, resolveComponent, watch } from "vue";
+import { nuGridCellTypeRegistry } from "../../composables/useNuGridCellTypeRegistry";
+import { nuGridDefaults } from "../../config/_internal";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  header: { type: Object, required: true }
+});
+const coreContext = inject("nugrid-core");
+const performanceContext = inject("nugrid-performance");
+const uiConfigContext = inject("nugrid-ui-config");
+if (!coreContext || !performanceContext || !uiConfigContext) {
+  throw new Error("NuGridColumnMenu must be used within a NuGrid component.");
+}
+const { tableApi } = coreContext;
+const { allLeafColumns } = performanceContext;
+const { getColumnMenuItems, showColumnVisibility, columnMenuButton } = uiConfigContext;
+const pinColumn = (columnId, side) => {
+  if (!tableApi) return;
+  const currentPinning = tableApi.getState().columnPinning;
+  const newPinning = { ...currentPinning };
+  const oppositeSide = side === "left" ? "right" : "left";
+  if (newPinning[oppositeSide]) {
+    newPinning[oppositeSide] = newPinning[oppositeSide].filter((id) => id !== columnId);
+  }
+  if (!newPinning[side]) {
+    newPinning[side] = [];
+  }
+  if (!newPinning[side].includes(columnId)) {
+    newPinning[side] = [...newPinning[side], columnId];
+  }
+  tableApi.setColumnPinning(newPinning);
+};
+const unpinColumn = (columnId) => {
+  if (!tableApi) return;
+  const currentPinning = tableApi.getState().columnPinning;
+  const newPinning = {
+    left: currentPinning.left?.filter((id) => id !== columnId) || [],
+    right: currentPinning.right?.filter((id) => id !== columnId) || []
+  };
+  tableApi.setColumnPinning(newPinning);
+};
+const getIsPinned = (columnId) => {
+  if (!tableApi) return false;
+  const pinning = tableApi.getState().columnPinning;
+  if (pinning.left?.includes(columnId)) return "left";
+  if (pinning.right?.includes(columnId)) return "right";
+  return false;
+};
+const menuOpen = ref(false);
+const filterPopoverOpen = ref(false);
+const column = computed(() => props.header.column);
+const isColumnMenuEnabled = computed(() => {
+  const colDef = column.value.columnDef;
+  return colDef.enableColumnMenu !== false;
+});
+const isSpecialColumn = computed(() => {
+  const columnId = column.value.id;
+  return columnId === "__selection" || columnId === "__actions" || !isColumnMenuEnabled.value;
+});
+const sortState = computed(() => column.value.getIsSorted());
+const canSort = computed(() => column.value.getCanSort());
+const canFilter = computed(() => column.value.getCanFilter());
+const isFiltered = computed(() => {
+  const filterValue = column.value.getFilterValue();
+  return filterValue !== void 0 && filterValue !== null && filterValue !== "";
+});
+const isPinned = computed(() => {
+  return getIsPinned(column.value.id);
+});
+const canResize = computed(() => column.value.getCanResize());
+const hasCustomSize = computed(() => {
+  const currentSize = column.value.getSize();
+  const defaultSize = column.value.columnDef.size ?? 150;
+  return currentSize !== defaultSize;
+});
+const buttonConfig = computed(() => ({
+  icon: columnMenuButton.value?.icon ?? nuGridDefaults.columnDefaults.menu.button.icon,
+  color: columnMenuButton.value?.color ?? nuGridDefaults.columnDefaults.menu.button.color,
+  variant: columnMenuButton.value?.variant ?? nuGridDefaults.columnDefaults.menu.button.variant
+}));
+function buildDefaultMenuItems() {
+  const items = [];
+  let needsSeparator = false;
+  const addSeparatorIfNeeded = () => {
+    if (needsSeparator && items.length > 0) {
+      items.push({ type: "separator" });
+      needsSeparator = false;
+    }
+  };
+  if (canSort.value) {
+    addSeparatorIfNeeded();
+    if (sortState.value !== "asc") {
+      items.push({
+        label: "Sort Ascending",
+        icon: "i-lucide-arrow-up",
+        onSelect: (_event, _col) => {
+          column.value.toggleSorting(false, false);
+        }
+      });
+    }
+    if (sortState.value !== "desc") {
+      items.push({
+        label: "Sort Descending",
+        icon: "i-lucide-arrow-down",
+        onSelect: (_event, _col) => {
+          column.value.toggleSorting(true, false);
+        }
+      });
+    }
+    if (sortState.value) {
+      items.push({
+        label: "Clear Sort",
+        icon: "i-lucide-x",
+        onSelect: (_event, _col) => {
+          column.value.clearSorting();
+        }
+      });
+    }
+    needsSeparator = true;
+  }
+  if (canFilter.value) {
+    const colDef = column.value.columnDef;
+    const cellDataType = colDef.cellDataType || "text";
+    const plugin = nuGridCellTypeRegistry.get(cellDataType);
+    const isFilteringEnabled = plugin?.enableFiltering !== false && !!plugin?.filter;
+    if (isFilteringEnabled) {
+      addSeparatorIfNeeded();
+      items.push({
+        label: isFiltered.value ? "Filter Active" : "Filter",
+        icon: isFiltered.value ? "i-lucide-filter" : "i-lucide-filter",
+        onSelect: (_event, _col) => {
+          filterPopoverOpen.value = !filterPopoverOpen.value;
+        }
+      });
+      needsSeparator = true;
+    }
+  }
+  if (tableApi) {
+    const pinSide = isPinned.value;
+    let hasAddedPinningItem = false;
+    addSeparatorIfNeeded();
+    if (pinSide !== "left") {
+      items.push({
+        label: "Pin Left",
+        icon: "i-lucide-arrow-left-to-line",
+        onSelect: (_event, _col) => {
+          pinColumn(column.value.id, "left");
+        }
+      });
+      hasAddedPinningItem = true;
+    }
+    if (pinSide !== "right") {
+      items.push({
+        label: "Pin Right",
+        icon: "i-lucide-arrow-right-to-line",
+        onSelect: (_event, _col) => {
+          pinColumn(column.value.id, "right");
+        }
+      });
+      hasAddedPinningItem = true;
+    }
+    if (pinSide) {
+      items.push({
+        label: "Unpin",
+        icon: "i-lucide-pin-off",
+        onSelect: (_event, _col) => {
+          unpinColumn(column.value.id);
+        }
+      });
+      hasAddedPinningItem = true;
+    }
+    if (hasAddedPinningItem) {
+      needsSeparator = true;
+    }
+  }
+  if (canResize.value) {
+    addSeparatorIfNeeded();
+    items.push({
+      label: "Autosize Column",
+      icon: "i-lucide-maximize-2",
+      onSelect: (_event, _col) => {
+        const columnId = column.value.id;
+        if (tableApi) {
+          const headerGroups = tableApi.getHeaderGroups();
+          const header = headerGroups.flatMap((hg) => hg.headers).find((h) => h.column.id === columnId);
+          if (header) {
+            const headerText = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : columnId;
+            const measureDiv = document.createElement("div");
+            measureDiv.style.cssText = "position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; font-size: 14px; font-weight: 600;";
+            document.body.appendChild(measureDiv);
+            measureDiv.textContent = headerText;
+            const measuredWidth = Math.max(measureDiv.offsetWidth + 64, 100);
+            document.body.removeChild(measureDiv);
+            tableApi.setColumnSizing((old) => ({
+              ...old,
+              [columnId]: measuredWidth
+            }));
+          }
+        }
+      }
+    });
+    needsSeparator = true;
+  }
+  if (canResize.value && hasCustomSize.value) {
+    addSeparatorIfNeeded();
+    items.push({
+      label: "Reset Column Size",
+      icon: "i-lucide-rotate-ccw",
+      onSelect: (_event, _col) => {
+        const columnId = column.value.id;
+        const defaultSize = column.value.columnDef.size ?? 150;
+        tableApi?.setColumnSizing((old) => ({
+          ...old,
+          [columnId]: defaultSize
+        }));
+      }
+    });
+    needsSeparator = true;
+  }
+  return items;
+}
+function convertToDropdownMenuItem(item, col) {
+  if (item.type === "separator" || item.type === "label") {
+    return item;
+  }
+  const dropdownItem = { ...item };
+  if (item.children) {
+    dropdownItem.children = item.children.map((child) => convertToDropdownMenuItem(child, col));
+  }
+  if (item.onSelect) {
+    dropdownItem.onSelect = (event) => {
+      return item.onSelect(event, col);
+    };
+  }
+  return dropdownItem;
+}
+function processMenuItems(items, _col) {
+  return items;
+}
+const menuItems = computed(() => {
+  let defaultItems = buildDefaultMenuItems();
+  const colDef = column.value.columnDef;
+  const cellDataType = colDef.cellDataType || "text";
+  const plugin = nuGridCellTypeRegistry.get(cellDataType);
+  const pluginMenuItemsCallback = plugin?.columnMenuItems;
+  if (pluginMenuItemsCallback) {
+    const callback = pluginMenuItemsCallback;
+    defaultItems = callback(defaultItems, column.value);
+  }
+  let finalItems = defaultItems;
+  if (colDef.columnMenuItems) {
+    if (typeof colDef.columnMenuItems === "function") {
+      finalItems = colDef.columnMenuItems.length === 2 ? colDef.columnMenuItems(defaultItems, column.value) : colDef.columnMenuItems(defaultItems);
+    } else {
+      finalItems = colDef.columnMenuItems;
+    }
+    finalItems = processMenuItems(finalItems, column.value);
+  } else if (getColumnMenuItems?.value) {
+    finalItems = getColumnMenuItems.value(defaultItems, column.value);
+    finalItems = processMenuItems(finalItems, column.value);
+  }
+  const columnShowVisibility = colDef.showColumnVisibility ?? showColumnVisibility.value;
+  const chooserItems = [];
+  if (columnShowVisibility) {
+    const visibleColumns = allLeafColumns.value.filter((col) => col.getCanHide());
+    if (visibleColumns.length > 0) {
+      chooserItems.push({
+        label: "Column Visibility",
+        icon: "i-lucide-eye",
+        children: visibleColumns.map(
+          (col) => ({
+            label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id,
+            type: "checkbox",
+            checked: col.getIsVisible(),
+            onUpdateChecked: (checked) => {
+              col.toggleVisibility(!!checked);
+            },
+            onSelect: (_event, _column) => {
+            }
+          })
+        )
+      });
+    }
+  }
+  const convertedFinalItems = finalItems.map(
+    (item) => convertToDropdownMenuItem(item, column.value)
+  );
+  const convertedChooserItems = chooserItems.map(
+    (item) => convertToDropdownMenuItem(item, column.value)
+  );
+  const sections = [];
+  if (convertedFinalItems.length > 0) {
+    sections.push(convertedFinalItems);
+  }
+  if (convertedChooserItems.length > 0) {
+    sections.push(convertedChooserItems);
+  }
+  return sections.length > 0 ? sections : [];
+});
+const shouldShowMenu = computed(() => !isSpecialColumn.value && menuItems.value.length > 0);
+const filterValueRef = ref(null);
+const filterContext = computed(() => {
+  if (!canFilter.value) return null;
+  const colDef = column.value.columnDef;
+  const cellDataType = colDef.cellDataType || "text";
+  const plugin = nuGridCellTypeRegistry.get(cellDataType);
+  if (!plugin?.filter || plugin.enableFiltering === false) return null;
+  return {
+    column: column.value,
+    filterValue: filterValueRef,
+    setFilterValue: (value) => {
+      filterValueRef.value = value;
+      column.value.setFilterValue(value);
+    },
+    clearFilter: () => {
+      filterValueRef.value = null;
+      column.value.setFilterValue(void 0);
+    },
+    isFiltered: isFiltered.value,
+    table: tableApi
+  };
+});
+watch(
+  [filterContext, () => canFilter.value ? column.value.getFilterValue() : null],
+  ([context, currentFilterValue]) => {
+    if (!context) return;
+    const colDef = column.value.columnDef;
+    const cellDataType = colDef.cellDataType || "text";
+    const plugin = nuGridCellTypeRegistry.get(cellDataType);
+    const defaultValue = plugin?.filter?.defaultValue ?? null;
+    const newValue = currentFilterValue ?? defaultValue;
+    if (filterValueRef.value !== newValue) {
+      filterValueRef.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+const filterComponent = computed(() => {
+  if (!filterContext.value) return null;
+  const colDef = column.value.columnDef;
+  const cellDataType = colDef.cellDataType || "text";
+  const plugin = nuGridCellTypeRegistry.get(cellDataType);
+  if (!plugin?.filter?.component) return null;
+  const component = plugin.filter.component;
+  if (typeof component === "string") {
+    return resolveComponent(component);
+  }
+  return component;
+});
+</script>
+
+<template>
+  <div
+    v-if="shouldShowMenu"
+    :class="[
+  'relative z-0 flex shrink-0 items-center px-1 transition-opacity duration-200',
+  menuOpen ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
+]"
+  >
+    <UDropdownMenu
+      v-model:open="menuOpen"
+      :items="menuItems"
+      :content="{ align: 'end', collisionPadding: 8 }"
+    >
+      <UButton
+        :icon="buttonConfig.icon"
+        :color="buttonConfig.color"
+        :variant="buttonConfig.variant"
+        size="xs"
+        :square="true"
+        :class="[
+  'flex h-6 w-6 items-center justify-center p-0 text-gray-400/60 hover:text-primary-500',
+  menuOpen && 'text-primary-500'
+]"
+        @click.stop
+      />
+    </UDropdownMenu>
+
+    <!-- Filter popover - positioned relative to menu button -->
+    <UPopover
+      v-if="filterComponent && filterContext"
+      v-model:open="filterPopoverOpen"
+      :content="{ align: 'end' }"
+    >
+      <template #content>
+        <component :is="filterComponent" :context="filterContext" />
+      </template>
+    </UPopover>
+  </div>
+</template>

package/dist/runtime/components/_internal/NuGridColumnMenu.vue.d.ts

@@ -0,0 +1,25 @@
+import type { TableData } from '@nuxt/ui';
+import type { Header } from '@tanstack/vue-table';
+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<{
+        /**
+         * The TanStack Table header object
+         */
+        header: Header<any, unknown>;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    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];
+}) & {};