@nu-grid/nuxt 0.2.0 → 0.3.0

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

@@ -4,6 +4,7 @@ import { createReusableTemplate } from "@vueuse/core";
 import { Primitive } from "reka-ui";
 import { computed, inject, toValue } from "vue";
 import {
+  getFlexHeaderStyle,
   getHeaderEffectivePinning,
   getHeaderPinningStyle,
   resolveStyleObject,
@@ -18,9 +19,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 },
@@ -32,7 +33,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 },
@@ -99,7 +100,13 @@ const rows = computed(() => {
   return [...currentRows];
 });
 const { dragFns, rowDragOptions } = dragContext;
-const { handleResizeStart, handleGroupResizeStart, resizingGroupId, resizingColumnId } = resizeContext;
+const {
+  handleResizeStart,
+  handleGroupResizeStart,
+  resizingGroupId,
+  resizingColumnId,
+  manuallyResizedColumns
+} = resizeContext;
 const {
   virtualizer,
   virtualizationEnabled,
@@ -113,8 +120,24 @@ const {
   sortIcons: gridSortIcons,
   scrollbarClass,
   scrollbarThemeClass,
-  scrollbarAttr
+  scrollbarAttr,
+  autoSizeMode,
+  resizeMode
 } = uiConfigContext;
+const useCssFlexDistribution = computed(() => autoSizeMode?.value === "fill");
+const shouldUseFlexWidth = computed(() => {
+  if (!useCssFlexDistribution.value) return false;
+  if (resizeMode?.value === "shift") return true;
+  return manuallyResizedColumns.value.size === 0;
+});
+const flexStyleOptions = computed(() => ({
+  useCssFlexDistribution: useCssFlexDistribution.value,
+  manuallyResizedColumns: manuallyResizedColumns.value,
+  columnSizing: tableApi.getState().columnSizing
+}));
+function getStandardHeaderStyle(header) {
+  return getFlexHeaderStyle(header, flexStyleOptions.value);
+}
 const multiRowEnabled = computed(() => multiRowContext?.enabled.value ?? false);
 const multiRowCount = computed(() => multiRowContext?.rowCount.value ?? 1);
 const alignColumns = computed(() => multiRowContext?.alignColumns.value ?? false);
@@ -193,10 +216,22 @@ function getAlignedHeaderStyle(header, visualRowIndex, headerIndexInRow, totalHe
     };
   }
   if (visualRowIndex === 0 || !alignColumns.value) {
+    const useCssFlexDistribution2 = autoSizeMode?.value === "fill";
+    const minSize = header.column.columnDef.minSize ?? 50;
+    const maxSize = header.column.columnDef.maxSize;
+    if (useCssFlexDistribution2) {
+      return {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: `${minSize}px`,
+        ...maxSize && maxSize < Number.MAX_SAFE_INTEGER ? { maxWidth: `${maxSize}px` } : {}
+      };
+    }
     return {
       flexGrow: 1,
       flexBasis: `${header.getSize()}px`,
-      minWidth: `${header.column.columnDef.minSize ?? 50}px`
+      minWidth: `${minSize}px`
     };
   }
   const row0Cols = row0Columns.value;
