` rows. `@select` brings you part of the way there, but doesn't make it easy to get access to the full underlying event, for example to check if the user is holding the \u003Ckey>Ctrl\u003C/key>.\n\nSimilarly, even with `@select` I can't see any easy way to focus the table rows using keyboard input. \n\n### Additional context\n\n_No response_",[3173,3176,3177,3180],{"name":3174,"color":3175},"enhancement","a2eeef",{"name":3146,"color":3147},{"name":3178,"color":3179},"closed-by-bot","ededed",{"name":3181,"color":3179},"stale",2796,"UTable row click event","2025-06-18T09:05:27Z","https://github.com/nuxt/ui/issues/2796",0.699838,{"description":3188,"labels":3189,"number":3192,"owner":3149,"repository":3150,"state":3165,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3190,3191],{"name":3140,"color":3141},{"name":3143,"color":3144},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.70443124,{"description":3198,"labels":3199,"number":3206,"owner":3149,"repository":3150,"state":3165,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### 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",[3200,3203,3205],{"name":3201,"color":3202},"question","d876e3",{"name":3204,"color":3147},"wontfix-v2",{"name":3143,"color":3144},2435,"@hover event for UTable rows","2025-07-01T14:32:16Z","https://github.com/nuxt/ui/issues/2435",0.70674217,{"description":3212,"labels":3213,"number":3216,"owner":3149,"repository":3150,"state":3165,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Description\n\nHi, first of all thanks for Nuxt UI, it's a great library that makes building interfaces in Nuxt fast and enjoyable. Really appreciate the work you're putting into it.\n\n## Context\n\nThe `\u003CUTable>` component currently supports conditional class names via `meta.class.tr` (from `TableMeta`) and `meta.class.th` / `meta.class.td` (from `ColumnMeta`). This works well in most cases with Tailwind.\n\nHowever, it’s not possible today to apply inline styles dynamically — for example, to set background colors or custom widths based on data. This creates limitations in use cases where:\n\n- Tailwind classes are too generic or not granular enough \n- Style values are truly dynamic (e.g. coming from user data or configs) \n\n## Proposal\n\nAdd support for `meta.style`, mirroring the structure of `meta.class`, with the following API shape:\n\n```ts\nmeta {\n style?: {\n tr?: string | ((row: Row\u003CTData>) => string);\n };\n}\n\n\nmeta: {\n style?: {\n th?: string | ((cell: Header\u003CTData, TValue>) => string);\n td?: string | ((cell: Cell\u003CTData, TValue>) => string);\n }\n}\n```\n\n## Example usage\n\n```vue\n\u003CUTable\n :data=\"data\"\n :columns=\"columns\"\n :meta=\"{\n style: {\n tr: row => row.age \u003C 18 ? { backgroundColor: '#fff0f0' } : {},\n }\n }\"\n/>\n```\n\n## Why this matters\n\n- It improves flexibility for styling without requiring full slot overrides \n- It handles dynamic styles that can’t be expressed with Tailwind classes \n- It aligns with the existing `meta.class` design in both `TableMeta` and `ColumnMeta`, keeping things consistent and declarative\n\n### Additional context\n\n_No response_",[3214,3215],{"name":3174,"color":3175},{"name":3143,"color":3144},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7104486,{"description":3222,"labels":3223,"number":3228,"owner":3149,"repository":3150,"state":3165,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### 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_",[3224,3225,3226,3227],{"name":3174,"color":3175},{"name":3146,"color":3147},{"name":3178,"color":3179},{"name":3181,"color":3179},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.7106819,{"description":3234,"labels":3235,"number":3239,"owner":3149,"repository":3150,"state":3165,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### 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",[3236,3237,3238],{"name":3201,"color":3202},{"name":3178,"color":3179},{"name":3181,"color":3179},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.71278304,{"description":3245,"labels":3246,"number":3248,"owner":3149,"repository":3150,"state":3165,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[3247],{"name":3174,"color":3175},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7128768,{"description":3254,"labels":3255,"number":3258,"owner":3149,"repository":3150,"state":3165,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3256,3257],{"name":3140,"color":3141},{"name":3143,"color":3144},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.71342605,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fi29DoDBK_Dvfr4AsZXEoMZD4m1cM6H1s_VNgN_nONn8":-1},"/nuxt/ui/4968"]