\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",[3036,3039],{"name":3037,"color":3038},"question","d876e3",{"name":3023,"color":3024},4563,"`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.7695757,{"description":3046,"labels":3047,"number":3050,"owner":3026,"repository":3027,"state":3051,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### 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",[3048,3049],{"name":3037,"color":3038},{"name":3023,"color":3024},2956,"closed","How to extend Nuxt I18n translations?","2025-03-28T17:37:21Z","https://github.com/nuxt/ui/issues/2956",0.7347662,{"description":3057,"labels":3058,"number":3061,"owner":3026,"repository":3027,"state":3051,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### 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",[3059,3060],{"name":3037,"color":3038},{"name":3023,"color":3024},4454,"Draggable table with expanded rows","2025-07-14T17:31:26Z","https://github.com/nuxt/ui/issues/4454",0.7378819,{"description":3067,"labels":3068,"number":3075,"owner":3026,"repository":3027,"state":3051,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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`.",[3069,3070,3073],{"name":3020,"color":3021},{"name":3071,"color":3072},"closed-by-bot","ededed",{"name":3074,"color":3072},"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.74070066,{"description":3081,"labels":3082,"number":3088,"owner":3026,"repository":3027,"state":3051,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI'm using a Table in my project to display a list of \"Items\" with a summary of their properties. To view the full details of an item, users can click on a row to navigate to a detailed page for that item.\n\nCurrently, I'm using the `@select` event to handle row clicks and navigate to the details page. However, this approach doesn’t support opening the details page in a new tab when users right-click or middle-click on a row.\n\nIs there a way to make each row behave more like a link to support this functionality? Or is there any possibility of adding support for this in a future update?\n\nThank you!\n\n\n### Additional context\n\n_No response_",[3083,3084,3087],{"name":3020,"color":3021},{"name":3085,"color":3086},"wontfix-v2","ffffff",{"name":3023,"color":3024},2492,"[Feature request] Add link compatibility with Table row","2025-07-01T12:18:07Z","https://github.com/nuxt/ui/issues/2492",0.76119417,{"description":3094,"labels":3095,"number":3099,"owner":3026,"repository":3027,"state":3051,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm wondering if there is an event (similar to ``@select``) for hovering over a table row?\n\nI want to show a popover panel upon hovering over a row\n\nMy current workaround is to insert an action column, and wrap it in a ``UPopover`` component. But preferably, the entire row should act as a trigger\n\nAny suggestions?\n\n```\n\u003Ctemplate #preview-data=\"{ row }\">\n \u003CUPopover \n mode=\"hover\" \n :open-delay=\"300\" \n :disabled=\"isMounted && !grid.sm\"\n :ui=\"{\n ring: 'dark:ring-gray-700'\n }\"\n >\n \u003CUButton icon=\"i-heroicons-identification-20-solid\" color=\"purple\" square />\n\n \u003Ctemplate #panel>\n \u003CRegioloketPreview \n :data=\"row\"\n />\n \u003C/template>\n \u003C/UPopover>\n \u003C/template>\n\n```\n\n",[3096,3097,3098],{"name":3037,"color":3038},{"name":3085,"color":3086},{"name":3023,"color":3024},2435,"@hover event for UTable rows","2025-07-01T14:32:16Z","https://github.com/nuxt/ui/issues/2435",0.76337624,{"description":3105,"labels":3106,"number":3109,"owner":3026,"repository":3027,"state":3051,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### 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?",[3107,3108],{"name":3037,"color":3038},{"name":3023,"color":3024},3935,"Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.7702582,{"description":3115,"labels":3116,"number":3120,"owner":3026,"repository":3121,"state":3051,"title":3122,"updated_at":3123,"url":3124,"score":3125},"",[3117],{"name":3118,"color":3119},"design","00bd6f",1209,"nuxt.com","[Workshop] Workshop single page ","2023-10-10T14:45:09Z","https://github.com/nuxt/nuxt.com/issues/1209",0.7718528,{"description":3127,"labels":3128,"number":3120,"owner":3026,"repository":3027,"state":3051,"title":3132,"updated_at":3133,"url":3134,"score":3125},"### 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_",[3129,3130,3131],{"name":3020,"color":3021},{"name":3085,"color":3086},{"name":3023,"color":3024},"`UTable` sort by multiple columns","2025-03-24T14:57:22Z","https://github.com/nuxt/ui/issues/1209",["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOp_dUosxUHvbREO7hlDMl9dK5GrVNP49JsUZraC6dpY":-1},"/nuxt/ui/4526"]