\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[3190,3191,3194],{"name":3159,"color":3160},{"name":3192,"color":3193},"closed-by-bot","ededed",{"name":3195,"color":3193},"stale",2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.69232017,{"description":3202,"labels":3203,"number":3212,"owner":3165,"repository":3165,"state":3167,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\r\n\r\nNode: 18.17.1\r\nVue 3.3.4\r\nNuxt 3.7.3\r\nVite 4.4.9\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-2xkzzs?file=nuxt.config.ts\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nif we leave a comment before the first element in the template\r\n`style and class merging` do not work\r\n\r\n### Additional context\r\n\r\nmy workaround now:\r\n- move the comment into the div\r\n- add `:class=\"$attrs.class\"` to the element in the child component which I want to extend class from parent\r\n- remove whitespace: 'preserve' (this way is very bad because nuxt 3/vite will render template without extra space as I write in this https://github.com/vitejs/vite/discussions/14378)\r\n\r\n### Logs\r\n\r\n_No response_",[3204,3207,3210],{"name":3205,"color":3206},"3.x","29bc7f",{"name":3208,"color":3209},"pending triage","E99695",{"name":3180,"color":3211},"E8A36D",23353,"`class and style merging` conflict with vue.template.compilerOptions.whitespace preserve","2023-09-26T00:00:49Z","https://github.com/nuxt/nuxt/issues/23353",0.6975717,{"labels":3218,"number":3225,"owner":3165,"repository":3165,"state":3167,"title":3226,"updated_at":3227,"url":3228,"score":3229},[3219,3221,3222],{"name":3195,"color":3220},"ffffff",{"name":3208,"color":3209},{"name":3223,"color":3224},"2.x","d4c5f9",9782,"Nuxt + Vuetify Class=\"col-4\" only works in npm run dev and not in npm run start","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9782",0.7054773,{"description":3231,"labels":3232,"number":3234,"owner":3165,"repository":3166,"state":3167,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.11.1\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: devtools, modules, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.20.0\n- Build Modules: -\n\n### Version\n\nv2.20.0 and later\n\n### Reproduction\n\nI could not get Stackblitz to work when changing Nuxt UI versions due to internal 503 errors. Please forgive me for using codesandbox instead.\n\n**Nuxt UI v2.19.1** - Working as expected. You can edit and tab between inputs.\nhttps://codesandbox.io/p/devbox/nuxt-v2-19-1-lz5zvk\n\n**Nuxt UI v2.20.0** - Cursor position lost when typing. Second column (email) uses `.lazy` which allows typing but loses focus when tabbing after edit.\nhttps://codesandbox.io/p/devbox/nuxt-v2-20-0-x9xylj\n\n\n\n\n\n### Description\n\nRelease v2.20.0 includes PR #2600 which redraws every table column slot on _any_ changes to the table source data. This introduces significant performance impact on large tables and makes it difficult for users to interact with inputs within tables since the redraw will lose cursor position. This also makes it impossible to tab between columns when data changes.\n\nI intend to submit a PR which reverts the changes made in #2600.\n\n### Additional context\n\nI demonstrate in https://github.com/nuxt/ui/issues/2004#issuecomment-2671025567 that the issue reported which prompted PR #2006 was a misunderstanding and was not related to table behavior at all. Therefore, that PR is unnecessary and does not directly address the issue, yet it introduces unintended side effects.\n\n",[3233],{"name":3176,"color":3177},3367,"PR 2600 redraws entire table introducing performance and usability issues","2025-03-08T12:13:14Z","https://github.com/nuxt/ui/issues/3367",0.7059569,{"description":3240,"labels":3241,"number":3244,"owner":3165,"repository":3166,"state":3167,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Package\n\nv3.x\n\n### Description\n\nHi,\nIs there a way to allow users to adjust column widths using a column resize handler?",[3242,3243],{"name":3159,"color":3160},{"name":3162,"color":3163},4961,"Table component column width","2025-09-13T09:36:00Z","https://github.com/nuxt/ui/issues/4961",0.7074684,{"description":3250,"labels":3251,"number":3254,"owner":3165,"repository":3166,"state":3167,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3252,3253],{"name":3176,"color":3177},{"name":3162,"color":3163},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.70974094,{"description":3260,"labels":3261,"number":3263,"owner":3165,"repository":3166,"state":3167,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.3.0\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\n2.18.7\n\n### Reproduction\n\nPut a tooltip with an icon within the `\u003Ctemplate #trailing>` slot.\n\n### Description\n\nIf an element in an input's \"trailing\" slot is wrapped in the tooltip component, it doesn't show the tooltip when hovered/clicked.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3262],{"name":3176,"color":3177},2461,"Tooltip in \"trailing\" slot of input deosn't work.","2024-10-25T15:26:45Z","https://github.com/nuxt/ui/issues/2461",0.71098375,{"description":3269,"labels":3270,"number":3272,"owner":3165,"repository":3165,"state":3167,"title":3273,"updated_at":3274,"url":3275,"score":3276},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.3\n- Package Manager: pnpm@9.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @nuxt/icon@1.6.1, @nuxtjs/i18n@9.1.0, @nuxt/fonts@0.10.3\n- Build Modules: -\n\n### Reproduction\n\n```vue\n\u003Ctemplate>\n \u003Ctable class=\"table-auto border-collapse\">\n \u003Ccaption class=\"caption-bottom\">\n Table 1: Caption\n \u003C/caption>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>Id\u003C/th>\n \u003Cth>Code\u003C/th>\n \u003Cth>Name\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"n in 5\">\n \u003Ctd>{{ n }}\u003C/td>\n \u003Ctd>Code-{{ n }}\u003C/td>\n \u003Ctd>Name-{{ n }}\u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n```\n\n### Describe the bug\n\nThe `table-auto` and `border-collapse` classes [from the Tilewind stylesheet](https://tailwindcss.com/docs/table-layout) do not work, but the `caption-bottom` class does work (changes the position of the caption).\n\nTilewind is not fully imported and only partially supported?",[3271],{"name":3208,"color":3209},30326,"Partial Tilewind support using Table Layouts as an example","2024-12-23T10:42:10Z","https://github.com/nuxt/nuxt/issues/30326",0.7110248,["Reactive",3278],{},["Set"],["ShallowReactive",3281],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDfcO5zG0gdZ5GF5AOWiAd1rwdDnmDSat_JLnB9Y9dUM":-1},"/nuxt/ui/3988"]