\n\n### Additional context\n\n_No response_",[3137,3140],{"name":3138,"color":3139},"enhancement","a2eeef",{"name":3141,"color":3142},"triage","ffffff",4606,"nuxt","ui","open","✨ Expand/Collapse Support for Component Theme JSON in Nuxt UI Docs","2025-07-26T11:50:47Z","https://github.com/nuxt/ui/issues/4606",0.75164056,{"description":3152,"labels":3153,"number":3160,"owner":3144,"repository":3145,"state":3146,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### Description\n\nI only found [with-infinite-scroll](https://ui.nuxt.com/components/table#with-infinite-scroll) example,\nbut no example for [useVirtualList](https://vueuse.org/core/useVirtualList/).\n\nhere is my try to do it but it have one annoying problem:\n\u003Cdetails>\n \u003Csummary>useVirtualList example\u003C/summary>\n\n```ts\ninterface NameEntry {\n index: number;\n name: string;\n length: number;\n isWide: boolean;\n address: string;\n}\n\n// Table columns\nconst namesTable = useTemplateRef\u003CComponentPublicInstance>(\"names-table\");\nconst { list: namesList, containerProps: namesContainerProps, wrapperProps: namesWrapperProps } = useVirtualList(filteredNamesData, {\n itemHeight: 54,\n overscan: 8,\n});\nconst namesColumns: TableColumn\u003CUseVirtualListItem\u003CNameEntry>>[] = [\n {\n header: \"Index\",\n accessorKey: \"data.index\",\n enableSorting: true,\n },\n {\n header: \"Name\",\n accessorKey: \"data.name\",\n enableSorting: true,\n },\n {\n header: \"Length\",\n accessorKey: \"data.length\",\n enableSorting: true,\n },\n {\n header: \"IsWide\",\n accessorKey: \"data.isWide\",\n enableSorting: true,\n cell: ({ row }) => {\n return h(UBadge, {\n label: row.original.data.isWide ? \"Wide\" : \"Ascii\",\n color: row.original.data.isWide ? \"success\" : \"neutral\",\n variant: \"subtle\",\n size: \"sm\",\n });\n },\n },\n {\n header: \"Address\",\n accessorKey: \"data.address\",\n enableSorting: true,\n },\n];\n\n\nonMounted(() => {\n // Setup name table\n const nameTableRootDiv = namesTable.value?.$el as HTMLDivElement;\n const nameTableEl = nameTableRootDiv.firstChild as HTMLTableElement;\n\n // Setup name table container\n namesContainerProps.ref.value = nameTableRootDiv; // Don't assign to ref, Set value instead\n nameTableRootDiv.onscroll = namesContainerProps.onScroll;\n\n // Setup name table wrapper\n watch(namesWrapperProps, () => {\n nameTableEl.style.width = namesWrapperProps.value.style.width;\n nameTableEl.style.height = namesWrapperProps.value.style.height;\n if (\"marginTop\" in namesWrapperProps.value.style) {\n nameTableEl.style.marginTop = namesWrapperProps.value.style.marginTop;\n }\n if (\"marginLeft\" in namesWrapperProps.value.style) {\n nameTableEl.style.marginLeft = namesWrapperProps.value.style.marginLeft;\n }\n if (\"display\" in namesWrapperProps.value.style) {\n nameTableEl.style.display = namesWrapperProps.value.style.display;\n }\n });\n});\n```\n\n```html\n\u003CUTable\n ref=\"names-table\"\n :columns=\"namesColumns\"\n :data=\"namesList\"\n :loading=\"isSearchingNames\"\n class=\"flex-1 h-96 max-h-96 selectable\"\n sticky\n >\n \u003Ctemplate #empty>\n \u003Cdiv class=\"flex flex-col items-center justify-center py-6 px-4 text-center\">\n \u003CUIcon name=\"i-heroicons-tag\" class=\"text-neutral-400 mb-2 w-8 h-8\" />\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",[3154,3157],{"name":3155,"color":3156},"question","d876e3",{"name":3158,"color":3159},"v3","49DCB8",4563,"`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.75997627,{"description":3166,"labels":3167,"number":3176,"owner":3144,"repository":3145,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Description\n\nCurrently only one responsive strategy is supported - horizontal scroll, but this is not best for all cases. It is possible to hack it by custom CSS or create multiple implementations switched by media query, but usually it means very tight reliance on table markup, so it is easy to break. \n\n\nFor most cases this strategies should be enough:\n\n## Horizontal scroll with first/last cell fixed\nCurrently only strategy implemented. \nGood when user needs to focus only to some columns at a time\n\n\n\n## Prioritized columns\nGood when only 1-2 columns are important. Rest can be manually shown. Can be combined with horizontal scroll.\nEasy to implement in UI kit.\n\n\n\n## Row/cell flip and horizontal scroll\nGood when user needs to focus only to single row or compare two/three following rows.\nEasy to implement in UI kit.\n\n\n\n## Graphical chart\nGood for numbers, but usually both table and chart is required.\nNeeds custom implementation.\n\n\n\n## Table heading next to each row\nVery good when user needs to focus only to single row, but without confusion of horizontal scroll.\nEasy to implement in UI kit.\n\n\n## Change rows to carts\nSame like previos, better usability, but needs custom implementation.\n\n\n\nGood demos of different approaches:\nhttps://elvery.net/demo/responsive-tables/\n\nIt would be good if the selected strategy could be applied based on media query, because the breakpoint will depend on the use-case.\n\nWhen not implemented as a feature it would be nice to just show example how to implement it from outside..\n\n### Additional context\n\n_No response_",[3168,3169,3170,3171,3174],{"name":3138,"color":3139},{"name":3158,"color":3159},{"name":3141,"color":3142},{"name":3172,"color":3173},"closed-by-bot","ededed",{"name":3175,"color":3173},"stale",3742,"closed","Alternative responsive table strategies","2025-06-18T09:01:22Z","https://github.com/nuxt/ui/issues/3742",0.72032785,{"description":3183,"labels":3184,"number":3189,"owner":3144,"repository":3145,"state":3177,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### 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_",[3185,3186,3188],{"name":3138,"color":3139},{"name":3187,"color":3142},"wontfix-v2",{"name":3158,"color":3159},1651,"Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.72737455,{"description":3195,"labels":3196,"number":3200,"owner":3144,"repository":3145,"state":3177,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI'm using a Table in my project to display a list of \"Items\" with a summary of their properties. To view the full details of an item, users can click on a row to navigate to a detailed page for that item.\n\nCurrently, I'm using the `@select` event to handle row clicks and navigate to the details page. However, this approach doesn’t support opening the details page in a new tab when users right-click or middle-click on a row.\n\nIs there a way to make each row behave more like a link to support this functionality? Or is there any possibility of adding support for this in a future update?\n\nThank you!\n\n\n### Additional context\n\n_No response_",[3197,3198,3199],{"name":3138,"color":3139},{"name":3187,"color":3142},{"name":3158,"color":3159},2492,"[Feature request] Add link compatibility with Table row","2025-07-01T12:18:07Z","https://github.com/nuxt/ui/issues/2492",0.72825885,{"description":3206,"labels":3207,"number":3211,"owner":3144,"repository":3145,"state":3177,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### 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_",[3208,3209,3210],{"name":3138,"color":3139},{"name":3158,"color":3159},{"name":3141,"color":3142},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7303409,{"description":3217,"labels":3218,"number":3220,"owner":3144,"repository":3145,"state":3177,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### 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によりメッセージを生成しています。",[3219],{"name":3138,"color":3139},1025,"Add Footer Feature to Table Component","2025-07-02T14:57:22Z","https://github.com/nuxt/ui/issues/1025",0.7376573,{"description":3226,"labels":3227,"number":3230,"owner":3144,"repository":3145,"state":3177,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Description\n\nI have read the documentation of the table expanded and TanStack expanded, but I'm not able to figure out how to use it for expanding one row and collapsing another, or use a button to collapse all rows on the table header for an example, \n\n```\n onClick: () => { expanded.value ={}, row.toggleExpanded()}\n```\n\nI tried to modify the onClick function from the docs example to reset the expanded object or trigger something like `row.autoResetExpanded` from the original table docs but I could not get it to work, \n\nAppreciate any hints or guides",[3228,3229],{"name":3155,"color":3156},{"name":3158,"color":3159},4526,"Table Expanded One row collapses others ( one at a time )","2025-08-17T13:48:19Z","https://github.com/nuxt/ui/issues/4526",0.744153,{"description":3236,"labels":3237,"number":3243,"owner":3144,"repository":3145,"state":3177,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Description\n\nThe UPageCard component supports highlight and spotlight modes, but there’s no way to change its color dynamically. It just uses the primary color. It would be nice to be able to change this by a color prop.\n\n### Additional context\n\n_No response_",[3238,3239,3240],{"name":3138,"color":3139},{"name":3158,"color":3159},{"name":3241,"color":3242},"pro","5BD3CB",3389,"UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.74523515,{"description":3249,"labels":3250,"number":3254,"owner":3144,"repository":3145,"state":3177,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm wondering if there is an event (similar to ``@select``) for hovering over a table row?\n\nI want to show a popover panel upon hovering over a row\n\nMy current workaround is to insert an action column, and wrap it in a ``UPopover`` component. But preferably, the entire row should act as a trigger\n\nAny suggestions?\n\n```\n\u003Ctemplate #preview-data=\"{ row }\">\n \u003CUPopover \n mode=\"hover\" \n :open-delay=\"300\" \n :disabled=\"isMounted && !grid.sm\"\n :ui=\"{\n ring: 'dark:ring-gray-700'\n }\"\n >\n \u003CUButton icon=\"i-heroicons-identification-20-solid\" color=\"purple\" square />\n\n \u003Ctemplate #panel>\n \u003CRegioloketPreview \n :data=\"row\"\n />\n \u003C/template>\n \u003C/UPopover>\n \u003C/template>\n\n```\n\n",[3251,3252,3253],{"name":3155,"color":3156},{"name":3187,"color":3142},{"name":3158,"color":3159},2435,"@hover event for UTable rows","2025-07-01T14:32:16Z","https://github.com/nuxt/ui/issues/2435",0.74956924,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fIDOObn64Pt73b-CTHI6TPkFfOU89Gks-QKv51J-WkfM":-1},"/nuxt/ui/527"]