\n\n\n## Summary\nI would like to request the addition of a `header` slot to the Accordion component in Nuxt UI. This would provide more flexibility for customizing the accordion header content beyond the current available slots.\n\n## Current Behavior\nThe Accordion component currently supports the following slots:\n- `body`\n- `content` \n- `default`\n- `leading`\n- `trailing`\n\n## Proposed Enhancement\nAdd a new `header` slot that allows developers to completely customize the header content of each accordion item.\n\n## Use Case\nI need to display additional information in the accordion title when it's in a collapsed state. The current slots (`leading`, `trailing`) provide some customization, but a dedicated `header` slot would allow for more complex layouts and better control over the entire header area.\n\nFor example, I want to show:\n- Custom formatted titles\n- Additional metadata or status indicators\n- Complex layouts that go beyond simple leading/trailing elements\n\n## Implementation Suggestion\nMy idea is to position the `header` slot **below the existing header area** as a supplementary display zone. This would:\n- Preserve the current header functionality (title, leading/trailing slots, toggle button)\n- Add an additional customizable area underneath for extra information\n- Maintain visual hierarchy while providing more space for content\n\n## Expected API\n```vue\n\u003CUAccordion :items=\"items\">\n\u003Ctemplate #header=\"{ item, index, open }\">\n \u003Cdiv class=\"supplementary-header-info\">\n \u003Cspan class=\"status-badge\">{{ item.status }}\u003C/span>\n \u003Cp class=\"description\">{{ item.summary }}\u003C/p>\n \u003C/div>\n\u003C/template>\n\u003C/UAccordion>\n```\n\n**Visual Layout:**\n```\n┌─────────────────────────────────────┐\n│ [Leading] Title Text [Trailing] ▼│ ← Existing header\n├─────────────────────────────────────┤\n│ Custom Header Slot Content │ ← New header slot\n└─────────────────────────────────────┘\n```\n\n## Benefits\n1. **Enhanced Flexibility**: Developers can create more sophisticated header layouts\n2. **Better UX**: Ability to show contextual information when accordion items are collapsed\n3. **Consistency**: Aligns with the existing slot-based architecture of other Nuxt UI components\n4. **Backward Compatibility**: Would not break existing implementations\n5. **Non-intrusive**: Positioned below existing header, maintaining current functionality\n\n## Additional Context\nThis feature would be particularly useful for:\n- Dashboard interfaces where accordion headers need to show status information\n- Form sections that display validation states in headers\n- Data tables collapsed into accordion format with summary information\n- Preview content or metadata display without expanding the full accordion\n\nThank you for considering this enhancement!\n\n### Additional context\n\n_No response_",[3145,3148,3151],{"name":3146,"color":3147},"enhancement","a2eeef",{"name":3149,"color":3150},"v3","49DCB8",{"name":3152,"color":3153},"triage","ffffff",4782,"nuxt","ui","open","Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.67718726,{"description":3163,"labels":3164,"number":3171,"owner":3155,"repository":3156,"state":3157,"title":3172,"updated_at":3173,"url":3174,"score":3175},"### Environment\n\nAll environments\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.0.0-alpha.x\n\n### Version\n\nv4.0.0-alpha.1\n\n### Reproduction\n\nI'm quite sure that the issue is obvious and provided information is enough to understand the problem.\n\n### Description\n\nCurrently the `UTable` row `data-selectable` attribute is based on this\n\n```html\n\u003Ctr :data-selectable=\"!!props.onSelect || !!props.onHover || !!props.onContextmenu\">\n```\n\nI want to have some of the items in the table to be non-selectable (and inert to hover) and adjust styling accordingly via\n\n```vue\n// Desired\n\u003CUTable \n :rowSelectionOptions=\"{ enableRowSelection: row => row.original.isDisabled }\"\n :meta=\"{ class: { tr: row => row.getCanSelect() ? 'cursor-pointer' : 'bg-accented' } }\" />\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```",[3165,3168,3169],{"name":3166,"color":3167},"bug","d73a4a",{"name":3152,"color":3153},{"name":3170,"color":3150},"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.71991426,{"description":3177,"labels":3178,"number":3181,"owner":3155,"repository":3156,"state":3157,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Description\n\nIn the Nuxt UI documentation, the theme configuration JSON for components is extremely helpful for understanding default styles and customizing them. However, these blocks currently do not support expanding/collapsing of nested sections like slots, variants, or size, which makes navigation and readability difficult—especially for large configuration trees.\n\n**Feature Request:**\nAdd interactive expand/collapse support to nested JSON blocks in the theme section of the Nuxt UI docs. This can be similar to how most code editors and browser devtools handle JSON structures, allowing users to collapse/expand objects or arrays.\n\n**Use Cases:**\n- Improved UX for developers customizing UI themes\n- Faster navigation when working with deeply nested or verbose configurations\n- Easier understanding of available slots and variants without scrolling through long blocks\n\n**Alternatives Considered:**\n- Copying the JSON into a code editor to navigate — which breaks the in-context experience\n- Searching for keys manually, which is slow and error-prone\n\n**Prototype / Reference:**\nAlthough no direct prototype is available, the expected behavior is similar to how Vue DevTools or VSCode handles collapsible JSON structures.\n\n\u003Cimg width=\"844\" height=\"619\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/14f7ccb8-3e7e-41f5-8b6e-6ffc5f2ba150\" />\n\n### Additional context\n\n_No response_",[3179,3180],{"name":3146,"color":3147},{"name":3152,"color":3153},4606,"✨ Expand/Collapse Support for Component Theme JSON in Nuxt UI Docs","2025-07-26T11:50:47Z","https://github.com/nuxt/ui/issues/4606",0.7273261,{"description":3187,"labels":3188,"number":3193,"owner":3155,"repository":3156,"state":3157,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Description\n\nWhen pinning multiple columns in Nuxt UI Table, only the first pinned column maintains sticky positioning while scrolling. This differs from TanStack Table's behavior where all pinned columns remain sticky.\n\n\u003Cimg width=\"1465\" height=\"1249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2faa0cd2-0c76-4881-9892-39e1c9610a35\" />\n\n\u003Cimg width=\"1315\" height=\"541\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e12e8c0c-9e43-45ee-8e81-5ee9ff1e8c50\" />",[3189,3192],{"name":3190,"color":3191},"question","d876e3",{"name":3149,"color":3150},4721,"Multi-column pinning behavior differs from TanStack Table - only first pinned column remains sticky","2025-08-12T14:56:56Z","https://github.com/nuxt/ui/issues/4721",0.7300979,{"description":3199,"labels":3200,"number":3205,"owner":3155,"repository":3156,"state":3157,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3201,3204],{"name":3202,"color":3203},"feature","A27AF6",{"name":3149,"color":3150},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7312479,{"description":3211,"labels":3212,"number":3217,"owner":3155,"repository":3156,"state":3218,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Description\n\nCurrently, the table component (\u003Cutable>) in NuxtUI lacks the ability to set colspan and rowspan for cells within the table. Adding this feature would enhance the capability and flexibility in structuring more complex table data.\n\n### Additional context\n\n_No response_",[3213,3214,3216],{"name":3146,"color":3147},{"name":3215,"color":3153},"wontfix-v2",{"name":3149,"color":3150},1651,"closed","Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.61284226,{"description":3224,"labels":3225,"number":3227,"owner":3155,"repository":3156,"state":3218,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### 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_",[3226],{"name":3146,"color":3147},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.6870732,{"description":3233,"labels":3234,"number":3236,"owner":3155,"repository":3156,"state":3218,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### Description\n\n### Background\r\nThe current Table component in Nuxt UI allows for the listing of data but lacks a dedicated area for displaying supplementary information such as summary results. This limitation hinders the ability to present crucial data insights and reports.\r\n\r\n### Feature Proposal\r\nI propose the addition of a Footer area to the Table component. This Footer should be adjustable based on the columns specification, similar to how rows are handled. It would serve as a space for displaying aggregate results, subtotals, and other important notes related to the data.\r\n\r\n### Expected Impact\r\nWith this feature, the Nuxt UI Table component will become more versatile, offering a more comprehensive set of options for data presentation. Users will be able to glean a more comprehensive understanding of their data by viewing aggregate results and other key information directly within the table.\r\n\r\n### Additional Considerations\r\nImplementing the Footer must carefully balance design and functionality, as it could impact the existing structure of the Table component. Ensuring compatibility with existing features and maintaining extensibility is also crucial.\n\n### Additional context\n\nI am not a native English speaker, so this message was generated with the assistance of ChatGPT.\r\n> 英語話者ではないため、ChatGPTによりメッセージを生成しています。",[3235],{"name":3146,"color":3147},1025,"Add Footer Feature to Table Component","2025-07-02T14:57:22Z","https://github.com/nuxt/ui/issues/1025",0.6923872,{"description":3242,"labels":3243,"number":3251,"owner":3155,"repository":3156,"state":3218,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### 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_",[3244,3245,3246,3249],{"name":3146,"color":3147},{"name":3152,"color":3153},{"name":3247,"color":3248},"closed-by-bot","ededed",{"name":3250,"color":3248},"stale",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.69375646,{"description":3257,"labels":3258,"number":3263,"owner":3155,"repository":3156,"state":3218,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Description\n\nGreetings, I noticed in the Utable documentation, nested or children columns are not mentioned. Is it possible to add this feature in the UTable component? \r\n\r\nOr If I missed something, does this feature already exist?\r\n\r\nIn my previous project, I had this feature using NextJS/AntD:\r\n\r\n\r\n**Result:**\r\n\r\n\r\n**Source code:**\r\n\r\n````tsx\r\n {\r\n dataIndex: \"\",\r\n title: \"Parent Column\",\r\n width: 300,\r\n children: [\r\n {\r\n dataIndex: \"ChildrenColumn1\",\r\n title: \"Children Column 1\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n {\r\n dataIndex: \"ChildrenColumn2\",\r\n title: \"Children Column 2.\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n ],\r\n },\r\n````\r\n\r\n\r\nThanks in advance!\r\n\r\n\r\n\n\n### Additional context\n\n_No response_",[3259,3260,3261,3262],{"name":3146,"color":3147},{"name":3152,"color":3153},{"name":3247,"color":3248},{"name":3250,"color":3248},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.7000733,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbnt8eLmuVQAtHiOdTvo4Qh8WYd-HyxzIwwjBxDJVVI8":-1},"/nuxt/ui/3296"]