@@ -263,7 +298,7 @@ function getVirtualItemStyle(type, virtualRow) {
   const useDynamicHeight = virtualizer.value.dynamicRowHeightsEnabled?.value ?? false;
   const stickyTop = stickyOffsets.value.get(virtualRow.index);
   const resolvedHeight = getVirtualItemHeight(virtualRow.index);
-  const width = totalTableWidth.value;
+  const width = shouldUseFlexWidth.value ? "100%" : totalTableWidth.value;
   if (stickyEnabled.value && type === "column-headers") {
     if (stickyTop !== void 0) {
       return {
@@ -308,7 +343,10 @@ function getVirtualItemStyle(type, virtualRow) {
     :data-scrollbars="scrollbarAttr"
   >
     <DefineTableTemplate>
-      <div ref="tableRef" :class="ui.base({ class: [propsUi?.base] })">
+      <div
+        ref="tableRef"
+        :class="ui.base({ class: [propsUi?.base, autoSizeMode === 'fill' && 'w-full'] })"
+      >
         <div v-if="caption || !!slots.caption" :class="ui.caption({ class: [propsUi?.caption] })">
           <slot name="caption">
             {{ caption }}
@@ -423,39 +461,42 @@ function getVirtualItemStyle(type, virtualRow) {
                     :sort-icons="header.column.columnDef.sortIcons"
                   />
                 </div>
-                <NuGridHeaderSortButton
-                  v-if="
+                <!-- Header controls wrapper - absolutely positioned to not affect column width -->
+                <div :class="ui.headerControls({ class: [propsUi?.headerControls] })">
+                  <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="
+                    :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="
+                    :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                  @mousedown="handleResizeStart($event, header)"
-                  @touchstart.passive="handleResizeStart($event, header)"
-                >
-                  <div
-                    :class="
+                    @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="
+                      :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                  />
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -533,9 +574,7 @@ function getVirtualItemStyle(type, virtualRow) {
 ]"
               :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getStandardHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
@@ -617,39 +656,42 @@ function getVirtualItemStyle(type, virtualRow) {
                       :sort-icons="header.column.columnDef.sortIcons"
                     />
                   </div>
-                  <NuGridHeaderSortButton
-                    v-if="
+                  <!-- Header controls wrapper - absolutely positioned to not affect column width -->
+                  <div :class="ui.headerControls({ class: [propsUi?.headerControls] })">
+                    <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="
+                      :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="
+                      :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                    @mousedown="handleResizeStart($event, header)"
-                    @touchstart.passive="handleResizeStart($event, header)"
-                  >
-                    <div
-                      :class="
+                      @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="
+                        :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                    />
+                      />
+                    </div>
                   </div>
                 </div>
               </template>
@@ -787,39 +829,42 @@ function getVirtualItemStyle(type, virtualRow) {
                               :sort-icons="header.column.columnDef.sortIcons"
                             />
                           </div>
-                          <NuGridHeaderSortButton
-                            v-if="
+                          <!-- Header controls wrapper - absolutely positioned to not affect column width -->
+                          <div :class="ui.headerControls({ class: [propsUi?.headerControls] })">
+                            <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="
+                              :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="
+                              :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                            @mousedown="handleResizeStart($event, header)"
-                            @touchstart.passive="handleResizeStart($event, header)"
-                          >
-                            <div
-                              :class="
+                              @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="
+                                :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                            />
+                              />
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -887,9 +932,7 @@ function getVirtualItemStyle(type, virtualRow) {
 ]"
                         :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getStandardHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
@@ -969,39 +1012,42 @@ function getVirtualItemStyle(type, virtualRow) {
                                 :sort-icons="header.column.columnDef.sortIcons"
                               />
                             </div>
-                            <NuGridHeaderSortButton
-                              v-if="
+                            <!-- Header controls wrapper - absolutely positioned to not affect column width -->
+                            <div :class="ui.headerControls({ class: [propsUi?.headerControls] })">
+                              <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="
+                                :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="
+                                :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                              @mousedown="handleResizeStart($event, header)"
-                              @touchstart.passive="handleResizeStart($event, header)"
-                            >
-                              <div
-                                :class="
+                                @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="
+                                  :data-col-resizing="
   resizingColumnId === header.column.id || header.column.getIsResizing() ? 'true' : void 0
 "
-                              />
+                                />
+                              </div>
                             </div>
                           </div>
                         </template>

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

@@ -8,6 +8,21 @@ const props = defineProps({
   cellEditingFns: { type: Object, required: true }
 });
 const uiConfig = inject("nugrid-ui-config", null);
+const cellSlots = inject("nugrid-cell-slots", null);
+const cellSlot = computed(() => {
+  if (!cellSlots) return null;
+  const slotName = `${props.cell.column.id}-cell`;
+  return cellSlots[slotName] ?? null;
+});
+const cellSlotProps = computed(() => ({
+  cell: props.cell,
+  row: props.row,
+  column: props.cell.column,
+  cellIndex: props.cell.column.getIndex(),
+  value: props.cell.getValue(),
+  isEditing: props.cellEditingFns.isEditingCell(props.row, props.cell.column.id),
+  isInvalid: props.cellEditingFns.hasCellValidationError(props.row.id, props.cell.column.id)
+}));
 const wrapperRef = ref(null);
 const capturedHeight = ref(null);
 const addRowContext = inject("nugrid-add-row", null);
@@ -188,8 +203,13 @@ const editorContent = computed(() => {
   </div>
   <!-- Display mode: tooltip handled by grid-level event delegation -->
   <div v-else ref="wrapperRef" :class="wrapperClass" :style="wrapperStyle">
+    <!-- Cell slot takes highest priority in display mode -->
+    <component :is="cellSlot" v-if="cellSlot" v-bind="cellSlotProps" />
     <!-- Function-based renderer -->
-    <component :is="functionRendererResult" v-if="shouldUsePluginRenderer && isRendererFunction" />
+    <component
+      :is="functionRendererResult"
+      v-else-if="shouldUsePluginRenderer && isRendererFunction"
+    />
     <!-- Component-based plugin renderer -->
     <component
       :is="pluginRendererComponent"

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

@@ -12,7 +12,7 @@ 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 { tableApi, ui, propsUi } = coreContext;
 const { allLeafColumns } = performanceContext;
 const { getColumnMenuItems, showColumnVisibility, columnMenuButton } = uiConfigContext;
 const pinColumn = (columnId, side) => {
@@ -354,7 +354,7 @@ const filterComponent = computed(() => {
   <div
     v-if="shouldShowMenu"
     :class="[
-  'relative z-0 flex shrink-0 items-center px-1 transition-opacity duration-200',
+  ui.columnMenu({ class: [propsUi?.columnMenu] }),
   menuOpen ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
 ]"
   >

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

@@ -5,6 +5,7 @@ import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
 import { computed, inject, ref, toValue } from "vue";
 import {
+  getFlexHeaderStyle,
   getHeaderEffectivePinning,
   getHeaderPinningStyle,
   resolveStyleObject,
@@ -21,9 +22,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 },
@@ -35,7 +36,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 },
@@ -97,7 +98,7 @@ if (!coreContext || !dragContext || !resizeContext || !virtualizationContext ||
 }
 const { tableRef, rootRef, tableApi, ui, hasFooter, propsUi } = coreContext;
 const { dragFns, rowDragOptions } = dragContext;
-const { handleGroupResizeStart, resizingGroupId, resizingColumnId } = resizeContext;
+const { handleGroupResizeStart, resizingGroupId, resizingColumnId, manuallyResizedColumns } = resizeContext;
 const { stickyEnabled } = virtualizationContext;
 const { groupingFns } = groupingContext;
 const { headerGroups, headerGroupsLength, footerGroups } = performanceContext;
@@ -105,9 +106,18 @@ const {
   sortIcons: gridSortIcons,
   scrollbarClass,
   scrollbarThemeClass,
-  scrollbarAttr
+  scrollbarAttr,
+  autoSizeMode
 } = uiConfigContext;
 const { rowSelectionMode } = rowInteractionsContext;
+const flexStyleOptions = computed(() => ({
+  useCssFlexDistribution: autoSizeMode?.value === "fill",
+  manuallyResizedColumns: manuallyResizedColumns.value,
+  columnSizing: tableApi.getState().columnSizing
+}));
+function getHeaderStyle(header) {
+  return getFlexHeaderStyle(header, flexStyleOptions.value);
+}
 const [DefineTableTemplate, ReuseNuGridTemplate] = createReusableTemplate({ inheritAttrs: false });
 const [DefineGroupSubheaderTemplate, ReuseGroupSubheaderTemplate] = createReusableTemplate({ inheritAttrs: false });
 const [DefineHeaderCellTemplate, ReuseHeaderCellTemplate] = createReusableTemplate({ inheritAttrs: false });
@@ -285,9 +295,7 @@ function measureElementRef(el) {
 ]"
       :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
 }"
@@ -373,7 +381,10 @@ function measureElementRef(el) {
   </DefineHeaderCellTemplate>
 
   <DefineTableTemplate>
-    <div ref="tableRef" :class="ui.base({ class: [propsUi?.base] })">
+    <div
+      ref="tableRef"
+      :class="ui.base({ class: [propsUi?.base, autoSizeMode === 'fill' && 'w-full'] })"
+    >
       <div v-if="caption || !!slots.caption" :class="ui.caption({ class: [propsUi?.caption] })">
         <slot name="caption">
           {{ caption }}
@@ -519,9 +530,7 @@ function measureElementRef(el) {
 ]"
                         :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}
@@ -616,9 +625,7 @@ function measureElementRef(el) {
 ]"
             :style="{
   ...resolveStyleObject(header.column.columnDef.meta?.style?.th, header),
-  width: `${header.getSize()}px`,
-  minWidth: `${header.getSize()}px`,
-  maxWidth: `${header.getSize()}px`,
+  ...getHeaderStyle(header),
   ...getHeaderPinningStyle(header),
   ...header.colSpan > 1 ? { flexGrow: header.colSpan } : {},
   ...header.rowSpan > 1 ? { alignSelf: 'stretch' } : {}

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, inject } from "vue";
-import { resolveStyleObject, resolveValue } from "../../composables/_internal";
+import { getFlexCellStyle, resolveStyleObject, resolveValue } from "../../composables/_internal";
 import NuGridCellContent from "./NuGridCellContent.vue";
 const props = defineProps({
   row: { type: Object, required: true },
@@ -19,6 +19,8 @@ const interactionRouterContext = inject(
   "nugrid-interaction-router"
 );
 const multiRowContext = inject("nugrid-multi-row");
+const uiConfigContext = inject("nugrid-ui-config");
+const resizeContext = inject("nugrid-resize");
 if (!coreContext || !dragContext || !focusContext || !performanceContext || !rowInteractionsContext || !interactionRouterContext) {
   throw new Error("NuGridRow must be used within a NuGrid component.");
 }
@@ -29,6 +31,14 @@ const { getVisibleCells, shouldHaveBorder } = performanceContext;
 const { rowInteractions } = rowInteractionsContext;
 const { interactionRouter } = interactionRouterContext;
 const { onRowSelect, onRowHover, onRowContextmenu } = rowInteractions;
+const flexStyleOptions = computed(() => ({
+  useCssFlexDistribution: uiConfigContext?.autoSizeMode?.value === "fill",
+  manuallyResizedColumns: resizeContext?.manuallyResizedColumns.value ?? /* @__PURE__ */ new Set(),
+  columnSizing: tableApi.getState().columnSizing
+}));
+function getCellStyle(cell) {
+  return getFlexCellStyle(cell.column, flexStyleOptions.value);
+}
 const tdClassCache = /* @__PURE__ */ new Map();
 function getTdCacheKey(variants) {
   return `${variants.pinned ? 1 : 0}|${variants.hasLeftBorder ? 1 : 0}|${variants.hasRightBorder ? 1 : 0}|${variants.focusCell ? 1 : 0}|${variants.focusRow ? 1 : 0}|${variants.activeRow ? 1 : 0}|${variants.gridFocused ? 1 : 0}|${variants.rowInvalid ? 1 : 0}|${variants.customClass || ""}`;
@@ -619,9 +629,7 @@ function getMultiRowPinningStyle(cell, _visualRowCells) {
 "
         :style="{
   ...resolveStyleObject(cell.column.columnDef.meta?.style?.td, cell),
-  width: `${cell.column.getSize()}px`,
-  minWidth: `${cell.column.getSize()}px`,
-  maxWidth: `${cell.column.getSize()}px`,
+  ...getCellStyle(cell),
   ...cell.column.getIsPinned() === 'left' ? { left: `${cell.column.getStart('left')}px` } : {},
   ...cell.column.getIsPinned() === 'right' ? { right: `${cell.column.getAfter('right')}px` } : {},
   ...resolveValue(cell.column.columnDef.meta?.colspan?.td, cell) ? { flexGrow: resolveValue(cell.column.columnDef.meta?.colspan?.td, cell) } : {}