@nu-grid/nuxt 0.2.0 → 0.3.0

package/dist/runtime/config/_internal/prop-utils.d.ts

@@ -7,7 +7,7 @@ import { nuGridDefaults } from './options-defaults.js';
  * Keys must match nuGridDefaults - TypeScript will error if they diverge.
  */
 type OptionsTypeMap = {
-    [K in keyof typeof nuGridDefaults]: K extends 'focus' ? NuGridFocusOptions : K extends 'editing' ? NuGridEditingOptions : K extends 'validation' ? NuGridValidationOptions : K extends 'selection' ? NuGridSelectionOptions : K extends 'layout' ? NuGridLayoutOptions : K extends 'virtualization' ? NuGridVirtualizerOptions : K extends 'tooltip' ? NuGridTooltipOptions : K extends 'multiRow' ? NuGridMultiRowOptions : K extends 'animation' ? NuGridAnimationOptions : K extends 'paging' ? NuGridPagingOptions : never;
+    [K in keyof typeof nuGridDefaults]: K extends 'focus' ? NuGridFocusOptions : K extends 'editing' ? NuGridEditingOptions : K extends 'validation' ? NuGridValidationOptions : K extends 'rowSelection' ? NuGridSelectionOptions : K extends 'layout' ? NuGridLayoutOptions : K extends 'virtualization' ? NuGridVirtualizerOptions : K extends 'tooltip' ? NuGridTooltipOptions : K extends 'multiRow' ? NuGridMultiRowOptions : K extends 'animation' ? NuGridAnimationOptions : K extends 'paging' ? NuGridPagingOptions : never;
 };
 type DefaultsKey = {
     [K in keyof OptionsTypeMap]: OptionsTypeMap[K] extends never ? never : K;
@@ -22,6 +22,9 @@ export declare function getDefaults<K extends DefaultsKey>(key: K): DefaultsGrou
  * Creates a computed ref that extracts a prop value with fallback to nuGridDefaults.
  * Defaults are automatically sourced from the centralized nuGridDefaults.
  *
+ * Supports boolean shorthand for props like `editing: true` which means
+ * "enable editing with default settings".
+ *
  * @param props - The props object (reactive)
  * @param group - The defaults group key (e.g., 'focus', 'editing', 'validation')
  * @param key - The key to extract from the prop group
@@ -36,6 +39,9 @@ export declare function usePropWithDefault<G extends DefaultsKey, K extends keyo
  * Creates multiple computed refs for a prop group with defaults from nuGridDefaults.
  * Useful when extracting several properties from the same group.
  *
+ * Supports boolean shorthand for props like `editing: true` which means
+ * "enable editing with default settings".
+ *
  * @param props - The props object (reactive)
  * @param group - The defaults group key
  * @param keys - Array of keys to extract

package/dist/runtime/config/_internal/prop-utils.js

@@ -3,19 +3,33 @@ import { nuGridDefaults } from "./options-defaults.js";
 export function getDefaults(key) {
   return nuGridDefaults[key];
 }
+function normalizePropGroup(propValue) {
+  if (propValue === true) {
+    return {};
+  }
+  if (propValue === false || propValue === void 0 || propValue === null) {
+    return void 0;
+  }
+  if (typeof propValue === "object") {
+    return propValue;
+  }
+  return void 0;
+}
 export function usePropWithDefault(props, group, key) {
   const defaults = nuGridDefaults[group];
-  return computed(
-    () => props[group]?.[key] ?? defaults[key]
-  );
+  return computed(() => {
+    const normalized = normalizePropGroup(props[group]);
+    return normalized?.[key] ?? defaults[key];
+  });
 }
 export function usePropsWithDefaults(props, group, keys) {
   const defaults = nuGridDefaults[group];
   const result = {};
   for (const key of keys) {
-    result[key] = computed(
-      () => props[group]?.[key] ?? defaults[key]
-    );
+    result[key] = computed(() => {
+      const normalized = normalizePropGroup(props[group]);
+      return normalized?.[key] ?? defaults[key];
+    });
   }
   return result;
 }

package/dist/runtime/config/presets.js

@@ -14,7 +14,7 @@ const presets = {
   editable: {
     focus: { mode: "cell", retain: true },
     editing: { enabled: true },
-    layout: { stickyHeaders: true, autoSize: "fitCell" }
+    layout: { stickyHeaders: true, autoSize: "content" }
   },
   /**
    * Kanban-style grouped grid with row navigation
@@ -33,7 +33,7 @@ const presets = {
     focus: { mode: "cell", retain: true, cmdArrows: "firstlast", pageStep: 5 },
     editing: { enabled: true, startClicks: "single" },
     validation: { validateOn: "blur" },
-    layout: { scrollbars: "native", autoSize: "fitGrid", maintainWidth: true }
+    layout: { scrollbars: "native", autoSize: "fill" }
   },
   /**
    * Analytics grid optimized for large read-only datasets

package/dist/runtime/themes/nuGridTheme.d.ts

@@ -22,6 +22,8 @@ export declare const nuGridTheme: {
         sortHandleHover: string;
         rowDragIcon: string;
         headerContainer: string;
+        headerControls: string;
+        columnMenu: string;
         footerContent: string;
         groupHeader: string;
         groupHeaderLeft: string;

package/dist/runtime/themes/nuGridTheme.js

@@ -4,7 +4,8 @@ export const nuGridTheme = {
   slots: {
     ...theme.slots,
     // Root container - extends base with height to fill parent container
-    root: "relative overflow-auto h-full",
+    // min-h-0 allows shrinking in flex contexts (overrides default min-height: auto)
+    root: "relative overflow-auto h-full min-h-0",
     // style the checkboxes to match compact theme
     checkboxBase: "",
     checkboxIndicator: "",
@@ -14,7 +15,7 @@ export const nuGridTheme = {
     base: "flex flex-col pb-3 w-max min-w-0 border-separate border-spacing-0",
     // Scrollbar styling - uses tailwind-scrollbar plugin
     scrollbar: "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-400/50 hover:scrollbar-thumb-gray-500/60 dark:scrollbar-thumb-gray-500/50 dark:hover:scrollbar-thumb-gray-400/60 scrollbar-thumb-rounded",
-    th: "flex shrink-0 items-stretch overflow-hidden p-0! group text-left rtl:text-right text-sm font-semibold text-highlighted py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r",
+    th: "flex shrink-0 items-stretch p-0! group text-left rtl:text-right text-sm font-semibold text-highlighted py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r",
     td: "flex shrink-0 items-center overflow-hidden p-4 whitespace-nowrap text-sm text-muted outline-none! focus-visible:outline-none! border-b border-default",
     tr: "flex outline-none! focus-visible:outline-none!",
     loading: "flex-1",
@@ -22,14 +23,16 @@ export const nuGridTheme = {
     separator: "flex-1 h-0",
     // Additional NuGrid-specific slots
     rowDragHandle: "flex shrink-0 items-center justify-center px-2 w-10 min-w-10 max-w-10",
-    colResizeHandle: "flex shrink-0 items-center justify-center w-4 cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-200 relative z-10 hover:bg-primary-500/10 [&:hover_.col-resizer]:bg-primary-500/80",
+    colResizeHandle: "flex items-center justify-center w-4 h-full cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-200 hover:bg-primary-500/10 [&:hover_.col-resizer]:bg-primary-500/80",
     colResizer: "w-0.5 h-3/5 rounded-sm transition-colors duration-200 bg-gray-400/60 col-resizer",
     rowDragHeaderHandle: "shrink-0 w-10 min-w-10 max-w-10",
     thInner: "flex flex-1 items-center px-3 py-2 truncate",
     sortHandle: "flex shrink-0 items-center px-1 cursor-pointer select-none opacity-100 hover:text-primary-500 transition-opacity duration-200",
     sortHandleHover: "flex shrink-0 items-center px-1 cursor-pointer select-none text-gray-400/60 opacity-0 group-hover:opacity-100 focus-within:opacity-100 hover:text-primary-500 transition-opacity duration-200",
     rowDragIcon: "inline-block w-4 h-4",
-    headerContainer: "flex items-stretch w-full h-full",
+    headerContainer: "relative flex items-stretch w-full h-full",
+    headerControls: "absolute right-0 inset-y-0 flex items-center z-10 bg-inherit",
+    columnMenu: "flex items-center px-1 transition-opacity duration-200",
     footerContent: "w-full truncate",
     groupHeader: "flex items-stretch cursor-pointer bg-primary/10 hover:bg-primary/15 transition-colors",
     groupHeaderLeft: "sticky left-0 z-50 flex items-center gap-3 px-4 py-3 border-b-0 border-l-4 border-primary",

package/dist/runtime/themes/nuGridThemeCompact.d.ts

@@ -25,6 +25,8 @@ export declare const nuGridThemeCompact: {
         sortHandleHover: string;
         rowDragIcon: string;
         headerContainer: string;
+        headerControls: string;
+        columnMenu: string;
         footerContent: string;
         groupHeader: string;
         groupHeaderLeft: string;

package/dist/runtime/themes/nuGridThemeCompact.js

@@ -4,7 +4,8 @@ export const nuGridThemeCompact = {
   slots: {
     ...theme.slots,
     // Root container - extends base with height to fill parent container
-    root: "relative overflow-auto h-full",
+    // min-h-0 allows shrinking in flex contexts (overrides default min-height: auto)
+    root: "relative overflow-auto h-full min-h-0",
     checkboxBase: "ring-blue-800 dark:ring-blue-400",
     checkboxIndicator: "bg-blue-800! dark:bg-blue-400",
     checkboxContainer: "",
@@ -13,7 +14,7 @@ export const nuGridThemeCompact = {
     // Base slots with div mode styles merged in
     base: "flex flex-col bg-white dark:bg-gray-900",
     // Tighter spacing: px-2 py-1.5 instead of px-4 py-3.5
-    th: "flex shrink-0 items-stretch overflow-hidden p-0! group bg-gray-50 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-600 last:border-r-0 text-left rtl:text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide",
+    th: "flex shrink-0 items-stretch p-0! group bg-gray-50 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-600 last:border-r-0 text-left rtl:text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide",
     // Tighter cell padding: px-2 py-1 instead of p-4
     td: "flex shrink-0 items-center overflow-hidden border-r border-gray-300/50 dark:border-gray-600/50 last:border-r-0 px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-white outline-none! focus-visible:outline-none!",
     tr: "flex border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 outline-none! focus-visible:outline-none!",
@@ -22,7 +23,7 @@ export const nuGridThemeCompact = {
     separator: "flex-1",
     // Additional NuGrid-specific slots
     rowDragHandle: "flex shrink-0 items-center justify-center px-1 w-8 min-w-8 max-w-8",
-    colResizeHandle: "flex shrink-0 items-center justify-center w-3 cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-200 relative z-10 hover:bg-blue-500/10 [&:hover_.col-resizer]:bg-blue-500/80",
+    colResizeHandle: "flex items-center justify-center w-3 h-full cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-200 hover:bg-blue-500/10 [&:hover_.col-resizer]:bg-blue-500/80",
     colResizer: "w-0.5 h-3/5 rounded-sm transition-colors duration-200 bg-gray-400/60 col-resizer",
     rowDragHeaderHandle: "shrink-0 w-8 min-w-8 max-w-8",
     // Tighter header inner: px-2 py-1 instead of px-3 py-2
@@ -30,7 +31,9 @@ export const nuGridThemeCompact = {
     sortHandle: "flex shrink-0 items-center px-1 cursor-pointer select-none opacity-100 hover:text-blue-500 transition-opacity duration-200",
     sortHandleHover: "flex shrink-0 items-center px-1 cursor-pointer select-none text-gray-400/60 opacity-0 group-hover:opacity-100 focus-within:opacity-100 hover:text-blue-500 transition-opacity duration-200",
     rowDragIcon: "inline-block w-3.5 h-3.5",
-    headerContainer: "flex items-stretch w-full h-full bg-gray-50 dark:bg-gray-800",
+    headerContainer: "relative flex items-stretch w-full h-full bg-gray-50 dark:bg-gray-800",
+    headerControls: "absolute right-0 inset-y-0 flex items-center z-10 bg-inherit",
+    columnMenu: "flex items-center px-1 transition-opacity duration-200",
     footerContent: "w-full truncate",
     // Group header styling
     groupHeader: "flex items-stretch cursor-pointer bg-blue-500/6 hover:bg-blue-500/10 dark:bg-blue-500/12 dark:hover:bg-blue-500/18 transition-colors",

package/dist/runtime/types/_internal/contexts/resize.d.ts

@@ -9,4 +9,5 @@ export interface NuGridResizeContext<T extends TableData = TableData> {
     handleGroupResizeStart: NuGridColumnResize<T>['handleGroupResizeStart'];
     resizingGroupId: NuGridColumnResize<T>['resizingGroupId'];
     resizingColumnId: NuGridColumnResize<T>['resizingColumnId'];
+    manuallyResizedColumns: NuGridColumnResize<T>['manuallyResizedColumns'];
 }

package/dist/runtime/types/_internal/contexts/ui-config.d.ts

@@ -1,8 +1,8 @@
 import type { TableData } from '@nuxt/ui';
-import type { ComputedRef } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { NuGridUIReturn } from '../../../composables/_internal/useNuGridUI.js';
 import type { NuGridColumnMenuItemsCallback } from '../../column.js';
-import type { NuGridColumnMenuButton } from '../../option-groups.js';
+import type { NuGridAutoSizeStrategy, NuGridColumnMenuButton, NuGridResizeMode } from '../../option-groups.js';
 import type { NuGridScrollbars } from '../../props.js';
 import type { NuGridSortIcon } from '../../sort-icon.js';
 /**
@@ -18,4 +18,6 @@ export interface NuGridUIConfigContext<T extends TableData = TableData> {
     showColumnVisibility: ComputedRef<boolean>;
     columnMenuButton: ComputedRef<NuGridColumnMenuButton | undefined>;
     checkboxTheme: NuGridUIReturn['checkboxTheme'];
+    autoSizeMode?: Ref<NuGridAutoSizeStrategy>;
+    resizeMode?: Ref<NuGridResizeMode>;
 }

package/dist/runtime/types/autosize.d.ts

@@ -1,8 +1,11 @@
+import type { Ref } from 'vue';
 /**
  * Type for nugrid-autosizefns injection
  * Provides column autosize functionality
  */
 export interface NuGridAutosize {
-    autoSizeColumns: (mode?: 'fitCell' | 'fitGrid') => void;
+    autoSizeColumns: (mode?: 'content' | 'fill') => void;
     autoSizeColumn: (columnId: string) => void;
+    /** Whether the initial autosize has completed (grid is ready to show) */
+    autosizeReady: Ref<boolean>;
 }

package/dist/runtime/types/column.d.ts

@@ -64,11 +64,13 @@ export type NuGridColumn<T extends TableData> = TableColumn<T> & {
     enableFocusing?: boolean | ((row: Row<T>) => boolean);
     /**
      * Data type for the cell, determines which default editor to use
-     * Built-in types: 'text', 'number', 'date', 'boolean', 'selection', 'action-menu', 'lookup'
+     * - Automatically inferred from row data if not specified (when dataTypeInference is enabled)
+     * - Set to `false` to disable inference and use default text rendering
+     * Built-in types: 'text', 'number', 'date', 'boolean', 'currency', 'percentage', 'selection', 'action-menu', 'lookup'
      * Custom types can be registered via cellTypes prop
-     * @defaultValue 'text'
+     * @defaultValue undefined (inferred from data)
      */
-    cellDataType?: string;
+    cellDataType?: string | false;
     /**
      * Lookup/dropdown configuration for cells using cellDataType: 'lookup'
      * Provides a dropdown selection interface using Nuxt UI's SelectMenu
@@ -245,4 +247,40 @@ export type NuGridColumn<T extends TableData> = TableColumn<T> & {
      * span: '*'
      */
     span?: number | '*';
+    /**
+     * Controls whether the column participates in flex distribution in fill mode
+     * - true (default): Column flexes to fill available space (uses widthPercentage or equal share)
+     * - false: Column uses its fixed `size` and doesn't grow/shrink
+     *
+     * Use grow: false for columns that should have a fixed width regardless of container size,
+     * such as checkbox columns, ID columns, or action columns.
+     * @defaultValue true
+     * @example
+     * // Fixed-width columns that don't grow
+     * { id: 'select', size: 50, grow: false }    // Checkbox column
+     * { accessorKey: 'id', size: 80, grow: false } // ID column
+     * { accessorKey: 'status', size: 120, grow: false } // Status badge column
+     *
+     * @example
+     * // Flex columns that share remaining space (default behavior)
+     * { accessorKey: 'name' }   // Grows with equal share
+     * { accessorKey: 'email' }  // Grows with equal share
+     */
+    grow?: boolean;
+    /**
+     * Weighted flex-grow value for proportional distribution in fill mode
+     * Columns with higher values take more space relative to other flex columns
+     * Only applies when grow !== false (flex columns only)
+     * @example
+     * // Name takes 40%, Email takes 40%, Location takes 20% of flex space
+     * { accessorKey: 'name', widthPercentage: 40 }
+     * { accessorKey: 'email', widthPercentage: 40 }
+     * { accessorKey: 'location', widthPercentage: 20 }
+     *
+     * @example
+     * // Without widthPercentage, flex columns share space equally (flex-grow: 1)
+     * { accessorKey: 'name' }  // Equal share
+     * { accessorKey: 'email' } // Equal share
+     */
+    widthPercentage?: number;
 };

package/dist/runtime/types/index.d.ts

@@ -6,10 +6,11 @@ export type { NuGridColumn, NuGridColumnMenuItem, NuGridColumnMenuItemsCallback
 export type { RowDragEvent } from './drag-drop.js';
 export type { NUGRID_EVENTS_KEY, NuGridCellClickEvent, NuGridCellEditingCancelledEvent, NuGridCellEditingStartedEvent, NuGridCellValueChangedEvent, NuGridEventEmitter, NuGridFilterChangedEvent, NuGridFocusedCellChangedEvent, NuGridFocusedRowChangedEvent, NuGridRowClickEvent, NuGridSortChangedEvent, } from './events.js';
 export type { NuGridGroupingOptions } from './grouping.js';
-export type { NuGridActionsOptions, NuGridAnimationOptions, NuGridAnimationPreset, NuGridAutoSizeStrategy, NuGridColumnMenuOptions, NuGridColumnMenuPreset, NuGridColumnPlacement, NuGridEditingOptions, NuGridExcelExportOptions, NuGridFocusOptions, NuGridLayoutMode, NuGridLayoutOptions, NuGridLookupItem, NuGridLookupOptions, NuGridMultiRowOptions, NuGridPagingOptions, NuGridSelectionOptions, NuGridStateOptions, NuGridStatePart, NuGridStorageType, NuGridTooltipOptions, } from './option-groups.js';
+export type { NuGridActionsOptions, NuGridAnimationOptions, NuGridAnimationPreset, NuGridAutoSizeStrategy, NuGridColumnMenuOptions, NuGridColumnMenuPreset, NuGridColumnPlacement, NuGridEditingOptions, NuGridExcelExportOptions, NuGridFocusOptions, NuGridLayoutMode, NuGridLayoutOptions, NuGridLookupItem, NuGridLookupOptions, NuGridMultiRowOptions, NuGridPagingOptions, NuGridResizeMode, NuGridSelectionOptions, NuGridStateOptions, NuGridStatePart, NuGridStorageType, NuGridTooltipOptions, } from './option-groups.js';
 export type { NuGridProps, NuGridScrollbars } from './props.js';
 export type { NuGridRow } from './row.js';
 export type { NuGridRowSelectOptions } from './row-selection.js';
+export type { NuGridCellSlotProps } from './slots.js';
 export type { NuGridSortIcon } from './sort-icon.js';
 export type { NuGridTheme, NuGridThemeDefinition } from './theme.js';
 export type { NuGridOnInvalid, NuGridShowErrors, NuGridValidateOn, NuGridValidationOptions, } from './validation.js';

package/dist/runtime/types/option-groups.d.ts

@@ -290,8 +290,17 @@ export interface NuGridColumnDefaultsOptions<T extends TableData = TableData> {
 export type NuGridLayoutMode = 'div' | 'group' | 'splitgroup';
 /**
  * Auto-size strategy
+ * - 'fill': Columns fill container using CSS flex
+ * - 'content': Columns size to cell content
+ * - false: No auto-sizing
  */
-export type NuGridAutoSizeStrategy = 'fitCell' | 'fitGrid' | false;
+export type NuGridAutoSizeStrategy = 'fill' | 'content' | false;
+/**
+ * Column resize mode
+ * - 'shift': Resizing a column shifts adjacent columns to maintain table width
+ * - 'expand': Resizing a column expands/shrinks the table width
+ */
+export type NuGridResizeMode = 'shift' | 'expand';
 /**
  * Layout and display configuration
  */
@@ -316,17 +325,26 @@ export interface NuGridLayoutOptions {
     scrollbars?: NuGridScrollbars;
     /**
      * Auto-size strategy for columns
-     * - 'fitCell': Fit cell contents
-     * - 'fitGrid': Fit cell contents and scale to grid width
-     * - false: Disable auto-sizing
-     * @defaultValue false
+     * - 'fill': Columns fill container using CSS flex distribution.
+     *   Use `grow: false` for fixed-width columns, `widthPercentage` for weighted distribution.
+     *   Instant layout with no JavaScript measurement delay.
+     * - 'content': Measure cell contents and set exact pixel widths.
+     *   Ignores `grow` and `widthPercentage` settings.
+     *   May cause visual flash on initial load due to measurement.
+     * - false: No auto-sizing, columns use their defined `size` values.
+     * @defaultValue 'fill'
      */
     autoSize?: NuGridAutoSizeStrategy;
     /**
-     * Maintain table width during column resize
-     * @defaultValue false
+     * Column resize behavior
+     * - 'shift': Resizing a column shifts adjacent columns to maintain table width (default)
+     * - 'expand': Resizing a column expands/shrinks the table width
+     *
+     * With `autoSize: 'fill'` + `resizeMode: 'expand'`: Grid fills container initially,
+     * but user can resize columns to expand beyond the container (enabling horizontal scroll).
+     * @defaultValue 'shift'
      */
-    maintainWidth?: boolean;
+    resizeMode?: NuGridResizeMode;
 }
 /**
  * State persistence parts

package/dist/runtime/types/props.d.ts

@@ -61,6 +61,10 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      * Groups editing-related settings including start triggers and behaviors
      *
      * @example
+     * // Enable editing with defaults
+     * editing: true
+     *
+     * @example
      * // Enable editing with custom triggers
      * editing: {
      *   enabled: true,
@@ -70,7 +74,7 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      *   canEdit: (row, columnId) => row.original.status !== 'locked'
      * }
      */
-    editing?: NuGridEditingOptions<T>;
+    editing?: boolean | NuGridEditingOptions<T>;
     /**
      * Enhanced validation configuration
      * Supports schema validation, row rules, and flexible validation modes
@@ -102,8 +106,12 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      * Provides preset-based setup with sync callback for external state
      *
      * @example
+     * // Enable selection with defaults (multi-select)
+     * rowSelection: true
+     *
+     * @example
      * // Multi-select with sync callback
-     * selection: {
+     * rowSelection: {
      *   mode: 'multi',
      *   placement: 'start',
      *   sync: (ids) => { selectedIds.value = ids }
@@ -111,12 +119,12 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      *
      * @example
      * // Single select with conditional enabling
-     * selection: {
+     * rowSelection: {
      *   mode: 'single',
      *   rowSelectionEnabled: (row) => row.original.selectable
      * }
      */
-    selection?: false | 'single' | 'multi' | NuGridSelectionOptions<T>;
+    rowSelection?: boolean | 'single' | 'multi' | NuGridSelectionOptions<T>;
     /**
      * Actions column configuration
      * Simplified API with placement options and defaults to hidden when no getActions provided
@@ -169,7 +177,7 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      *   mode: 'group',
      *   stickyHeaders: true,
      *   scrollbars: 'scroll',
-     *   autoSize: 'fitGrid'
+     *   autoSize: 'fill'
      * }
      */
     layout?: NuGridLayoutOptions;
@@ -359,11 +367,28 @@ export interface NuGridProps<T extends TableData = TableData> extends Omit<Table
      */
     cellTypes?: NuGridCellType<T>[];
     /**
-     * Columns to skip when autosizing
-     * Provide an array of column IDs that should not be auto-sized
-     * @defaultValue []
+     * Enable automatic data type inference from row data
+     * When enabled, columns without explicit cellDataType will have their
+     * type inferred from the actual values (number, boolean, date, currency, percentage, etc.)
+     *
+     * Detection is based on:
+     * - JavaScript types (boolean, Date objects, numbers)
+     * - String patterns (currency symbols, percentage signs)
+     * - Column name heuristics (e.g., 'price' columns with 2 decimal numbers become currency)
+     *
+     * @defaultValue true
+     *
+     * @example
+     * // Disable type inference globally
+     * dataTypeInference: false
+     *
+     * @example
+     * // Disable inference for a specific column
+     * columns: [
+     *   { accessorKey: 'score', cellDataType: false } // No inference, use default text
+     * ]
      */
-    skipAutoSizeColumns?: string[];
+    dataTypeInference?: boolean;
     /**
      * Row dragging configuration
      * Enables drag and drop reordering of rows

package/dist/runtime/types/resize.d.ts

@@ -11,4 +11,6 @@ export interface NuGridColumnResize<T extends TableData = TableData> {
     handleResizeEnd: () => void;
     resizingGroupId: Ref<string | null>;
     resizingColumnId: Ref<string | null>;
+    /** Set of column IDs that have been manually resized by the user */
+    manuallyResizedColumns: Ref<Set<string>>;
 }

package/dist/runtime/types/slots.d.ts

@@ -0,0 +1,32 @@
+import type { Cell, Column, Row } from '@tanstack/vue-table';
+/**
+ * Props passed to cell template slots (#[columnId]-cell)
+ *
+ * @example
+ * ```vue
+ * <NuGrid :columns="columns" :data="data">
+ *   <template #name-cell="{ value, row }">
+ *     <div class="flex items-center gap-2">
+ *       <UAvatar :src="row.original.avatar" size="xs" />
+ *       <span>{{ value }}</span>
+ *     </div>
+ *   </template>
+ * </NuGrid>
+ * ```
+ */
+export interface NuGridCellSlotProps<T> {
+    /** TanStack cell object */
+    cell: Cell<T, unknown>;
+    /** TanStack row object */
+    row: Row<T>;
+    /** TanStack column definition */
+    column: Column<T, unknown>;
+    /** Index of cell in the row */
+    cellIndex: number;
+    /** Cell value (shortcut for cell.getValue()) */
+    value: unknown;
+    /** Whether cell is currently in edit mode */
+    isEditing: boolean;
+    /** Whether cell has validation error */
+    isInvalid: boolean;
+}

package/dist/runtime/types/tanstack-table.d.ts

@@ -40,9 +40,10 @@ declare module '@tanstack/vue-table' {
      * Data type for the cell, determines which default editor to use
      * Built-in types: 'text', 'number', 'date', 'boolean', 'selection', 'action-menu'
      * Custom types can be registered via cellTypes prop
-     * @defaultValue 'text'
+     * Set to `false` to disable type inference for this column
+     * @defaultValue undefined (inferred from data)
      */
-    cellDataType?: string
+    cellDataType?: string | false
 
     /**
      * Sort icon configuration for this column's header

package/dist/runtime/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './columnHelper.js';
+export { extractColumnValues, inferCellDataType } from './inferCellDataType.js';
 export * from './standardSchema.js';

package/dist/runtime/utils/index.js

@@ -1,2 +1,3 @@
 export * from "./columnHelper.js";
+export { extractColumnValues, inferCellDataType } from "./inferCellDataType.js";
 export * from "./standardSchema.js";

package/dist/runtime/utils/inferCellDataType.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Regular expressions for type detection
+ */
+/**
+ * Infer the cell data type from an array of values and optional column name
+ *
+ * Detection priority:
+ * 1. boolean - typeof value === 'boolean'
+ * 2. date - value instanceof Date
+ * 3. currency - string pattern OR number with 2 decimals + column name heuristic
+ * 4. percentage - string pattern OR number 0-1 + column name heuristic
+ * 5. number - typeof value === 'number' && !isNaN(value)
+ * 6. text - default for strings
+ *
+ * @param values - Array of values from the column
+ * @param columnName - Optional column name for heuristic detection
+ * @returns The inferred cell data type, or undefined if no type could be inferred
+ */
+export declare function inferCellDataType(values: unknown[], columnName?: string): string | undefined;
+/**
+ * Extract values from data array for a given accessor key
+ *
+ * @param data - The data array
+ * @param accessorKey - The key to extract values from
+ * @returns Array of values for the specified key
+ */
+export declare function extractColumnValues<T>(data: T[], accessorKey: string): unknown[];

package/dist/runtime/utils/inferCellDataType.js

@@ -0,0 +1,91 @@
+const CURRENCY_STRING_PATTERN = /^[$€£¥]\s?[\d,]+(?:\.\d{2})?$/;
+const PERCENTAGE_STRING_PATTERN = /^\d+(?:\.\d+)?%$/;
+const CURRENCY_COLUMN_PATTERN = /price|cost|amount|total|fee|salary|wage|revenue|income|expense|payment|balance|budget/i;
+const PERCENTAGE_COLUMN_PATTERN = /percent|rate|ratio|pct/i;
+const MAX_SAMPLE_SIZE = 10;
+function hasTwoDecimalPlaces(value) {
+  if (!Number.isFinite(value)) return false;
+  const str = value.toString();
+  const decimalIndex = str.indexOf(".");
+  if (decimalIndex === -1) return false;
+  const decimals = str.slice(decimalIndex + 1);
+  return decimals.length === 2;
+}
+function isPercentageRange(value) {
+  return value >= 0 && value <= 1;
+}
+export function inferCellDataType(values, columnName) {
+  const samples = values.filter((v) => v !== null && v !== void 0).slice(0, MAX_SAMPLE_SIZE);
+  if (samples.length === 0) {
+    return void 0;
+  }
+  let booleanCount = 0;
+  let dateCount = 0;
+  let currencyStringCount = 0;
+  let currencyNumberCount = 0;
+  let percentageStringCount = 0;
+  let percentageNumberCount = 0;
+  let numberCount = 0;
+  let stringCount = 0;
+  const isCurrencyColumn = columnName ? CURRENCY_COLUMN_PATTERN.test(columnName) : false;
+  const isPercentageColumn = columnName ? PERCENTAGE_COLUMN_PATTERN.test(columnName) : false;
+  for (const value of samples) {
+    if (typeof value === "boolean") {
+      booleanCount++;
+    } else if (value instanceof Date) {
+      dateCount++;
+    } else if (typeof value === "number" && !Number.isNaN(value)) {
+      if (isCurrencyColumn && hasTwoDecimalPlaces(value)) {
+        currencyNumberCount++;
+      } else if (isPercentageColumn && isPercentageRange(value)) {
+        percentageNumberCount++;
+      } else {
+        numberCount++;
+      }
+    } else if (typeof value === "string") {
+      if (CURRENCY_STRING_PATTERN.test(value)) {
+        currencyStringCount++;
+      } else if (PERCENTAGE_STRING_PATTERN.test(value)) {
+        percentageStringCount++;
+      } else {
+        stringCount++;
+      }
+    }
+  }
+  const total = samples.length;
+  const threshold = 0.8;
+  if (booleanCount / total >= threshold) {
+    return "boolean";
+  }
+  if (dateCount / total >= threshold) {
+    return "date";
+  }
+  const totalCurrency = currencyStringCount + currencyNumberCount;
+  if (totalCurrency / total >= threshold) {
+    return "currency";
+  }
+  const totalPercentage = percentageStringCount + percentageNumberCount;
+  if (totalPercentage / total >= threshold) {
+    return "percentage";
+  }
+  const totalNumbers = numberCount + currencyNumberCount + percentageNumberCount;
+  if (totalNumbers / total >= threshold) {
+    return "number";
+  }
+  const totalStrings = stringCount + currencyStringCount + percentageStringCount;
+  if (totalStrings / total >= threshold) {
+    return "text";
+  }
+  return void 0;
+}
+export function extractColumnValues(data, accessorKey) {
+  return data.slice(0, MAX_SAMPLE_SIZE).map((row) => {
+    const keys = accessorKey.split(".");
+    let value = row;
+    for (const key of keys) {
+      if (value === null || value === void 0) break;
+      value = value[key];
+    }
+    return value;
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nu-grid/nuxt",
   "type": "module",
-  "version": "0.2.0",
+  "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",