\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```",[3145,3148,3151],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"triage","ffffff",{"name":3152,"color":3153},"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.7511307,{"description":3163,"labels":3164,"number":3168,"owner":3155,"repository":3155,"state":3157,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Describe the feature\n\n### Context\n\nCurrently, Nuxt supports layouts via the `layouts/` directory and supports nested UI sections using **nested routes** (e.g., `pages/profile.vue` wrapping `pages/profile/favorite.vue`). While this works, once the project grows with many folders and files, the pattern of mixing `parent.vue` (used as a wrapper) alongside actual child routes can get confusing and lose context.\n\nFor example:\n\n```\npages/\n ├─ profile.vue // Parent layout wrapper\n └─ profile/\n ├─ index.vue // Child route\n └─ favorite.vue // Child route\n```\n\nHere, `profile.vue` is conceptually acting as a **nested layout**, but it is treated as a page, which can make code organization less clear.\n\n### Problem\n\n* `parent.vue` files inside `pages/` double as both “layout” and “page,” which can blur their purpose.\n* As the folder structure deepens, it becomes harder to distinguish what is a layout wrapper and what is an actual page.\n* The developer has to “remember” which `.vue` file is serving as a pseudo-layout.\n\n### Proposal / Suggestion\n\nIntroduce a **dedicated convention** for nested layouts within route groups.\n\nFor example:\n\n```\npages/\n └─ profile/\n ├─ @layout.vue // Explicitly marks this as the wrapper layout\n ├─ index.vue // Child route\n └─ favorite.vue // Child route\n```\n\nUsage:\n\n```vue\n\u003C!-- pages/profile/@layout.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CSidebar />\n \u003CNuxtPage /> \u003C!-- renders children like index.vue, favorite.vue -->\n \u003C/div>\n\u003C/template>\n```\n\nThis improves clarity by:\n\n* Explicitly distinguishing **nested layout files** from **page files**.\n* Avoiding the overloaded role of `parent.vue`.\n* Making folder structures self-explanatory.\n\n### Benefits\n\n* More intuitive project structure for large apps.\n* Easier onboarding for new developers (clear separation of layouts vs. pages).\n* Cleaner, scalable convention that aligns with the mental model of “global layouts” vs. “section layouts.”\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).",[3165],{"name":3166,"color":3167},"pending triage","E99695",33073,"[Enhancement] Better Syntax/Convention for Nested Layouts in Nuxt","2025-08-27T05:51:23Z","https://github.com/nuxt/nuxt/issues/33073",0.7546951,{"description":3174,"labels":3175,"number":3180,"owner":3155,"repository":3156,"state":3157,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### 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_",[3176,3179],{"name":3177,"color":3178},"enhancement","a2eeef",{"name":3149,"color":3150},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.7608838,{"description":3186,"labels":3187,"number":3192,"owner":3155,"repository":3156,"state":3157,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Description\n\n**Description**\nFirst of all, thanks to the Nuxt UI team 🙏. The Table component is already very powerful and easy to use.\nHowever, I noticed that the documentation currently does not include an example for **Tree Data (hierarchical table rows)**.\n\nTree data tables are very common in real-world scenarios such as organization structures, directory hierarchies, or permission management. For reference, Ant Design Table provides a [Tree Data example](https://ant.design/components/table-cn#table-demo-tree-data) which is very helpful for developers.\n\n**Use Case**\n\n* Add a Tree Data example in the docs.\n* Demonstrate how to define hierarchical rows via a `children` field (or similar property).\n* Ideally, include an example showing row selection with/without cascading (similar to `CheckStrictly` in Ant Design).\n\n**Expected Behavior**\nThe documentation should include a Tree Data demo, making it easier for developers to get started with hierarchical tables. For example:\n\n\u003Cimg width=\"1457\" height=\"491\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8b90dd75-3d22-4bbd-8b31-67702930af1e\" />\n\n\n### Additional context\n\n_No response_",[3188,3189,3191],{"name":3177,"color":3178},{"name":3190,"color":3153},"v3",{"name":3149,"color":3150},4786,"[Documentation] Add Tree Data example in Table documentation","2025-08-19T03:41:07Z","https://github.com/nuxt/ui/issues/4786",0.76284504,{"description":3198,"labels":3199,"number":3203,"owner":3155,"repository":3156,"state":3157,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Description\n\n**Title**: Add Descriptions component\n\n**Description**\nThanks to the Nuxt UI team for the great work 🙏. Currently, the library does not provide a component similar to [Descriptions](https://ant.design/components/descriptions-cn).\n\nThis type of component is very common in real-world applications, often used to display descriptive information in pairs, such as user profiles, order details, or configuration parameters. Ant Design’s Descriptions component provides a clean and convenient way to present such data.\n\n**Use Case**\n\n* Add a `Descriptions` component to display data in “label–content” pairs.\n* Support horizontal and vertical layouts.\n* Support configurable column count with automatic wrapping.\n* Allow customization of label and content styles.\n\n**Expected Behavior**\nDevelopers should be able to easily use a Descriptions component, similar to Ant Design, to quickly build data presentation pages.\n\ne.g:\n\n\u003Cimg width=\"1421\" height=\"478\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f460119-101d-4dea-bb41-055ca77679af\" />\n\n### Additional context\n\n_No response_",[3200,3201,3202],{"name":3177,"color":3178},{"name":3190,"color":3153},{"name":3149,"color":3150},4788,"[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.7629204,{"description":3209,"labels":3210,"number":3212,"owner":3155,"repository":3156,"state":3213,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### 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_",[3211],{"name":3177,"color":3178},2373,"closed","UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7028223,{"description":3219,"labels":3220,"number":3224,"owner":3155,"repository":3156,"state":3213,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### 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_",[3221,3222,3223],{"name":3177,"color":3178},{"name":3190,"color":3153},{"name":3149,"color":3150},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7069466,{"description":3230,"labels":3231,"number":3233,"owner":3155,"repository":3156,"state":3213,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### 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によりメッセージを生成しています。",[3232],{"name":3177,"color":3178},1025,"Add Footer Feature to Table Component","2025-07-02T14:57:22Z","https://github.com/nuxt/ui/issues/1025",0.73283935,{"description":3239,"labels":3240,"number":3249,"owner":3155,"repository":3156,"state":3213,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### 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",[3241,3244,3247],{"name":3242,"color":3243},"question","d876e3",{"name":3245,"color":3246},"closed-by-bot","ededed",{"name":3248,"color":3246},"stale",2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.73391026,{"description":3255,"labels":3256,"number":3258,"owner":3155,"repository":3156,"state":3213,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### 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_",[3257],{"name":3177,"color":3178},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.7340466,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGVVhwidjdEkrvcYEXBFx5CHjiqtj6tugHrpTguZHnXQ":-1},"/nuxt/ui/2037"]