@nu-grid/nuxt 0.2.0 → 0.3.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nu-grid/nuxt",
   "configKey": "nuGrid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/cell-types/date/index.d.ts

@@ -1,6 +1,6 @@
 import type { NuGridCellType } from '../../types/cells.js';
 /**
  * Date cell type
- * Date picker input, no special keyboard handling
+ * Date picker input with short date formatting
  */
 export declare const dateCellType: NuGridCellType;

package/dist/runtime/cell-types/date/index.js

@@ -9,5 +9,19 @@ export const dateCellType = {
     component: DateFilter,
     defaultOperator: "equals"
   },
-  enableFiltering: true
+  enableFiltering: true,
+  formatter: (value, context) => {
+    if (value === null || value === void 0) return "";
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return String(value);
+    const locale = context.columnDef.locale || "en-US";
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    });
+  },
+  defaultColumnDef: {
+    size: 100
+  }
 };

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

@@ -5,6 +5,7 @@ import { currencyCellType } from './currency/index.js';
 import { dateCellType } from './date/index.js';
 import { lookupCellType } from './lookup/index.js';
 import { numberCellType } from './number/index.js';
+import { percentageCellType } from './percentage/index.js';
 import { ratingCellType } from './rating/index.js';
 import { selectionCellType } from './selection/index.js';
 import { textareaCellType, textCellType } from './text/index.js';
@@ -13,5 +14,5 @@ import { textareaCellType, textCellType } from './text/index.js';
  * These are automatically registered in the cell type registry
  */
 export declare const builtInCellTypes: NuGridCellType[];
-export { actionMenuCellType, booleanCellType, currencyCellType, dateCellType, lookupCellType, numberCellType, ratingCellType, selectionCellType, textareaCellType, textCellType, };
+export { actionMenuCellType, booleanCellType, currencyCellType, dateCellType, lookupCellType, numberCellType, percentageCellType, ratingCellType, selectionCellType, textareaCellType, textCellType, };
 export { TextareaEditor } from './text/index.js';

package/dist/runtime/cell-types/index.js

@@ -4,6 +4,7 @@ import { currencyCellType } from "./currency/index.js";
 import { dateCellType } from "./date/index.js";
 import { lookupCellType } from "./lookup/index.js";
 import { numberCellType } from "./number/index.js";
+import { percentageCellType } from "./percentage/index.js";
 import { ratingCellType } from "./rating/index.js";
 import { selectionCellType } from "./selection/index.js";
 import { textareaCellType, textCellType } from "./text/index.js";
