\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",[3035,3036],{"name":3019,"color":3020},{"name":3022,"color":3023},4563,"`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.76733196,{"description":3043,"labels":3044,"number":3047,"owner":3025,"repository":3026,"state":3048,"title":3049,"updated_at":3050,"url":3051,"score":3052},"### Description\n\nIs there a template available of how to implement a custom column filter for the Nuxt UI (TanStack) tables?\n\nI have read the TanStack documentation but I cannot figure out how to implement it in the Nuxt UI version. I cannot seem to find any samples online either.\n\nThanks!",[3045,3046],{"name":3019,"color":3020},{"name":3022,"color":3023},4217,"closed","Custom column filter in table","2025-05-26T12:39:05Z","https://github.com/nuxt/ui/issues/4217",0.7365487,{"description":3054,"labels":3055,"number":3068,"owner":3025,"repository":3026,"state":3048,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Description\n\nCurrently only one responsive strategy is supported - horizontal scroll, but this is not best for all cases. It is possible to hack it by custom CSS or create multiple implementations switched by media query, but usually it means very tight reliance on table markup, so it is easy to break. \n\n\nFor most cases this strategies should be enough:\n\n## Horizontal scroll with first/last cell fixed\nCurrently only strategy implemented. \nGood when user needs to focus only to some columns at a time\n\n\n\n## Prioritized columns\nGood when only 1-2 columns are important. Rest can be manually shown. Can be combined with horizontal scroll.\nEasy to implement in UI kit.\n\n\n\n## Row/cell flip and horizontal scroll\nGood when user needs to focus only to single row or compare two/three following rows.\nEasy to implement in UI kit.\n\n\n\n## Graphical chart\nGood for numbers, but usually both table and chart is required.\nNeeds custom implementation.\n\n\n\n## Table heading next to each row\nVery good when user needs to focus only to single row, but without confusion of horizontal scroll.\nEasy to implement in UI kit.\n\n\n## Change rows to carts\nSame like previos, better usability, but needs custom implementation.\n\n\n\nGood demos of different approaches:\nhttps://elvery.net/demo/responsive-tables/\n\nIt would be good if the selected strategy could be applied based on media query, because the breakpoint will depend on the use-case.\n\nWhen not implemented as a feature it would be nice to just show example how to implement it from outside..\n\n### Additional context\n\n_No response_",[3056,3059,3060,3063,3066],{"name":3057,"color":3058},"enhancement","a2eeef",{"name":3022,"color":3023},{"name":3061,"color":3062},"triage","ffffff",{"name":3064,"color":3065},"closed-by-bot","ededed",{"name":3067,"color":3065},"stale",3742,"Alternative responsive table strategies","2025-06-18T09:01:22Z","https://github.com/nuxt/ui/issues/3742",0.742589,{"description":3074,"labels":3075,"number":3080,"owner":3025,"repository":3026,"state":3048,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### 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_",[3076,3079],{"name":3077,"color":3078},"duplicate","cfd3d7",{"name":3057,"color":3058},2286,"Add Infinite Scrolling to Nuxt UI Carousel Component","2024-10-02T09:14:42Z","https://github.com/nuxt/ui/issues/2286",0.7453958,{"description":3086,"labels":3087,"number":3093,"owner":3025,"repository":3026,"state":3048,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### 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_",[3088,3089,3090],{"name":3057,"color":3058},{"name":3022,"color":3023},{"name":3091,"color":3092},"pro","5BD3CB",3389,"UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.75741714,{"description":3099,"labels":3100,"number":3103,"owner":3025,"repository":3026,"state":3048,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Description\n\nHi,\n\nI'm just trying migrate to the v3 table component but I'm kind of stuck while trying to apply the correct column widths to the columns which before (in v2) was possible via simple tailwind classes per column.\nFor example a table has an action button in the last column, so the column should only have the width of the icon of the button so that other columns have more space but the column width is automatically about four times the button's size by default instead.\n\nThe [TanStack Table Docs](https://tanstack.com/table/v8/docs/guide/column-sizing) state that individual column sizes must be applied manually which also seems right looking at the [table component code](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Table.vue) if I didn't miss anything in that regard.\n\nFrom my understanding the custom width styling must be applied to the `th`/`td` elements since every styling attempt inside the slots to make a column smaller (e.g. only 32px) did not work and only affected the content inside the header/cell slots.\n\nIs there any way at the moment to set a custom width for specific columns with the current implementation of the table component?",[3101,3102],{"name":3019,"color":3020},{"name":3022,"color":3023},3935,"Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.7592612,{"description":3109,"labels":3110,"number":3114,"owner":3025,"repository":3026,"state":3048,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### 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`.",[3111,3112,3113],{"name":3057,"color":3058},{"name":3064,"color":3065},{"name":3067,"color":3065},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.7621741,{"description":3120,"labels":3121,"number":3124,"owner":3025,"repository":3026,"state":3048,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Description\n\nAny idea how to configure a Table to support draggable rows if some of them are also extended?\n\nLooks like solution proposed in docs: https://ui.nuxt.com/components/table#with-drag-and-drop does not take into account that extended rows are just added as another `\u003Ctr>` element to `\u003Ctbody>`. \n",[3122,3123],{"name":3019,"color":3020},{"name":3022,"color":3023},4454,"Draggable table with expanded rows","2025-07-14T17:31:26Z","https://github.com/nuxt/ui/issues/4454",0.76829517,{"description":3130,"labels":3131,"number":3135,"owner":3025,"repository":3136,"state":3048,"title":3137,"updated_at":3138,"url":3139,"score":3140},"",[3132],{"name":3133,"color":3134},"design","00bd6f",1209,"nuxt.com","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1209",0.77052975,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAWEP5yx5B2falbJ7bgyZgrzrEBkNuOEK48-_o6Alx6U":-1},"/nuxt/ui/2441"]