\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",[3049,3050],{"name":3021,"color":3022},{"name":3024,"color":3025},4563,"`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.7765078,{"description":3057,"labels":3058,"number":3061,"owner":3027,"repository":3028,"state":3029,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### Description\n\nIm going through our site for Accessibility and noticed there is no scope attribute on the th elements on UTable. There also seem to be no way for me to add it.\n\nHave this been overlooked, or am i blind? pun intended\n\nhttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#the_scope_attribute",[3059,3060],{"name":3021,"color":3022},{"name":3024,"color":3025},4410,"UTable Accessibility for screen readers (th scope)","2025-06-27T13:33:36Z","https://github.com/nuxt/ui/issues/4410",0.7877127,{"description":3067,"labels":3068,"number":3075,"owner":3027,"repository":3028,"state":3076,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Description\n\nHi,\ni am working on a project where i am using the Table component with a couple of sortable columns, where i need to access the sorted list from the table. i can see the sorted list in the component, but it isn't exposed and also not included in any event.\n\nis there any way i am not aware of to access the sorted list? ",[3069,3070,3073],{"name":3021,"color":3022},{"name":3071,"color":3072},"closed-by-bot","ededed",{"name":3074,"color":3072},"stale",3289,"closed","Table: access sorted list","2025-06-18T09:02:10Z","https://github.com/nuxt/ui/issues/3289",0.74283737,{"description":3082,"labels":3083,"number":3087,"owner":3027,"repository":3028,"state":3076,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Description\n\nThat gives the opportunity to organize better our data based on a KV pair.\r\nLet's take the 1st example of the docs [here](https://ui.nuxt.com/data/table#usage)\r\n\r\nWe have:\r\n```\r\n\u003Cheader> Id | Name | Title | Email | Role \u003C/header>\r\n\u003Crow for each object> {...person} \u003C/row>\r\n```\r\n\r\nWe could have the opportunity to emphesize the different roles like this:\r\n```\r\n\u003Cheader> Id | Name | Title | Email \u003C/header> \u003C= 1 column less\r\n\u003Csection> role: Admin \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Csection> role: Member \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n```\r\nThe Table component already has the ability to sort/filter, there may be a way to implement this without too much work!\r\nThanks for the consideration!\n\n### Additional context\n\n_No response_",[3084,3085,3086],{"name":3038,"color":3039},{"name":3071,"color":3072},{"name":3074,"color":3072},1195,"[Feature] Add section headers/separators in UTable","2025-06-19T02:13:00Z","https://github.com/nuxt/ui/issues/1195",0.75956136,{"description":3093,"labels":3094,"number":3101,"owner":3027,"repository":3028,"state":3076,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nIt would be great to be able to react to keyboard events in the table component, for example using the up and down keys to navigate and the space bar to select a row. Something like:\n```\n\u003CUTable \n ...\n @keyup.up=\"hoverPrevRow\"\n @keyup.down=\"hoverNextRow\"\n @keyup.space=\"selectRow\"\n ...\n/>\n```\nThis will help users operate data tables more efficiently.\n\n### Additional context\n\n_No response_",[3095,3096,3099,3100],{"name":3038,"color":3039},{"name":3097,"color":3098},"triage","ffffff",{"name":3071,"color":3072},{"name":3074,"color":3072},2851,"UTable keyboard events","2025-06-18T09:05:23Z","https://github.com/nuxt/ui/issues/2851",0.77243274,{"description":3107,"labels":3108,"number":3113,"owner":3027,"repository":3028,"state":3076,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst places = ref([])\nconst placeItems = ref([{ id: 1, name: 'Place 1' }, { id: 2, name: 'Place 2' }])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform class=\"flex flex-col gap-2 max-w-54\" @submit.prevent>\n \u003CUInputMenu name=\"places\"\n v-model=\"places\"\n :items=\"placeItems\"\n value-key=\"id\"\n label-key=\"name\"\n icon=\"i-lucide-search\"\n class=\"w-full\"\n required\n multiple/>\n \n \u003CUFormField class=\"mt-2\">\n \u003CUButton type=\"submit\" class=\"block w-full\">Submit\u003C/UButton>\n \u003C/UFormField>\n \u003C/form>\n\u003C/template>\n```\n\n### Description\n\nEven if i choosen some items, i cant submit form https://skr.sh/vSqGuOWV8dZ",[3109,3112],{"name":3110,"color":3111},"bug","d73a4a",{"name":3024,"color":3025},2741,"UInputMenu required attribute works wrong when multiple is enabled","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/2741",0.7776464,{"description":3119,"labels":3120,"number":3125,"owner":3027,"repository":3028,"state":3076,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### 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_",[3121,3122,3123,3124],{"name":3038,"color":3039},{"name":3097,"color":3098},{"name":3071,"color":3072},{"name":3074,"color":3072},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.7798644,{"description":3131,"labels":3132,"number":3135,"owner":3027,"repository":3028,"state":3076,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Description\n\nMy app uses a LOT of filters, and with UI v2, I had these:\n\n```\n\u003CUSelect :items=\"items\" placeholder=\"Filter by tags\" v-model=\"tagFilter\" />\n\n// filter by tags\nconst items = [\n {\n label: \"Show all tags\",\n value: \"\"\n },\n {\n label: \"Only Red Tags\",\n value: \"red\"\n },\n {\n label: \"Only Green Tags\",\n value: \"green\"\n }\n]\n\nconst tagFilter = ref(null)\n```\n\nbut in v3 I now get this error:\n\n> Error: A \u003CSelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.\n\nHow would I add this option in?",[3133,3134],{"name":3021,"color":3022},{"name":3024,"color":3025},3647,"How do I use an empty string with a USelect value?","2025-03-21T21:54:20Z","https://github.com/nuxt/ui/issues/3647",0.7799977,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZ_cy4C4DYXJhc7EoqRoj0L7rquyoo_V1MbCTBfeuyLM":-1},"/nuxt/ui/3677"]