@@ -17,6 +18,7 @@ export const builtInCellTypes = [
   actionMenuCellType,
   ratingCellType,
   currencyCellType,
+  percentageCellType,
   lookupCellType
 ];
 export {
@@ -26,6 +28,7 @@ export {
   dateCellType,
   lookupCellType,
   numberCellType,
+  percentageCellType,
   ratingCellType,
   selectionCellType,
   textareaCellType,

package/dist/runtime/cell-types/number/NumberFilter.vue

@@ -25,7 +25,7 @@ function clearFilter() {
 </script>
 
 <template>
-  <div class="min-w-[200px] space-y-2 p-2">
+  <div class="min-w-50 space-y-2 p-2">
     <div class="flex items-center gap-2">
       <USelect
         v-model="operator"

package/dist/runtime/cell-types/percentage/PercentageEditor.d.vue.ts

@@ -0,0 +1,15 @@
+import type { NuGridCellEditorProps } from '../../types/index.js';
+type __VLS_Props = NuGridCellEditorProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "update:isNavigating": (value: boolean) => any;
+    "stop-editing": (moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any;
+    "cancel-editing": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:isNavigating"?: ((value: boolean) => any) | undefined;
+    "onStop-editing"?: ((moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any) | undefined;
+    "onCancel-editing"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/percentage/PercentageEditor.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useNuGridCellEditor } from "../../composables";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  cell: { type: null, required: true },
+  row: { type: Object, required: true },
+  isNavigating: { type: Boolean, required: true },
+  shouldFocus: { type: Boolean, required: true },
+  validationError: { type: [String, null], required: false },
+  showValidationErrors: { type: String, required: false },
+  interactionRouter: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "stop-editing", "cancel-editing", "update:isNavigating"]);
+const inputRef = ref(null);
+const { handleKeydown, handleBlur } = useNuGridCellEditor(props, emit, inputRef);
+const storageMode = computed(
+  () => props.cell?.column?.columnDef?.percentageStorage ?? "decimal"
+);
+const displayValue = computed(() => {
+  if (props.modelValue === null || props.modelValue === void 0) return "";
+  const numValue = Number(props.modelValue);
+  if (Number.isNaN(numValue)) return "";
+  return storageMode.value === "decimal" ? numValue * 100 : numValue;
+});
+const handleInput = (value) => {
+  if (value === "" || value === null || value === void 0) {
+    emit("update:modelValue", null);
+    return;
+  }
+  const numValue = Number(value);
+  if (Number.isNaN(numValue)) {
+    emit("update:modelValue", null);
+    return;
+  }
+  const storageValue = storageMode.value === "decimal" ? numValue / 100 : numValue;
+  emit("update:modelValue", storageValue);
+};
+</script>
+
+<template>
+  <div class="flex items-center w-full">
+    <UInput
+      ref="inputRef"
+      :model-value="displayValue"
+      type="number"
+      step="0.1"
+      class="w-full pl-0.5!"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+      @keydown="handleKeydown"
+    />
+    <span class="ml-1 text-gray-500 dark:text-gray-400 shrink-0">%</span>
+  </div>
+</template>

package/dist/runtime/cell-types/percentage/PercentageEditor.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NuGridCellEditorProps } from '../../types/index.js';
+type __VLS_Props = NuGridCellEditorProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "update:isNavigating": (value: boolean) => any;
+    "stop-editing": (moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any;
+    "cancel-editing": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:isNavigating"?: ((value: boolean) => any) | undefined;
+    "onStop-editing"?: ((moveDirection?: "up" | "down" | "next" | "previous" | undefined) => any) | undefined;
+    "onCancel-editing"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/cell-types/percentage/PercentageFilter.d.vue.ts

@@ -0,0 +1,7 @@
+import type { NuGridFilterContext } from '../../types/cells.js';
+interface Props {
+    context: NuGridFilterContext;
+}
+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/cell-types/percentage/PercentageFilter.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, ref } from "vue";
+const props = defineProps({
+  context: { type: Object, required: true }
+});
+const filterValue = computed({
+  get: () => props.context.filterValue.value,
+  set: (value) => props.context.setFilterValue(value)
+});
+const operator = ref("equals");
+const operators = [
+  { value: "equals", label: "Equals" },
+  { value: "greaterThan", label: "Greater than" },
+  { value: "lessThan", label: "Less than" },
+  { value: "greaterThanOrEqual", label: "Greater than or equal" },
+  { value: "lessThanOrEqual", label: "Less than or equal" },
+  { value: "between", label: "Between" }
+];
+const filterValue2 = ref(null);
+function clearFilter() {
+  filterValue.value = null;
+  filterValue2.value = null;
+  props.context.clearFilter();
+}
+function toStorageValue(displayValue) {
+  if (displayValue === null || displayValue === "") return null;
+  const num = Number(displayValue);
+  if (Number.isNaN(num)) return null;
+  return num / 100;
+}
+</script>
+
+<template>
+  <div class="min-w-[200px] space-y-2 p-2">
+    <div class="flex items-center gap-2">
+      <USelect
+        v-model="operator"
+        :options="operators"
+        option-attribute="label"
+        value-attribute="value"
+        class="flex-1"
+      />
+      <UButton
+        v-if="context.isFiltered"
+        icon="i-heroicons-x-mark"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        @click="clearFilter"
+      />
+    </div>
+    <div class="flex items-center gap-1">
+      <UInput
+        v-model="filterValue"
+        type="number"
+        placeholder="Value..."
+        autofocus
+        class="flex-1"
+        @update:model-value="context.setFilterValue(toStorageValue($event))"
+      />
+      <span class="text-gray-500 dark:text-gray-400 shrink-0">%</span>
+    </div>
+    <div v-if="operator === 'between'" class="flex items-center gap-1">
+      <UInput
+        v-model="filterValue2"
+        type="number"
+        placeholder="To..."
+        class="flex-1"
+        @update:model-value="
+  context.setFilterValue({
+    from: toStorageValue(filterValue),
+    to: toStorageValue(filterValue2)
+  })
+"
+      />
+      <span class="text-gray-500 dark:text-gray-400 shrink-0">%</span>
+    </div>
+  </div>
+</template>

package/dist/runtime/cell-types/percentage/PercentageFilter.vue.d.ts

@@ -0,0 +1,7 @@
+import type { NuGridFilterContext } from '../../types/cells.js';
+interface Props {
+    context: NuGridFilterContext;
+}
+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/cell-types/percentage/index.d.ts

@@ -0,0 +1,10 @@
+import type { NuGridCellType } from '../../types/cells.js';
+/**
+ * Percentage cell type
+ * Displays values as percentages with % suffix
+ *
+ * Storage modes (configurable via percentageStorage column option):
+ * - 'decimal' (default): Values stored as 0-1, displayed as 0-100%
+ * - 'percent': Values stored as 0-100, displayed as 0-100%
+ */
+export declare const percentageCellType: NuGridCellType;

package/dist/runtime/cell-types/percentage/index.js

@@ -0,0 +1,38 @@
+import PercentageEditor from "./PercentageEditor.vue";
+import PercentageFilter from "./PercentageFilter.vue";
+export const percentageCellType = {
+  name: "percentage",
+  displayName: "Percentage",
+  description: "Percentage column with % formatting",
+  editor: PercentageEditor,
+  filter: {
+    component: PercentageFilter,
+    defaultOperator: "equals"
+  },
+  enableFiltering: true,
+  validation: (value) => {
+    if (value === null || value === void 0) {
+      return { valid: true };
+    }
+    const numValue = Number(value);
+    if (Number.isNaN(numValue)) {
+      return {
+        valid: false,
+        message: "Value must be a valid number"
+      };
+    }
+    return { valid: true };
+  },
+  formatter: (value, context) => {
+    if (value === null || value === void 0) return "";
+    const numValue = Number(value);
+    if (Number.isNaN(numValue)) return String(value);
+    const storageMode = context.columnDef.percentageStorage ?? "decimal";
+    const displayValue = storageMode === "decimal" ? numValue * 100 : numValue;
+    const decimals = context.columnDef.percentageDecimals ?? 1;
+    return `${displayValue.toFixed(decimals)}%`;
+  },
+  defaultColumnDef: {
+    size: 100
+  }
+};

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

@@ -1,5 +1,6 @@
 import type { TableData, TableSlots } from '@nuxt/ui';
 import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
 import type { NuGridStateSnapshot } from '../composables/_internal/useNuGridStatePersistence.js';
 import type { NuGridAddRowState, NuGridCellClickEvent, NuGridCellEditingCancelledEvent, NuGridCellEditingStartedEvent, NuGridCellValueChangedEvent, NuGridExcelExportOptions, NuGridFilterChangedEvent, NuGridFocusedCellChangedEvent, NuGridFocusedRowChangedEvent, NuGridProps, NuGridRowClickEvent, NuGridSortChangedEvent } from '../types/index.js';
 import type { RowDragEvent } from '../types/drag-drop.js';
@@ -12,7 +13,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         columnPinning?: ColumnPinningState;
         columnSizing?: ColumnSizingState;
         columnSizingInfo?: ColumnSizingInfoState;
-        rowSelection?: RowSelectionState;
+        selectedRows?: RowSelectionState;
         rowPinning?: RowPinningState;
         sorting?: SortingState;
         grouping?: GroupingState;
@@ -44,7 +45,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
         "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
         "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
+        "onUpdate:selectedRows"?: ((value: RowSelectionState) => any) | undefined;
         "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
         "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
         "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
@@ -56,12 +57,14 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         readonly $el: any;
-        tableRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        tableRef: Ref<HTMLDivElement | null, HTMLDivElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;
-        autoSizeColumns: (mode?: "fitCell" | "fitGrid") => void;
+        autoSizeColumns: (mode?: "content" | "fill") => void;
         autoSizeColumn: (columnId: string) => void;
+        autosizeReady: Ref<boolean, boolean>;
         getState: () => {};
         setState: (_snapshot: NuGridStateSnapshot) => void;
+        clearState: () => void;
         addRowState: import("vue").ComputedRef<NuGridAddRowState>;
         excelExport: (filenameOrOptions?: string | NuGridExcelExportOptions, sheetName?: string) => Promise<void>;
         getSelectedRows: <TRow = T>() => TRow[];
@@ -83,7 +86,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: (((evt: "rowDragged", event: RowDragEvent<T>) => void) & ((evt: "cellEditingCancelled", event: NuGridCellEditingCancelledEvent<T>) => void) & ((evt: "cellEditingStarted", event: NuGridCellEditingStartedEvent<T>) => void) & ((evt: "stateChanged", state: NuGridStateSnapshot) => void) & ((evt: "filterChanged", event: NuGridFilterChangedEvent) => void) & ((evt: "sortChanged", event: NuGridSortChangedEvent) => void) & ((evt: "focusedRowChanged", event: NuGridFocusedRowChangedEvent<T>) => void) & ((evt: "focusedCellChanged", event: NuGridFocusedCellChangedEvent<T>) => void) & ((evt: "cellClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellDoubleClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowDoubleClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellValueChanged", event: NuGridCellValueChangedEvent<T>) => void) & ((evt: "rowSelectionChanged", event: RowSelectionState) => void) & ((evt: "ready") => void) & ((evt: "rowAddRequested", row: T) => void) & ((evt: "addRowStateChanged", state: NuGridAddRowState) => void)) & (((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void) & ((evt: "update:focusedRowId", value: string | null) => void));
+    emit: (((evt: "rowDragged", event: RowDragEvent<T>) => void) & ((evt: "cellEditingCancelled", event: NuGridCellEditingCancelledEvent<T>) => void) & ((evt: "cellEditingStarted", event: NuGridCellEditingStartedEvent<T>) => void) & ((evt: "stateChanged", state: NuGridStateSnapshot) => void) & ((evt: "filterChanged", event: NuGridFilterChangedEvent) => void) & ((evt: "sortChanged", event: NuGridSortChangedEvent) => void) & ((evt: "focusedRowChanged", event: NuGridFocusedRowChangedEvent<T>) => void) & ((evt: "focusedCellChanged", event: NuGridFocusedCellChangedEvent<T>) => void) & ((evt: "cellClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellDoubleClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowDoubleClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellValueChanged", event: NuGridCellValueChangedEvent<T>) => void) & ((evt: "rowSelectionChanged", event: RowSelectionState) => void) & ((evt: "ready") => void) & ((evt: "rowAddRequested", row: T) => void) & ((evt: "addRowStateChanged", state: NuGridAddRowState) => void)) & (((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:selectedRows", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void) & ((evt: "update:focusedRowId", value: string | null) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/NuGrid.vue

@@ -43,9 +43,9 @@ const props = defineProps({
   ui: { type: null, required: false },
   preset: { type: String, required: false },
   focus: { type: Object, required: false },
-  editing: { type: Object, required: false },
+  editing: { type: [Boolean, Object], required: false },
   validation: { type: [Boolean, Object], required: false },
-  selection: { type: [Boolean, String, Object], required: false },
+  rowSelection: { type: [Boolean, String, Object], required: false },
   actions: { type: [Boolean, Object], required: false },
   columnDefaults: { type: Object, required: false },
   layout: { type: Object, required: false },
@@ -57,7 +57,7 @@ const props = defineProps({
   theme: { type: [String, Object], required: false },
   virtualization: { type: [Boolean, Object], required: false },
   cellTypes: { type: Array, required: false },
-  skipAutoSizeColumns: { type: Array, required: false },
+  dataTypeInference: { type: Boolean, required: false },
   rowDragOptions: { type: Object, required: false },
   rowId: { type: [String, Function], required: false },
   addNewRow: { type: [Boolean, Object], required: false },
@@ -143,7 +143,7 @@ const columnSizingState = defineModel("columnSizing", { type: Object, ...{ defau
 const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{
   default: {}
 } });
-const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
+const rowSelectionState = defineModel("selectedRows", { type: Object, ...{ default: {} } });
 const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
 const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
 const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
@@ -160,14 +160,18 @@ const initPaginationState = () => {
   }
 };
 initPaginationState();
-const rowSelectionModeRef = computed(() => hasRowSlot.value ? false : props.selection ?? false);
+const rowSelectionModeRef = computed(
+  () => hasRowSlot.value ? false : props.rowSelection ?? false
+);
 const actionMenuRef = computed(() => props.actions ?? false);
+const dataTypeInferenceRef = computed(() => props.dataTypeInference ?? true);
 const { columns } = useNuGridColumns(
   propsColumns,
   data,
   rowSelectionModeRef,
   actionMenuRef,
-  columnVisibilityState
+  columnVisibilityState,
+  dataTypeInferenceRef
 );
 const { ui, checkboxTheme } = useNuGridUI(props);
 const { hasFooter } = useNuGridFooter(columns);
@@ -250,6 +254,7 @@ watch(
 );
 const rows = orderedRows;
 const stickyEnabled = computed(() => props.layout?.stickyHeaders ?? false);
+const resizeMode = computed(() => props.layout?.resizeMode ?? "shift");
 const {
   virtualizer,
   virtualizationEnabled,
@@ -266,7 +271,21 @@ const {
   stickyEnabled,
   hasFooter
 });
-const { handleResizeStart, handleGroupResizeStart, resizingGroupId, resizingColumnId } = useNuGridColumnResize(props, tableApi);
+const {
+  handleResizeStart,
+  handleGroupResizeStart,
+  resizingGroupId,
+  resizingColumnId,
+  manuallyResizedColumns,
+  getContainerWidth,
+  getSizingAsRatios,
+  applySizingFromRatios
+} = useNuGridColumnResize(props, tableApi, tableRef);
+statePersistence.setResizeHelpers({
+  getContainerWidth,
+  getSizingAsRatios,
+  applySizingFromRatios
+});
 const dragFns = useNuGridColumnDragDrop(tableApi, states.columnOrderState, tableRef);
 const rowDragOptions = computed(() => props.rowDragOptions || { enabled: false });
 const rowDragFns = useNuGridRowDragDrop(
@@ -439,7 +458,8 @@ provide("nugrid-resize", {
   handleResizeStart,
   handleGroupResizeStart,
   resizingGroupId,
-  resizingColumnId
+  resizingColumnId,
+  manuallyResizedColumns
 });
 provide("nugrid-virtualization", {
   virtualizer,
@@ -470,7 +490,9 @@ provide("nugrid-ui-config", {
   showColumnVisibility: computed(() => props.columnDefaults?.menu?.visibilityToggle ?? true),
   columnMenuButton: computed(() => props.columnDefaults?.menu?.button),
   wrapText: computed(() => props.columnDefaults?.wrapText ?? false),
-  checkboxTheme
+  checkboxTheme,
+  autoSizeMode: autosizeFns.autoSizeMode,
+  resizeMode
 });
 provide("nugrid-validation", {
   // Expose validation error display settings so editors can inject without prop wiring
@@ -484,6 +506,10 @@ provide("nugrid-row-interactions", {
 provide("nugrid-interaction-router", {
   interactionRouter
 });
+const cellSlots = Object.fromEntries(
+  Object.entries(slots).filter(([name]) => name.endsWith("-cell"))
+);
+provide("nugrid-cell-slots", cellSlots);
 provide(NUGRID_EVENTS_KEY, eventEmitter);
 provide("nugrid-multi-row", {
   enabled: computed(() => {
@@ -543,6 +569,7 @@ provide("nugrid-scroll-state", {
 useNuGridFocusInit(props, focusFns, groupingFns?.navigableRows ?? rows);
 onMounted(() => {
   nextTick(() => {
+    statePersistence.applyPendingRatios();
     emit("ready");
   });
 });
@@ -605,8 +632,13 @@ defineExpose({
   tableApi,
   autoSizeColumns: autosizeFns.autoSizeColumns,
   autoSizeColumn: autosizeFns.autoSizeColumn,
+  autosizeReady: autosizeFns.autosizeReady,
   getState: statePersistence.getState,
   setState: statePersistence.setState,
+  clearState: () => {
+    statePersistence.clearState();
+    manuallyResizedColumns.value = /* @__PURE__ */ new Set();
+  },
   addRowState,
   excelExport,
   getSelectedRows,

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

@@ -1,5 +1,6 @@
 import type { TableData, TableSlots } from '@nuxt/ui';
 import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
 import type { NuGridStateSnapshot } from '../composables/_internal/useNuGridStatePersistence.js';
 import type { NuGridAddRowState, NuGridCellClickEvent, NuGridCellEditingCancelledEvent, NuGridCellEditingStartedEvent, NuGridCellValueChangedEvent, NuGridExcelExportOptions, NuGridFilterChangedEvent, NuGridFocusedCellChangedEvent, NuGridFocusedRowChangedEvent, NuGridProps, NuGridRowClickEvent, NuGridSortChangedEvent } from '../types/index.js';
 import type { RowDragEvent } from '../types/drag-drop.js';
@@ -12,7 +13,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         columnPinning?: ColumnPinningState;
         columnSizing?: ColumnSizingState;
         columnSizingInfo?: ColumnSizingInfoState;
-        rowSelection?: RowSelectionState;
+        selectedRows?: RowSelectionState;
         rowPinning?: RowPinningState;
         sorting?: SortingState;
         grouping?: GroupingState;
@@ -44,7 +45,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
         "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
         "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
+        "onUpdate:selectedRows"?: ((value: RowSelectionState) => any) | undefined;
         "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
         "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
         "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
@@ -56,12 +57,14 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         readonly $el: any;
-        tableRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        tableRef: Ref<HTMLDivElement | null, HTMLDivElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;
-        autoSizeColumns: (mode?: "fitCell" | "fitGrid") => void;
+        autoSizeColumns: (mode?: "content" | "fill") => void;
         autoSizeColumn: (columnId: string) => void;
+        autosizeReady: Ref<boolean, boolean>;
         getState: () => {};
         setState: (_snapshot: NuGridStateSnapshot) => void;
+        clearState: () => void;
         addRowState: import("vue").ComputedRef<NuGridAddRowState>;
         excelExport: (filenameOrOptions?: string | NuGridExcelExportOptions, sheetName?: string) => Promise<void>;
         getSelectedRows: <TRow = T>() => TRow[];
@@ -83,7 +86,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: (((evt: "rowDragged", event: RowDragEvent<T>) => void) & ((evt: "cellEditingCancelled", event: NuGridCellEditingCancelledEvent<T>) => void) & ((evt: "cellEditingStarted", event: NuGridCellEditingStartedEvent<T>) => void) & ((evt: "stateChanged", state: NuGridStateSnapshot) => void) & ((evt: "filterChanged", event: NuGridFilterChangedEvent) => void) & ((evt: "sortChanged", event: NuGridSortChangedEvent) => void) & ((evt: "focusedRowChanged", event: NuGridFocusedRowChangedEvent<T>) => void) & ((evt: "focusedCellChanged", event: NuGridFocusedCellChangedEvent<T>) => void) & ((evt: "cellClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellDoubleClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowDoubleClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellValueChanged", event: NuGridCellValueChangedEvent<T>) => void) & ((evt: "rowSelectionChanged", event: RowSelectionState) => void) & ((evt: "ready") => void) & ((evt: "rowAddRequested", row: T) => void) & ((evt: "addRowStateChanged", state: NuGridAddRowState) => void)) & (((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void) & ((evt: "update:focusedRowId", value: string | null) => void));
+    emit: (((evt: "rowDragged", event: RowDragEvent<T>) => void) & ((evt: "cellEditingCancelled", event: NuGridCellEditingCancelledEvent<T>) => void) & ((evt: "cellEditingStarted", event: NuGridCellEditingStartedEvent<T>) => void) & ((evt: "stateChanged", state: NuGridStateSnapshot) => void) & ((evt: "filterChanged", event: NuGridFilterChangedEvent) => void) & ((evt: "sortChanged", event: NuGridSortChangedEvent) => void) & ((evt: "focusedRowChanged", event: NuGridFocusedRowChangedEvent<T>) => void) & ((evt: "focusedCellChanged", event: NuGridFocusedCellChangedEvent<T>) => void) & ((evt: "cellClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellDoubleClicked", event: NuGridCellClickEvent<T>) => void) & ((evt: "rowDoubleClicked", event: NuGridRowClickEvent<T>) => void) & ((evt: "cellValueChanged", event: NuGridCellValueChangedEvent<T>) => void) & ((evt: "rowSelectionChanged", event: RowSelectionState) => void) & ((evt: "ready") => void) & ((evt: "rowAddRequested", row: T) => void) & ((evt: "addRowStateChanged", state: NuGridAddRowState) => void)) & (((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:selectedRows", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void) & ((evt: "update:focusedRowId", value: string | null) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };