\n \u003C/div>\n \u003C/template>\n```\n\nto a table with more than one column, the body slot would only fill one cell of the table.\n\nTo prevent this, am shoud I do that?\n\n```\n \u003Ctemplate #body-top>\n \u003Ctr>\n \u003Ctd :colspan=\"3\" class=\"text-center text-sm text-muted\">\n \u003CUButton\n icon=\"i-lucide-plus\"\n variant=\"ghost\"\n color=\"neutral\"\n />\n \u003C/td>\n \u003C/tr>\n \u003C/template>\n```\n\nI would really love to see a best-practice example :-) ",[3151],{"name":3152,"color":3153},"question","d876e3",4862,"nuxt","ui","open","body-* slot on Table does only make sense if you got one col?","2025-09-01T12:19:10Z","https://github.com/nuxt/ui/issues/4862",0.7300476,{"description":3163,"labels":3164,"number":3174,"owner":3155,"repository":3156,"state":3157,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### 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,3171],{"name":3166,"color":3167},"bug","d73a4a",{"name":3169,"color":3170},"triage","ffffff",{"name":3172,"color":3173},"v4","49DCB8",4968,"UTable row data-selectable attribute not aligned with TanStack API","2025-09-14T00:46:37Z","https://github.com/nuxt/ui/issues/4968",0.74205154,{"description":3180,"labels":3181,"number":3185,"owner":3155,"repository":3156,"state":3157,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### 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\" />",[3182,3183],{"name":3152,"color":3153},{"name":3184,"color":3173},"v3",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.7701039,{"description":3191,"labels":3192,"number":3195,"owner":3155,"repository":3156,"state":3157,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### 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",[3193,3194],{"name":3152,"color":3153},{"name":3184,"color":3173},4563,"`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.77302873,{"description":3201,"labels":3202,"number":3205,"owner":3155,"repository":3156,"state":3157,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Description\n\nWe've been using tanstack/vue-table for a while now with our own meta declaration. Now we started using nuxt ui, which is great but the meta declaration in Table.d.ts is messing up the ts types. \n\nHow would we get rid of it?",[3203,3204],{"name":3152,"color":3153},{"name":3184,"color":3173},4828,"How to get rid of the meta declaration in Table.d.ts","2025-08-26T14:31:46Z","https://github.com/nuxt/ui/issues/4828",0.774909,{"description":3211,"labels":3212,"number":3220,"owner":3155,"repository":3156,"state":3221,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Description\n\nIs there any way to pass in whole row as a slot. I have not found anything like in documentation.",[3213,3214,3215,3218],{"name":3152,"color":3153},{"name":3184,"color":3173},{"name":3216,"color":3217},"closed-by-bot","ededed",{"name":3219,"color":3217},"stale",3530,"closed","Slot for complete row in `UTable`","2025-06-18T09:01:36Z","https://github.com/nuxt/ui/issues/3530",0.7180652,{"description":3227,"labels":3228,"number":3234,"owner":3155,"repository":3156,"state":3221,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### 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_",[3229,3232,3233],{"name":3230,"color":3231},"enhancement","a2eeef",{"name":3184,"color":3173},{"name":3169,"color":3170},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7224083,{"description":3240,"labels":3241,"number":3246,"owner":3155,"repository":3156,"state":3221,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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_",[3242,3243,3245],{"name":3230,"color":3231},{"name":3244,"color":3170},"wontfix-v2",{"name":3184,"color":3173},1651,"Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.7318105,{"description":3252,"labels":3253,"number":3258,"owner":3155,"repository":3156,"state":3221,"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\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_",[3254,3255,3256,3257],{"name":3230,"color":3231},{"name":3169,"color":3170},{"name":3216,"color":3217},{"name":3219,"color":3217},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.74021864,{"description":3264,"labels":3265,"number":3270,"owner":3155,"repository":3156,"state":3221,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### 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_",[3266,3267,3268,3269],{"name":3230,"color":3231},{"name":3169,"color":3170},{"name":3216,"color":3217},{"name":3219,"color":3217},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.7463128,["Reactive",3276],{},["Set"],["ShallowReactive",3279],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT54lqG05U5eLloUHYcCs_-b5oyp-KOSyQeM_QhHXeyA":-1},"/nuxt/ui/2053"]