\n \u003Cp class=\"text-sm font-medium\">\n {{ namesData.length === 0 ? 'No names loaded' : 'No names found' }}\n \u003C/p>\n \u003Cp class=\"text-xs text-neutral-500 mt-1\">\n {{ namesData.length === 0 ? 'Click \"Load Names\" to fetch data' : 'Try adjusting your search query' }}\n \u003C/p>\n \u003C/div>\n \u003C/template>\n \u003C/UTable>\n```\n\u003C/details>\n\nThe problem:\nHeight of row get bigger when more items added and get smaller while scrolling down, here is the example with 100 Row:\n\nFirst item height:\n\u003Cimg width=\"1217\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d74589f7-a6b3-45ea-afe9-6f7f9ef7ba2d\" />\n\nat middle:\n\u003Cimg width=\"1219\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/653a9f5d-1702-401f-a437-4f61c6c4776e\" />\n\nat end:\n\u003Cimg width=\"1214\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b081a95c-5ffe-4d8e-ab57-64f978cebeea\" />\n\ni tired to play with `UTable.ui` object but that break the style no mater what i do, sometime head col not align with row cells",[3020,3023],{"name":3021,"color":3022},"question","d876e3",{"name":3024,"color":3025},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.77302873,{"description":3035,"labels":3036,"number":3044,"owner":3027,"repository":3028,"state":3045,"title":3046,"updated_at":3047,"url":3048,"score":3049},"### Description\n\nIs there any way to pass in whole row as a slot. I have not found anything like in documentation.",[3037,3038,3039,3042],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3040,"color":3041},"closed-by-bot","ededed",{"name":3043,"color":3041},"stale",3530,"closed","Slot for complete row in `UTable`","2025-06-18T09:01:36Z","https://github.com/nuxt/ui/issues/3530",0.7180652,{"description":3051,"labels":3052,"number":3060,"owner":3027,"repository":3028,"state":3045,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### 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_",[3053,3056,3057],{"name":3054,"color":3055},"enhancement","a2eeef",{"name":3024,"color":3025},{"name":3058,"color":3059},"triage","ffffff",3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7224083,{"description":3066,"labels":3067,"number":3072,"owner":3027,"repository":3028,"state":3045,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### 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_",[3068,3069,3071],{"name":3054,"color":3055},{"name":3070,"color":3059},"wontfix-v2",{"name":3024,"color":3025},1651,"Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.7318105,{"description":3078,"labels":3079,"number":3084,"owner":3027,"repository":3028,"state":3045,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nTo control the rows of the table, I need a slot for them. For instance, if I want to implement a reorder feature using drag and drop, I require a \u003Ctr> element to loop through.\n\n### Additional context\n\n_No response_",[3080,3081,3082,3083],{"name":3054,"color":3055},{"name":3058,"color":3059},{"name":3040,"color":3041},{"name":3043,"color":3041},2685,"[UTable] Add the functionality to include a slot for all \u003Ctr> elements, as well as a 'default' slot.","2025-06-18T09:05:45Z","https://github.com/nuxt/ui/issues/2685",0.74021864,{"description":3090,"labels":3091,"number":3096,"owner":3027,"repository":3028,"state":3045,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Description\n\nGreetings, I noticed in the Utable documentation, nested or children columns are not mentioned. Is it possible to add this feature in the UTable component? \r\n\r\nOr If I missed something, does this feature already exist?\r\n\r\nIn my previous project, I had this feature using NextJS/AntD:\r\n\r\n\r\n**Result:**\r\n\r\n\r\n**Source code:**\r\n\r\n````tsx\r\n {\r\n dataIndex: \"\",\r\n title: \"Parent Column\",\r\n width: 300,\r\n children: [\r\n {\r\n dataIndex: \"ChildrenColumn1\",\r\n title: \"Children Column 1\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n {\r\n dataIndex: \"ChildrenColumn2\",\r\n title: \"Children Column 2.\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n ],\r\n },\r\n````\r\n\r\n\r\nThanks in advance!\r\n\r\n\r\n\n\n### Additional context\n\n_No response_",[3092,3093,3094,3095],{"name":3054,"color":3055},{"name":3058,"color":3059},{"name":3040,"color":3041},{"name":3043,"color":3041},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.7463128,{"description":3102,"labels":3103,"number":3107,"owner":3027,"repository":3028,"state":3045,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Description\r\n\r\nThe code for specifying column width when there is no data is as follows and it is expected\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUTable :empty-state=\"{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }\" :rows=\"people\"\r\n :columns=\"columns\">\r\n \u003Ctemplate #from-data=\"{ row }\">\r\n {{ row.from.value }}\r\n \u003C/template>\r\n \u003C/UTable>\r\n \u003CUNotifications>\r\n \u003Ctemplate #title=\"{ title }\">\r\n \u003Cspan v-html=\"title\" />\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",[3104,3105,3106],{"name":3021,"color":3022},{"name":3040,"color":3041},{"name":3043,"color":3041},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7480234,{"description":3113,"labels":3114,"number":3118,"owner":3027,"repository":3028,"state":3045,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Is your feature request related to a problem? Please describe.\r\n\r\nCurrently, tables work like normal HTML tables. This means that on small screens the width will mostly/always exceed the device width, leaving the user to scroll down through the results.\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nInstead of letting the user scrolling and hide the information from other columns due to the device width, I think a good solution would be to collapse the cells vertically:\r\n\r\n- Headers would be kept as-is, allowing the user to scroll through the header columns.\r\n- The rest of the Table functionality would be kept intact.\r\n\r\n### Describe alternatives you've considered\r\n\r\nCreating my own table with using `table` CSS properties is cumbersome and using HTML's `\u003Ctable>` doesn't leave space for _creativity_.\r\n\r\nAlso, since it's not a Nuxt UI Table, all functionality is lost and must be made from scratch (or forked).\r\n\r\n### Additional context\r\n\r\nThe other approach is to create a new Data element called `List` that would work as table-like, but use `\u003Cdiv>` internally, use CSS to be presented as table-like, offer the same features (sorting, pagination, etc.) , and configure a breakpoint to transform the list into a `grid`.",[3115,3116,3117],{"name":3054,"color":3055},{"name":3040,"color":3041},{"name":3043,"color":3041},527,"[Table] Allow to collapse a row cells vertically on a breakpoint","2025-06-18T09:06:42Z","https://github.com/nuxt/ui/issues/527",0.75279915,{"description":3124,"labels":3125,"number":3129,"owner":3027,"repository":3130,"state":3045,"title":3131,"updated_at":3132,"url":3133,"score":3134},"",[3126],{"name":3127,"color":3128},"design","00bd6f",1209,"nuxt.com","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1209",0.76715153,{"description":3136,"labels":3137,"number":3129,"owner":3027,"repository":3028,"state":3045,"title":3141,"updated_at":3142,"url":3143,"score":3134},"### Description\n\nAllow sorting by multiple columns by holding a modifier modifier key and clicking multiple columns.\r\n\r\nAs an example:\r\nhttps://primevue.org/datatable/#multiple_sort\n\n### Additional context\n\n_No response_",[3138,3139,3140],{"name":3054,"color":3055},{"name":3070,"color":3059},{"name":3024,"color":3025},"`UTable` sort by multiple columns","2025-03-24T14:57:22Z","https://github.com/nuxt/ui/issues/1209",["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT54lqG05U5eLloUHYcCs_-b5oyp-KOSyQeM_QhHXeyA":-1},"/nuxt/ui/2053"]