\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",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.7607842,{"description":3034,"labels":3035,"number":3045,"owner":3026,"repository":3026,"state":3028,"title":3046,"updated_at":3047,"url":3048,"score":3049},"### Describe the feature\n\nHello,\r\n\r\nIt could help modules authors to have helps for adding things to the head.\r\n\r\nhttps://nuxt.com/docs/api/nuxt-config#head\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).",[3036,3039,3042],{"name":3037,"color":3038},"enhancement","8DEF37",{"name":3040,"color":3041},"good first issue","fbca04",{"name":3043,"color":3044},"🍰 p2-nice-to-have","0E8A16",25469,"Add Nuxt Kit helpers for `app.head`","2025-02-03T11:53:20Z","https://github.com/nuxt/nuxt/issues/25469",0.77893347,{"description":3051,"labels":3052,"number":3056,"owner":3026,"repository":3027,"state":3028,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Description\n\nI think it could be helpful in some scenarios when clicking on the parent not automatically expands or collapses children.\n\nIn my use case I'm using UTree to build a mailbox-style tree, e.g.:\n\ninbox\n├── subfolder 1\n│ ├── subsubfolder 2\n\nObviously not all emails will be in the most nested folder, some might in inbox, some might be in subfolder 1. Right now when clicking on inbox, I am loading the associated mails in a seperate component but it will also cause \"inbox\" to either collapse or expand. It was more intuitive if we were able to control wether clicking the whole item or just the toggle icon expands or collapses.\n\n### Additional context\n\n_No response_",[3053,3055],{"name":3037,"color":3054},"a2eeef",{"name":3023,"color":3024},3496,"UTree: option to toggle expand/collapse only when expand/collapse icon is clicked","2025-03-08T17:10:52Z","https://github.com/nuxt/ui/issues/3496",0.7851062,{"description":3062,"labels":3063,"number":3069,"owner":3026,"repository":3027,"state":3070,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### 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_",[3064,3065,3066],{"name":3037,"color":3054},{"name":3023,"color":3024},{"name":3067,"color":3068},"triage","ffffff",3296,"closed","Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7292634,{"description":3076,"labels":3077,"number":3085,"owner":3026,"repository":3027,"state":3070,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### 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_",[3078,3079,3080,3083],{"name":3037,"color":3054},{"name":3067,"color":3068},{"name":3081,"color":3082},"closed-by-bot","ededed",{"name":3084,"color":3082},"stale",2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.74828243,{"description":3091,"labels":3092,"number":3098,"owner":3026,"repository":3027,"state":3070,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoesn't it make more sense to render a `section` element on [LandingSection](https://ui.nuxt.com/pro/components/landing-section)?\n\nIf no, can I change it natively (aka without need to rewrite all the component or create my own component)?",[3093,3094,3095],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3096,"color":3097},"pro","5BD3CB",2437,"[Pro] Why LandingSection component render a `div` instead of a `section` element?","2024-10-22T21:02:07Z","https://github.com/nuxt/ui/issues/2437",0.75297946,{"description":3104,"labels":3105,"number":3108,"owner":3026,"repository":3026,"state":3070,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Describe the feature\r\n\r\nMy feature suggestion is to add 1 or 2 new composables:\r\n\r\n- `useResponseHeader`\r\n- `useResponseHeaders`\r\n\r\nWhich would both be very similar to their existing equals:\r\n- [useRequestHeader](https://nuxt.com/docs/api/composables/use-request-header)\r\n- [useRequestHeaders](https://nuxt.com/docs/api/composables/use-request-headers)\r\n\r\nWithout having looked extensively at these existing composables, I think you might even be able to reuse a lot of the same scaffolding for creating `useResponseHeader(s)`.\r\n\r\nAlthough I have not contributed before, I am experienced in building with Nuxt and would be willing (glad!) to implement this feature myself.\r\n\r\nMotivation for this feature comes from my own desire to have a simple way to set response headers. For what it's worth, I did a quick search for issues and more people are asking about this:\r\n- https://github.com/nuxt/nuxt/discussions/25091\r\n- https://github.com/nuxt/nuxt/discussions/25425 \r\n- https://github.com/nuxt/nuxt/discussions/21920\r\n\r\n(It's not impossible right now of course, but having a dedicated composable for this in the docs could increase discoverability/usability.)\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3106,3107],{"name":3037,"color":3038},{"name":3043,"color":3044},27075,"Suggestion for new composables: `useResponseHeader(s)` similar to existing `useRequestHeader` composable","2024-10-08T16:16:32Z","https://github.com/nuxt/nuxt/issues/27075",0.7530053,{"description":3114,"labels":3115,"number":3118,"owner":3026,"repository":3027,"state":3070,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Description\n\nHi, I just wanted to sort a column of uTable. The problem is the accessorKey looks like this \"type.name\" and it looks like tanstack isnt sorting deeper keys. So how can I approach this problem and it would be very helpful to have an example of it in the uTable documentation.\nThanks!",[3116,3117],{"name":3020,"color":3021},{"name":3023,"color":3024},3677,"table sort deeper accessorKey with accessorFn?","2025-06-11T10:27:41Z","https://github.com/nuxt/ui/issues/3677",0.7595446,{"description":3124,"labels":3125,"number":3127,"owner":3026,"repository":3027,"state":3070,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### 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_",[3126],{"name":3037,"color":3054},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.760948,{"description":3133,"labels":3134,"number":3137,"owner":3026,"repository":3027,"state":3070,"title":3138,"updated_at":3139,"url":3140,"score":3141},"### 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_",[3135,3136],{"name":3037,"color":3054},{"name":3023,"color":3024},4475,"Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7780172,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fF5UT0E7nIHixDpXgD3n85b9wtjuK4Z8eawGv6DUw-z0":-1},"/nuxt/ui/1195"]