Multiple pinned columns on same side overlap instead of positioning sequentially #5594
Description
Environment
-
Operating System:
macOS Sonoma (aarch64) -
Node.js version:
v22.18.0 -
Package Manager:
pnpm 9.10.0 -
Nuxt version:
4.2.1 -
Nuxt CLI version:
3.30.0 -
Nitro version:
2.12.9 -
Builder:
vite -
SSR:
false -
Runtime Config: Standard API base configuration
-
Build Modules:
@nuxt/eslint,@nuxt/ui,@nuxtjs/i18n,@nuxt/icon,@nuxt/fonts,nuxt-open-fetch,@pinia/nuxt,@nuxt/test-utils/module
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.2.1
Reproduction
https://codesandbox.io/p/devbox/charming-ives-r3h9yc?workspaceId=ws_Ny7bbS8vvKR4YQSW8u9Xwu
Description
When pinning multiple columns to the same side (left or right) in UTable, all pinned columns are positioned at the same offset (left: 0 or right: 0), causing them to overlap instead of being positioned sequentially based on their widths.
Expected behavior: Multiple left-pinned columns should be positioned sequentially:
- 1st left-pinned column:
left: 0px - 2nd left-pinned column:
left: [width of 1st column]px - 3rd left-pinned column:
left: [width of 1st + 2nd columns]px
Current behavior: All left-pinned columns get left: 0 via CSS class data-[pinned=left]:left-0, causing them to overlap at the same position.
Technical Analysis: The issue appears to be in the CSS implementation using data attributes:
/* Current implementation - problematic */
[data-pinned="left"] { left: 0; }
[data-pinned="right"] { right: 0; }Should be using calculated inline styles instead:
<!-- Expected output -->
<th style="left: 0px;" data-pinned="left">ID</th>
<th style="left: 200px;" data-pinned="left">Date</th>Additional context
- This affects the core column pinning feature described in the documentation
- The documentation states: "When using column pinning, you should define explicit size values for your columns to ensure proper column width handling, especially with multiple pinned columns"
- Explicit sizes are defined but not being used for positioning calculation
- Issue occurs in clean project setups, not related to specific configurations