\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",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.6413629,{"description":3034,"labels":3035,"number":3038,"owner":3026,"repository":3027,"state":3028,"title":3039,"updated_at":3040,"url":3041,"score":3042},"### Description\n\nI tried to create a generic method for the table action column, but TypeScript gives an error:\n\n```js\nimport type { Row } from '@tanstack/vue-table'\nimport UButton from '@nuxt/ui/runtime/components/Button.vue'\nimport UDropdownMenu from '@nuxt/ui/runtime/components/DropdownMenu.vue'\n\nexport const actionColumn = (row: Row\u003Cany>, getRowItems: (row: Row\u003Cany>) => any[]) => {\n return h(\n 'div',\n { class: 'text-right' },\n h(\n UDropdownMenu, // \u003C-- Error\n {\n content: {\n align: 'end'\n },\n items: getRowItems(row)\n },\n () => h(UButton, {\n icon: 'i-lucide-ellipsis-vertical',\n color: 'neutral',\n variant: 'ghost',\n class: 'ml-auto'\n })\n )\n )\n}\n```\n\nLint error:\n```\nNo overload matches this call.\n The last overload gave the following error.\n Argument of type '\u003CT extends DropdownMenuItem>(__VLS_props: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"props\"], __VLS_ctx?: __VLS_PrettifyLocal\u003CPick\u003CNonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>, \"attrs\" | \"emit\" | \"slots\">>, __VLS_expose?: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"expose\"], __VLS_setup?: Promise\u003C...>) => import(\"vue\").VNo...' is not assignable to parameter of type 'string | Component\u003C{ readonly \"onUpdate:open\"?: ((payload: boolean) => any) | undefined; size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\" | undefined; items?: DropdownMenuItem[] | DropdownMenuItem[][] | undefined; ... 11 more ...; modal?: boolean | undefined; } & VNodeProps & AllowedComponentProps>'.\n Type '\u003CT extends DropdownMenuItem>(__VLS_props: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"props\"], __VLS_ctx?: __VLS_PrettifyLocal\u003CPick\u003CNonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>, \"attrs\" | \"emit\" | \"slots\">>, __VLS_expose?: NonNullable\u003CAwaited\u003Ctypeof __VLS_setup>>[\"expose\"], __VLS_setup?: Promise\u003C...>) => import(\"vue\").VNo...' is not assignable to type 'FunctionalComponent\u003C{ readonly \"onUpdate:open\"?: ((payload: boolean) => any) | undefined; size?: \"sm\" | \"md\" | \"xs\" | \"lg\" | \"xl\" | undefined; items?: DropdownMenuItem[] | DropdownMenuItem[][] | undefined; ... 11 more ...; modal?: boolean | undefined; } & VNodeProps & AllowedComponentProps, {}, any, {}>'.\n Types of parameters '__VLS_ctx' and 'ctx' are incompatible.\n Type 'Omit\u003C{ attrs: Data; slots: Readonly\u003CInternalSlots>; emit: (event: string, ...args: any[]) => void; expose: \u003CExposed extends Record\u003Cstring, any> = Record\u003Cstring, any>>(exposed?: Exposed | undefined) => void; }, \"expose\">' is not assignable to type '{ emit: (evt: \"update:open\", payload: boolean) => void; slots: (Readonly\u003C{ default(props: { open: boolean; }): any; item: SlotProps\u003CDropdownMenuItem>; 'item-leading': SlotProps\u003C...>; 'item-label': SlotProps\u003C...>; 'item-trailing': SlotProps\u003C...>; } & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))> & { ...; }) & (Record\u003C...'.\n Types of property 'slots' are incompatible.\n Type 'Readonly\u003CInternalSlots>' is not assignable to type '(Readonly\u003C{ default(props: { open: boolean; }): any; item: SlotProps\u003CDropdownMenuItem>; 'item-leading': SlotProps\u003CDropdownMenuItem>; 'item-label': SlotProps\u003C...>; 'item-trailing': SlotProps\u003C...>; } & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))> & { ...; }) & (Record\u003C...> | (Record\u003C...> & Record\u003C...>))'.ts(2769)\n```\n\n\nAlthough there is this error, this piece of code actually works fine.\n\n\nref: https://ui3.nuxt.dev/components/table#with-row-actions\n\n\n",[3036,3037],{"name":3020,"color":3021},{"name":3023,"color":3024},2968,"Using UDropdownMenu with H causes a TSLint error in a separate utils file","2025-05-24T14:17:54Z","https://github.com/nuxt/ui/issues/2968",0.7609157,{"description":3044,"labels":3045,"number":3050,"owner":3026,"repository":3027,"state":3028,"title":3051,"updated_at":3052,"url":3053,"score":3054},"- [x] Pagination\n- [ ] Row Pinning\n- [x] Grouping\n- [ ] Virtualization\n- ...\n\n\n",[3046,3049],{"name":3047,"color":3048},"enhancement","a2eeef",{"name":3023,"color":3024},2441,"[Table] Implement more TanStack Table features","2025-05-07T13:26:12Z","https://github.com/nuxt/ui/issues/2441",0.76331156,{"description":3056,"labels":3057,"number":3060,"owner":3026,"repository":3027,"state":3028,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Description\n\nI have read the documentation of the table expanded and TanStack expanded, but I'm not able to figure out how to use it for expanding one row and collapsing another, or use a button to collapse all rows on the table header for an example, \n\n```\n onClick: () => { expanded.value ={}, row.toggleExpanded()}\n```\n\nI tried to modify the onClick function from the docs example to reset the expanded object or trigger something like `row.autoResetExpanded` from the original table docs but I could not get it to work, \n\nAppreciate any hints or guides",[3058,3059],{"name":3020,"color":3021},{"name":3023,"color":3024},4526,"Table Expanded One row collapses others ( one at a time )","2025-07-14T12:07:43Z","https://github.com/nuxt/ui/issues/4526",0.7702772,{"description":3066,"labels":3067,"number":3073,"owner":3026,"repository":3027,"state":3074,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### 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_",[3068,3069,3072],{"name":3047,"color":3048},{"name":3070,"color":3071},"wontfix-v2","ffffff",{"name":3023,"color":3024},1209,"closed","`UTable` sort by multiple columns","2025-03-24T14:57:22Z","https://github.com/nuxt/ui/issues/1209",0.46096805,{"description":3080,"labels":3081,"number":3087,"owner":3026,"repository":3027,"state":3074,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoesn't it make more sense to render a `section` element on [LandingSection](https://ui.nuxt.com/pro/components/landing-section)?\n\nIf no, can I change it natively (aka without need to rewrite all the component or create my own component)?",[3082,3083,3084],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3085,"color":3086},"pro","5BD3CB",2437,"[Pro] Why LandingSection component render a `div` instead of a `section` element?","2024-10-22T21:02:07Z","https://github.com/nuxt/ui/issues/2437",0.61396694,{"description":3093,"labels":3094,"number":3099,"owner":3026,"repository":3027,"state":3074,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Description\n\nIt would be great if the Nuxt UI carousel component could support infinite scrolling, allowing users to continuously scroll through items without reaching an end. This feature is commonly seen in many modern carousels and would enhance the user experience, especially for carousels with a limited number of items or those designed for continuous looping.\n\n### Additional context\n\n_No response_",[3095,3098],{"name":3096,"color":3097},"duplicate","cfd3d7",{"name":3047,"color":3048},2286,"Add Infinite Scrolling to Nuxt UI Carousel Component","2024-10-02T09:14:42Z","https://github.com/nuxt/ui/issues/2286",0.71176714,{"description":3105,"labels":3106,"number":3110,"owner":3026,"repository":3027,"state":3074,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Description\n\nThe UPageCard component supports highlight and spotlight modes, but there’s no way to change its color dynamically. It just uses the primary color. It would be nice to be able to change this by a color prop.\n\n### Additional context\n\n_No response_",[3107,3108,3109],{"name":3047,"color":3048},{"name":3023,"color":3024},{"name":3085,"color":3086},3389,"UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.7195441,{"description":3116,"labels":3117,"number":3124,"owner":3026,"repository":3026,"state":3074,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\r\n\r\nNUXTUI, NUXT3\r\n\r\n### Reproduction\r\n\r\nI have a list of tables defined as such:\r\n`\r\n\u003Cli v-for=\"r in rsp\" class=\"list-none\">\r\n \u003Cdiv class=\"text-lg mb-2\"> {{ r.name }} \u003C/div>\r\n \u003CUTable v-model=\"selected\" :rows=\"r.links\" :columns=\"columns\" class=\"mb-4\">\r\n\r\n \u003Ctemplate #actions-data=\"{ row }\">\r\n \u003CUDropdown :items=\"items(row)\">\r\n \u003CUButton color=\"gray\" variant=\"ghost\" icon=\"i-heroicons-ellipsis-horizontal-20-solid\" />\r\n \u003C/UDropdown>\r\n \u003C/template>\r\n\r\n \u003C/UTable>\r\n \u003C/li>`\r\n\r\nThis renders correctly and works wonderfully. The only issue is when I use the \"select\" feature, the two tables sometimes interact where they shouldn't. \r\n\r\nI see this happen when table 1 (that has 5 elements) when I select 2 elements from it, table 2 thinks all elements in table 2 have been selected. This probably has to do with a check to see if the number of selected elements match the number of elements in the table (to see if all elements are selected and change the select icon accordingly). However, when there are two separate tables, they should act independently. \r\n\r\nPicture for reference:\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nTables that are inside a list and are expected to behave independently are interacting with one another through the SELECT feature.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3118,3121],{"name":3119,"color":3120},"3.x","29bc7f",{"name":3122,"color":3123},"pending triage","E99695",25135,"Table \"Select all\" gets confused when tables are inside a list","2024-01-10T14:21:12Z","https://github.com/nuxt/nuxt/issues/25135",0.73486066,{"description":3130,"labels":3131,"number":3138,"owner":3026,"repository":3027,"state":3074,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### 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`.",[3132,3133,3136],{"name":3047,"color":3048},{"name":3134,"color":3135},"closed-by-bot","ededed",{"name":3137,"color":3135},"stale",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.74319,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhjMimooSdJNIhY-PGjTxHdxU48GYW6qqHOjpkNxGAJs":-1},"/nuxt/nuxt.com/1209"]