\n \u003Cp class=\"text-sm font-medium\">\n {{ namesData.length === 0 ? 'No names loaded' : 'No names found' }}\n \u003C/p>\n \u003Cp class=\"text-xs text-neutral-500 mt-1\">\n {{ namesData.length === 0 ? 'Click \"Load Names\" to fetch data' : 'Try adjusting your search query' }}\n \u003C/p>\n \u003C/div>\n \u003C/template>\n \u003C/UTable>\n```\n\u003C/details>\n\nThe problem:\nHeight of row get bigger when more items added and get smaller while scrolling down, here is the example with 100 Row:\n\nFirst item height:\n\u003Cimg width=\"1217\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d74589f7-a6b3-45ea-afe9-6f7f9ef7ba2d\" />\n\nat middle:\n\u003Cimg width=\"1219\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/653a9f5d-1702-401f-a437-4f61c6c4776e\" />\n\nat end:\n\u003Cimg width=\"1214\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b081a95c-5ffe-4d8e-ab57-64f978cebeea\" />\n\ni tired to play with `UTable.ui` object but that break the style no mater what i do, sometime head col not align with row cells",[3171,3174],{"name":3172,"color":3173},"question","d876e3",{"name":3175,"color":3176},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.76706374,{"description":3186,"labels":3187,"number":3192,"owner":3178,"repository":3179,"state":3180,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### 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_",[3188,3191],{"name":3189,"color":3190},"feature","A27AF6",{"name":3175,"color":3176},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.77424055,{"description":3198,"labels":3199,"number":3203,"owner":3178,"repository":3178,"state":3180,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Describe the feature\n\nI feel as though the following feature requests should be considered for NuxtTime.\n\n- Default slot to allow for customizing how the time is displayed, while re-using the logic. For example, use with [Numberflow](https://number-flow.barvian.me/vue)\n- Additionally/Alternatively extract the logic into composable like useTime(new Date(), {...config})\n- Refresh relative time at an interval. For example, 5 mins ago would update to 6 mins ago\n- Compact appearance for relative time formatting. Example: instead of \"5 days ago\" show \"5d\"\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3200],{"name":3201,"color":3202},"discussion","538de2",32478,"allow reactive updated relative time in `\u003CNuxtTime>`","2025-08-06T09:25:07Z","https://github.com/nuxt/nuxt/issues/32478",0.7770474,{"description":3209,"labels":3210,"number":3222,"owner":3178,"repository":3179,"state":3223,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### 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_",[3211,3214,3217,3220],{"name":3212,"color":3213},"enhancement","a2eeef",{"name":3215,"color":3216},"triage","ffffff",{"name":3218,"color":3219},"closed-by-bot","ededed",{"name":3221,"color":3219},"stale",2685,"closed","[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.71490556,{"description":3229,"labels":3230,"number":3235,"owner":3178,"repository":3179,"state":3223,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### 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_",[3231,3232,3233,3234],{"name":3212,"color":3213},{"name":3215,"color":3216},{"name":3218,"color":3219},{"name":3221,"color":3219},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.723792,{"description":3241,"labels":3242,"number":3246,"owner":3178,"repository":3179,"state":3223,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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_",[3243,3244,3245],{"name":3212,"color":3213},{"name":3175,"color":3176},{"name":3215,"color":3216},4381,"[UTable] -> Context Menu upon selecting row","2025-06-24T12:32:01Z","https://github.com/nuxt/ui/issues/4381",0.72622925,{"description":3252,"labels":3253,"number":3257,"owner":3178,"repository":3179,"state":3223,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### 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_",[3254,3255,3256],{"name":3212,"color":3213},{"name":3175,"color":3176},{"name":3215,"color":3216},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7285616,{"description":3263,"labels":3264,"number":3266,"owner":3178,"repository":3179,"state":3223,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### 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_",[3265],{"name":3212,"color":3213},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7331847,{"description":3272,"labels":3273,"number":3277,"owner":3178,"repository":3179,"state":3223,"title":3278,"updated_at":3279,"url":3280,"score":3281},"### Description\n\nThat gives the opportunity to organize better our data based on a KV pair.\r\nLet's take the 1st example of the docs [here](https://ui.nuxt.com/data/table#usage)\r\n\r\nWe have:\r\n```\r\n\u003Cheader> Id | Name | Title | Email | Role \u003C/header>\r\n\u003Crow for each object> {...person} \u003C/row>\r\n```\r\n\r\nWe could have the opportunity to emphesize the different roles like this:\r\n```\r\n\u003Cheader> Id | Name | Title | Email \u003C/header> \u003C= 1 column less\r\n\u003Csection> role: Admin \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Csection> role: Member \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n```\r\nThe Table component already has the ability to sort/filter, there may be a way to implement this without too much work!\r\nThanks for the consideration!\n\n### Additional context\n\n_No response_",[3274,3275,3276],{"name":3212,"color":3213},{"name":3218,"color":3219},{"name":3221,"color":3219},1195,"[Feature] Add section headers/separators in UTable","2025-06-19T02:13:00Z","https://github.com/nuxt/ui/issues/1195",0.7407382,{"description":3283,"labels":3284,"number":3286,"owner":3178,"repository":3179,"state":3223,"title":3287,"updated_at":3288,"url":3289,"score":3290},"### 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によりメッセージを生成しています。",[3285],{"name":3212,"color":3213},1025,"Add Footer Feature to Table Component","2025-07-02T14:57:22Z","https://github.com/nuxt/ui/issues/1025",0.74790436,["Reactive",3292],{},["Set"],["ShallowReactive",3295],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbY_0RNxTiVTmXpuVVzPSpROPVWTlW0TU4F4cknyTenc":-1},"/nuxt/ui/1732"]