\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```",[3139,3142,3145],{"name":3140,"color":3141},"bug","d73a4a",{"name":3143,"color":3144},"triage","ffffff",{"name":3146,"color":3147},"v4","49DCB8",4968,"nuxt","ui","open","UTable row data-selectable attribute not aligned with TanStack API","2025-09-14T00:46:37Z","https://github.com/nuxt/ui/issues/4968",0.7374087,{"description":3157,"labels":3158,"number":3164,"owner":3149,"repository":3150,"state":3165,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### 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_",[3159,3162],{"name":3160,"color":3161},"enhancement","a2eeef",{"name":3163,"color":3147},"v3",4475,"closed","Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.6986847,{"description":3171,"labels":3172,"number":3182,"owner":3149,"repository":3150,"state":3165,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### Description\n\n``` vue.js\n\n\u003Ctemplate>\n \u003Cdiv class=\"mt-4 w-full\">\n \u003CUTable :data=\"combinationRows\" :columns=\"columns\" ref=\"table\">\n \u003Ctemplate #price-cell=\"{ row }\">\n \u003Cp>{{ row.original.price }}\u003C/p>\n \u003CUInput v-model=\"row.original.price\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #promotional-price-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.promotionalPrice\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.inventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #warning-inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.warningInventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #sku-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.sku\" />\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\n \u003Cp>{{ combinationRows }}\u003C/p>\n\u003C/template>\n\n\n\u003Cscript lang=ts setup>\n\nconst columns: TableColumn\u003CCombinationRow>[] = [\n {\n accessorKey: 'color',\n header: 'color'\n },\n {\n accessorKey: 'size',\n header: 'size'\n },\n {\n id: 'price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Price'), // Header Text\n h(UButton, {\n size: 'xs', \n color: 'neutral',\n variant: 'ghost', \n icon: 'i-hugeicons:copy-01', \n 'aria-label': 'Price information', \n class: 'cursor-pointer', \n \n onclick: () => {\n console.log('Price button clicked');\n\n if (combinationRows.value.length > 0) {\n const firstRowPrice = combinationRows?.value?.[0]?.price ?? '0';\n combinationRows.value.forEach(row => {\n row.price = firstRowPrice;\n });\n triggerRef(combinationRows); // Force table update - important for reactivity\n \n } else {\n console.warn('No rows available to copy price from.');\n }\n }\n },\n )\n ])\n },\n {\n id: 'promotional-price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'promotional price'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Inventory'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'warning-inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Warning Inventory value'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'sku',\n header: 'SKU number'\n }\n];\n\n\u003C/script>\n```\n\nwhen updating price to all rows in onClick (see onClick for price above) it does not update UInput in all rows\nalthough i can see \u003Cp>{{ combinationRows }}\u003C/p> getting updated. The question is how can i update price to all rows. using v3.0.0-alpha.13",[3173,3176,3177,3180],{"name":3174,"color":3175},"question","d876e3",{"name":3163,"color":3147},{"name":3178,"color":3179},"closed-by-bot","ededed",{"name":3181,"color":3179},"stale",3381,"Uinput not updating inside UTable rows","2025-06-18T09:01:59Z","https://github.com/nuxt/ui/issues/3381",0.71952444,{"description":3188,"labels":3189,"number":3191,"owner":3149,"repository":3150,"state":3165,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\ni add the default table but have another styling.\nhow can i fix this? \n\n` \u003CUTable\n v-model:expand=\"expand\"\n class=\"w-full\"\n :loading-state=\"{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }\"\n :progress=\"{ color: 'primary', animation: 'carousel' }\"\n :rows=\"people\"\n :columns=\"columns\"\n >`\n\n",[3190],{"name":3174,"color":3175},2667,"I have no styling at the default UTable","2024-11-17T11:13:44Z","https://github.com/nuxt/ui/issues/2667",0.72986126,{"description":3197,"labels":3198,"number":3200,"owner":3149,"repository":3150,"state":3165,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### 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_",[3199],{"name":3160,"color":3161},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.73293155,{"description":3206,"labels":3207,"number":3211,"owner":3149,"repository":3150,"state":3165,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Description\n\nHi is it possible to add context menu in utable upon selecting a row ? or any alternative ways how to do it thru context menu and utable ?\n\nThankss.\n\n### Additional context\n\n_No response_",[3208,3209,3210],{"name":3160,"color":3161},{"name":3163,"color":3147},{"name":3143,"color":3144},4381,"[UTable] -> Context Menu upon selecting row","2025-06-24T12:32:01Z","https://github.com/nuxt/ui/issues/4381",0.73903024,{"description":3217,"labels":3218,"number":3222,"owner":3149,"repository":3150,"state":3165,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### 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",[3219,3220,3221],{"name":3174,"color":3175},{"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.75029755,{"description":3228,"labels":3229,"number":3231,"owner":3149,"repository":3150,"state":3165,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### 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_",[3230],{"name":3160,"color":3161},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.75683683,{"description":3237,"labels":3238,"number":3243,"owner":3149,"repository":3150,"state":3165,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### 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_",[3239,3240,3241,3242],{"name":3160,"color":3161},{"name":3143,"color":3144},{"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.75788677,{"description":3249,"labels":3250,"number":3254,"owner":3149,"repository":3150,"state":3165,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Description\n\nDescription:\nI am currently using the UTable component from Nuxt UI and have encountered a limitation regarding the customization of table headers. Specifically, I need to create a table with multi-row headers and the ability to merge columns using colspan. For example, the multi-row spanning column headers shown in the image.However, the current implementation of the UTable component does not seem to support this feature.\n\n\nCurrent Behavior:\n\nThe header property allows for custom content using the h function, but it is limited to single-column customization.\nThe available slots are primarily designed for single-column or specific row customization and do not support multi-column header customization.\nExpected Behavior:\n\nAbility to define headers that span multiple rows and columns.\nSupport for colspan and rowspan attributes in the header configuration to allow for more complex table layouts.\nEnhanced slot functionality to support multi-column header customization.\nUse Case:\nThis feature is essential for creating complex data tables where grouped headers are necessary for better data organization and presentation. It is particularly useful in scenarios where data needs to be categorized under broader headings.\n\nProposed Solution:\n\nIntroduce a mechanism in the UTable component to allow for multi-row and multi-column header definitions.\nProvide examples and documentation on how to implement these features using the existing API or through new enhancements.\nConsider expanding the slot functionality to support more complex header customizations.\nAdditional Context:\n\nThis feature is commonly supported in other table libraries and would greatly enhance the flexibility and usability of the UTable component in Nuxt UI.\nEnvironment:\n\nNuxt UI version: [3.0.0-alpha.12]\nNuxt version: [^3.15.4]\n\nRelated Issues Link:\nhttps://github.com/nuxt/ui/issues/1289#issuecomment-2652919275\nhttps://github.com/nuxt/ui/issues/1651\nhttps://github.com/nuxt/ui/issues/2053\n\nRelated Documentation Link:\nhttps://ui3.nuxt.dev/components/table\n\n### Additional context\n\n_No response_",[3251,3252,3253],{"name":3160,"color":3161},{"name":3163,"color":3147},{"name":3143,"color":3144},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.75957257,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3hMjrYr7sjPOmw9i1CJHXfYxiLnazo8c1PpVq-SowAk":-1},"/nuxt/ui/4089"]