\n```\n\ninstead of\n\n```vue\n// Current workaround\n\u003CUTable\n :meta=\"{ class: {\n tr: row => (row.getCanSelect()\n ? 'cursor-pointer'\n : 'data-[selectable=true]:!bg-accented data-[selectable=true]:hover:!bg-accented'),\n } }\"\n/>\n\n```\n\nI understand the need to have some sensible defaults, but I propose changing this to\n\n```html\n\u003Ctr :data-selectable=\"!!props.rowSelectionOptions?.enableRowSelection \n ? row.getCanSelect() : !!props.onSelect || !!props.onHover || !!props.onContextmenu\">\n```\n\np.s. Many thanks for all this beautiful work you have done so far.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3173,3176,3179],{"name":3174,"color":3175},"bug","d73a4a",{"name":3177,"color":3178},"triage","ffffff",{"name":3180,"color":3163},"v4",4968,"UTable row data-selectable attribute not aligned with TanStack API","2025-09-14T00:46:37Z","https://github.com/nuxt/ui/issues/4968",0.72643423,{"description":3187,"labels":3188,"number":3192,"owner":3149,"repository":3165,"state":3193,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### 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_",[3189],{"name":3190,"color":3191},"enhancement","a2eeef",2373,"closed","UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.6779153,{"description":3199,"labels":3200,"number":3209,"owner":3149,"repository":3165,"state":3193,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, components, css, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, compodium@0.1.0-beta.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\n```vue\n\u003CUCard variant=\"subtle\">\n \u003CUTable \n :data=\"data\"\n :columns=\"columns\"\n />\n\u003C/UCard>\n```\n\n### Description\n\nIf using a UTable component on a background that isn't the default neutral color the bg-color of the thead is visible.\n\n\n\n\n\n_A little bit easier to see with white Background_\n\n\n\n\nMaybe this is a wanted behavior. So if so please ignore and close the issue.\nI know sometimes you want a background color in the headlines. But sometimes you don't want them.\nAnyways if this is a wanted behavior, then maybe this issue will help those who don't want a background color and are looking for a solution.\n\n### Additional context\n\nCould be fixed by adding:\n```vue\n:ui=\"{\n thead: 'bg-unset'\n}\"\n```\nto the `\u003CUTable>` tag\n\n\n\n### Logs\n\n```shell-script\n-\n```",[3201,3202,3203,3204,3207],{"name":3174,"color":3175},{"name":3162,"color":3163},{"name":3177,"color":3178},{"name":3205,"color":3206},"closed-by-bot","ededed",{"name":3208,"color":3206},"stale",3607,"Background-Color for UTable","2025-06-18T09:01:26Z","https://github.com/nuxt/ui/issues/3607",0.6991637,{"description":3215,"labels":3216,"number":3219,"owner":3149,"repository":3165,"state":3193,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### 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```",[3217,3218],{"name":3174,"color":3175},{"name":3162,"color":3163},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70144314,{"description":3225,"labels":3226,"number":3231,"owner":3149,"repository":3165,"state":3193,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/test-utils/module@3.14.4, @nuxt/eslint@0.7.1, @nuxt/ui@2.20.0, @nuxt/icon@1.8.2, @pinia/nuxt@0.5.5, @nuxtjs/i18n@9.1.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/c0455c831f06b3f7662c964abe6e36f9221afe48/src/runtime/components/data/Table.vue#L11\n\n### Description\n\nFor some reason (probably just typo mistake) `th` element of `u-table` component uses styles from `tr.base`. Is it a feature? Looks like a bug :)\nhttps://github.com/nuxt/ui/blob/c0455c831f06b3f7662c964abe6e36f9221afe48/src/runtime/components/data/Table.vue#L11\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3227,3228,3229,3230],{"name":3174,"color":3175},{"name":3177,"color":3178},{"name":3205,"color":3206},{"name":3208,"color":3206},2946,"Expand table header uses styles from 'ui.tr.base'","2025-06-18T09:05:12Z","https://github.com/nuxt/ui/issues/2946",0.71211666,{"description":3237,"labels":3238,"number":3241,"owner":3149,"repository":3165,"state":3193,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### 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_",[3239,3240],{"name":3190,"color":3191},{"name":3162,"color":3163},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7123248,{"description":3247,"labels":3248,"number":3252,"owner":3149,"repository":3165,"state":3193,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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",[3249,3250,3251],{"name":3159,"color":3160},{"name":3205,"color":3206},{"name":3208,"color":3206},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7158159,{"description":3258,"labels":3259,"number":3261,"owner":3149,"repository":3165,"state":3193,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHow can add a class to the \"selectable\" column? Other columns I can use the `class` attribute (https://ui.nuxt.com/components/table#columns) for the column, but for the automatically showing \"selectable\" column, there's no such way to customize it\n\n### Additional context\n\n_No response_",[3260],{"name":3190,"color":3191},2377,"Ability to add custom column data (specifically class) to automatically showing selectable column","2024-11-12T17:12:38Z","https://github.com/nuxt/ui/issues/2377",0.71598023,["Reactive",3267],{},["Set"],["ShallowReactive",3270],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$femuFipNPYx9X_HiQCY5qG24JrQPw5LPUrcBcS-hqXfU":-1},"/nuxt/ui/2667"]