\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",[3187,3188,3189],{"name":3155,"color":3156},{"name":3175,"color":3176},{"name":3178,"color":3176},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.729277,{"description":3196,"labels":3197,"number":3200,"owner":3144,"repository":3145,"state":3161,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### Description\n\nI recently updated to the v3, which now uses Nuxt I18n for its own component translations. Since this update, my existing i18n configuration no longer works as expected. It seems the framework’s new i18n setup conflicts with or overrides my own translations, and I’m unable to figure out how to properly extend its default localization to include my own.\n\nCould you please provide guidance on how to configure or extend the new i18n setup so that my existing translations remain functional?\n\n",[3198,3199],{"name":3155,"color":3156},{"name":3158,"color":3159},2956,"How to extend Nuxt I18n translations?","2025-03-28T17:37:21Z","https://github.com/nuxt/ui/issues/2956",0.74257827,{"description":3206,"labels":3207,"number":3210,"owner":3144,"repository":3145,"state":3161,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[3208,3209],{"name":3155,"color":3156},{"name":3158,"color":3159},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7544098,{"description":3216,"labels":3217,"number":3219,"owner":3144,"repository":3145,"state":3161,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHow can add a class to the \"selectable\" column? Other columns I can use the `class` attribute (https://ui.nuxt.com/components/table#columns) for the column, but for the automatically showing \"selectable\" column, there's no such way to customize it\n\n### Additional context\n\n_No response_",[3218],{"name":3138,"color":3139},2377,"Ability to add custom column data (specifically class) to automatically showing selectable column","2024-11-12T17:12:38Z","https://github.com/nuxt/ui/issues/2377",0.7546627,{"description":3225,"labels":3226,"number":3230,"owner":3144,"repository":3145,"state":3161,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Description\n\nDescription:\nI am currently using the UTable component from Nuxt UI and have encountered a limitation regarding the customization of table headers. Specifically, I need to create a table with multi-row headers and the ability to merge columns using colspan. For example, the multi-row spanning column headers shown in the image.However, the current implementation of the UTable component does not seem to support this feature.\n\n\nCurrent Behavior:\n\nThe header property allows for custom content using the h function, but it is limited to single-column customization.\nThe available slots are primarily designed for single-column or specific row customization and do not support multi-column header customization.\nExpected Behavior:\n\nAbility to define headers that span multiple rows and columns.\nSupport for colspan and rowspan attributes in the header configuration to allow for more complex table layouts.\nEnhanced slot functionality to support multi-column header customization.\nUse Case:\nThis feature is essential for creating complex data tables where grouped headers are necessary for better data organization and presentation. It is particularly useful in scenarios where data needs to be categorized under broader headings.\n\nProposed Solution:\n\nIntroduce a mechanism in the UTable component to allow for multi-row and multi-column header definitions.\nProvide examples and documentation on how to implement these features using the existing API or through new enhancements.\nConsider expanding the slot functionality to support more complex header customizations.\nAdditional Context:\n\nThis feature is commonly supported in other table libraries and would greatly enhance the flexibility and usability of the UTable component in Nuxt UI.\nEnvironment:\n\nNuxt UI version: [3.0.0-alpha.12]\nNuxt version: [^3.15.4]\n\nRelated Issues Link:\nhttps://github.com/nuxt/ui/issues/1289#issuecomment-2652919275\nhttps://github.com/nuxt/ui/issues/1651\nhttps://github.com/nuxt/ui/issues/2053\n\nRelated Documentation Link:\nhttps://ui3.nuxt.dev/components/table\n\n### Additional context\n\n_No response_",[3227,3228,3229],{"name":3138,"color":3139},{"name":3158,"color":3159},{"name":3141,"color":3142},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.76038253,{"description":3236,"labels":3237,"number":3242,"owner":3144,"repository":3145,"state":3161,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### Description\n\nCurrently, the table component (\u003Cutable>) in NuxtUI lacks the ability to set colspan and rowspan for cells within the table. Adding this feature would enhance the capability and flexibility in structuring more complex table data.\n\n### Additional context\n\n_No response_",[3238,3239,3241],{"name":3138,"color":3139},{"name":3240,"color":3142},"wontfix-v2",{"name":3158,"color":3159},1651,"Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.76168454,{"description":3248,"labels":3249,"number":3251,"owner":3144,"repository":3145,"state":3161,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### 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",[3250],{"name":3170,"color":3171},3367,"PR 2600 redraws entire table introducing performance and usability issues","2025-03-08T12:13:14Z","https://github.com/nuxt/ui/issues/3367",0.764599,["Reactive",3257],{},["Set"],["ShallowReactive",3260],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsE-GbJmWHWviXtH4jIp4zjt6n-ZEgudOEMkIKgMEW_M":-1},"/nuxt/ui/4961"]