\n```\n\nsame result is expected when using `active`, but `leadingIcon` is ignored\n```\n\u003CUButton\n label=\"Label\"\n active\n active-color=\"primary\"\n active-variant=\"soft\"\n icon=\"mdi-account\"\n @click.prevent=\"active = !active\"\n/>\n```\n\n### Additional context\n\n\u003Cimg width=\"202\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0756fb1c-772c-44ae-855d-90aba304bd9e\" />",[2923,2926,2927],{"name":2924,"color":2925},"bug","d73a4a",{"name":2907,"color":2908},{"name":2928,"color":2929},"triage","ffffff",3972,"Different result than static for active-color & active-variant","2025-04-24T15:30:39Z","https://github.com/nuxt/ui/issues/3972",0.7508393,{"description":2936,"labels":2937,"number":2942,"owner":2913,"repository":2914,"state":2915,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### 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",[2938,2941],{"name":2939,"color":2940},"question","d876e3",{"name":2907,"color":2908},4454,"Draggable table with expanded rows","2025-07-03T07:47:44Z","https://github.com/nuxt/ui/issues/4454",0.7688962,{"description":2948,"labels":2949,"number":2954,"owner":2913,"repository":2914,"state":2915,"title":2955,"updated_at":2956,"url":2957,"score":2958},"- [x] Pagination\n- [ ] Row Pinning\n- [x] Grouping\n- [ ] Virtualization\n- ...\n\n\n",[2950,2953],{"name":2951,"color":2952},"enhancement","a2eeef",{"name":2907,"color":2908},2441,"[Table] Implement more TanStack Table features","2025-05-07T13:26:12Z","https://github.com/nuxt/ui/issues/2441",0.76938254,{"description":2960,"labels":2961,"number":2964,"owner":2913,"repository":2914,"state":2965,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### 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?",[2962,2963],{"name":2939,"color":2940},{"name":2907,"color":2908},3935,"closed","Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.7368466,{"description":2971,"labels":2972,"number":2975,"owner":2913,"repository":2914,"state":2965,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.1, @nuxtjs/seo@2.0.0-rc.23\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.8\",\n\n### Reproduction\n\n\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto\">\n \u003Cu-breadcrumb :items=\"items \" />\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2973,2974],{"name":2924,"color":2925},{"name":2907,"color":2908},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.75031316,{"description":2981,"labels":2982,"number":2984,"owner":2913,"repository":2914,"state":2965,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.15.1`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.2`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`, `modules`\n- Runtime Modules: `@nuxt/ui@2.20.0`\n- Build Modules: `-`\n\n### Version\n\n2.20.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jxcmyybr?file=app.vue\n\n### Description\n\nAfter looping though all items in useAppConfig().ui.colors, i get a false-positive error after assigning the item to a UBadge's color property, the color is still applied.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nType 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)\nBadge.vue.d.ts(217, 5): The expected type comes from property 'color' which is declared here on type 'Partial\u003C{ size: BadgeSize; class: any; ui: { base?: string | undefined; rounded?: string | undefined; font?: string | undefined; size?: DeepPartial\u003C{ xs: string; sm: string; md: string; lg: string; }, any> | undefined; ... 4 more ...; default?: DeepPartial\u003C...> | undefined; } & { ...; } & { ...; }; ... 7 more ...; t...'\n(property) color?: BadgeColor | undefined\n```",[2983],{"name":2924,"color":2925},3077,"Type 'string' is not assignable to type 'BadgeColor | undefined'.ts-plugin(2322)","2025-01-13T16:33:02Z","https://github.com/nuxt/ui/issues/3077",0.76378953,{"description":2990,"labels":2991,"number":2994,"owner":2913,"repository":2914,"state":2965,"title":2995,"updated_at":2996,"url":2997,"score":2998},"### Description\n\nHow to enable [IntelliSense](https://ui3.nuxt.dev/components/link#intellisense)\n\nwhen wrie the code on class atribute like this\n `\u003Cdiv class=\"bg-red-500 text-white p-4 flex justify-between\">`\n\n the sugestion not show\n",[2992,2993],{"name":2939,"color":2940},{"name":2907,"color":2908},2949,"VS Code IntelliSense not working","2025-01-06T07:33:40Z","https://github.com/nuxt/ui/issues/2949",0.76673824,{"description":3000,"labels":3001,"number":3008,"owner":2913,"repository":2914,"state":2965,"title":3009,"updated_at":3010,"url":3011,"score":3012},"### 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",[3002,3003,3006],{"name":2939,"color":2940},{"name":3004,"color":3005},"closed-by-bot","ededed",{"name":3007,"color":3005},"stale",2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7684827,{"description":3014,"labels":3015,"number":3019,"owner":2913,"repository":2914,"state":2965,"title":3020,"updated_at":3021,"url":3022,"score":3023},"### 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`.",[3016,3017,3018],{"name":2951,"color":2952},{"name":3004,"color":3005},{"name":3007,"color":3005},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.7686561,["Reactive",3025],{},["Set"],["ShallowReactive",3028],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbwfoFtyk-rZs7viv4kA54N4yEBYGR2y5ofpbNGm3JtE":-1},"/nuxt/ui/2956"]