",[3156,3157],{"name":3140,"color":3141},{"name":3143,"color":3144},4578,"Table header cant be sticky on body scroll / Allow removal of root-div or root-div classes","2025-07-23T13:42:26Z","https://github.com/nuxt/ui/issues/4578",0.78348243,{"description":3164,"labels":3165,"number":3172,"owner":3146,"repository":3147,"state":3148,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Description\n\nIm going through our site for Accessibility and noticed there is no scope attribute on the th elements on UTable. There also seem to be no way for me to add it.\n\nHave this been overlooked, or am i blind? pun intended\n\nhttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#the_scope_attribute",[3166,3169],{"name":3167,"color":3168},"question","d876e3",{"name":3170,"color":3171},"v3","49DCB8",4410,"UTable Accessibility for screen readers (th scope)","2025-06-27T13:33:36Z","https://github.com/nuxt/ui/issues/4410",0.7894231,{"description":3178,"labels":3179,"number":3182,"owner":3146,"repository":3147,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### 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_",[3180,3181],{"name":3140,"color":3141},{"name":3170,"color":3171},4475,"closed","Support inline `style` in `\u003CUTable>` via `meta.style`","2025-07-14T08:56:29Z","https://github.com/nuxt/ui/issues/4475",0.7129048,{"description":3189,"labels":3190,"number":3198,"owner":3146,"repository":3147,"state":3183,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### 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_",[3191,3192,3193,3196],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3194,"color":3195},"closed-by-bot","ededed",{"name":3197,"color":3195},"stale",2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.74176776,{"description":3204,"labels":3205,"number":3209,"owner":3146,"repository":3147,"state":3183,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### 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_",[3206,3207,3208],{"name":3140,"color":3141},{"name":3194,"color":3195},{"name":3197,"color":3195},1195,"[Feature] Add section headers/separators in UTable","2025-06-19T02:13:00Z","https://github.com/nuxt/ui/issues/1195",0.74754727,{"description":3215,"labels":3216,"number":3219,"owner":3146,"repository":3147,"state":3183,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\nBeen trying to use it but getting errors:\n\n```\n\u003Cstyle scoped>\nh1 {\n @apply font-bold mb-6;\n}\n\u003C/style>\n```\n\nresults in:\n\n[plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: font-bold\n\n\nIs this a bug or am I missing something here?\n",[3217,3218],{"name":3167,"color":3168},{"name":3170,"color":3171},4094,"How to use @apply tailwind directives within style scoped blocks?","2025-05-07T08:03:56Z","https://github.com/nuxt/ui/issues/4094",0.7538648,{"description":3225,"labels":3226,"number":3230,"owner":3146,"repository":3147,"state":3183,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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_",[3227,3228,3229],{"name":3140,"color":3141},{"name":3170,"color":3171},{"name":3143,"color":3144},3296,"Support for Multi-Row and Colspan Headers in UTable Component","2025-07-01T12:05:35Z","https://github.com/nuxt/ui/issues/3296",0.7572577,{"labels":3236,"number":3242,"owner":3146,"repository":3146,"state":3183,"title":3243,"updated_at":3244,"url":3245,"score":3246},[3237,3239],{"name":3140,"color":3238},"8DEF37",{"name":3240,"color":3241},"2.x","d4c5f9",8811,"Add classes to loading to customize nuxt-progress bar","2023-01-22T17:08:38Z","https://github.com/nuxt/nuxt/issues/8811",0.77361876,{"description":3248,"labels":3249,"number":3252,"owner":3146,"repository":3147,"state":3183,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Description\n\nHi,\n\nI'm just trying migrate to the v3 table component but I'm kind of stuck while trying to apply the correct column widths to the columns which before (in v2) was possible via simple tailwind classes per column.\nFor example a table has an action button in the last column, so the column should only have the width of the icon of the button so that other columns have more space but the column width is automatically about four times the button's size by default instead.\n\nThe [TanStack Table Docs](https://tanstack.com/table/v8/docs/guide/column-sizing) state that individual column sizes must be applied manually which also seems right looking at the [table component code](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Table.vue) if I didn't miss anything in that regard.\n\nFrom my understanding the custom width styling must be applied to the `th`/`td` elements since every styling attempt inside the slots to make a column smaller (e.g. only 32px) did not work and only affected the content inside the header/cell slots.\n\nIs there any way at the moment to set a custom width for specific columns with the current implementation of the table component?",[3250,3251],{"name":3167,"color":3168},{"name":3170,"color":3171},3935,"Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.7778334,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fo0cKZeZhM2SvZVdX_Hu8rJeWXJwr5oDNM_8fe3ehr7g":-1},"/nuxt/ui/4764"]