\n\nWhile the popover label are aligned properly for UInputMenu, the placeholder and arrow is still not in proper direction.\n\u003Cimg width=\"221\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e65e9225-b614-40b0-98a5-25b7204f5dc3\" />\n\nSame with these tags components, it's direction should be reversed too. \n\u003Cimg width=\"442\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0198503a-bd34-4b4e-8a11-1213023f9383\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3100,3101,3102],{"name":3036,"color":3037},{"name":3022,"color":3023},{"name":3040,"color":3041},3538,"USelect and UInputMenu don't support RTL language.","2025-03-20T14:01:01Z","https://github.com/nuxt/ui/issues/3538",0.71634364,{"description":3109,"labels":3110,"number":3117,"owner":3025,"repository":3026,"state":3055,"title":3118,"updated_at":3119,"url":3120,"score":3121},"### 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",[3111,3112,3115],{"name":3019,"color":3020},{"name":3113,"color":3114},"closed-by-bot","ededed",{"name":3116,"color":3114},"stale",2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7300619,{"description":3123,"labels":3124,"number":3128,"owner":3025,"repository":3026,"state":3055,"title":3129,"updated_at":3130,"url":3131,"score":3132},"### 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_",[3125,3126,3127],{"name":3064,"color":3065},{"name":3113,"color":3114},{"name":3116,"color":3114},1195,"[Feature] Add section headers/separators in UTable","2025-06-19T02:13:00Z","https://github.com/nuxt/ui/issues/1195",0.7422945,{"description":3134,"labels":3135,"number":3139,"owner":3025,"repository":3026,"state":3055,"title":3140,"updated_at":3141,"url":3142,"score":3143},"### 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_",[3136,3137,3138],{"name":3064,"color":3065},{"name":3022,"color":3023},{"name":3078,"color":3079},3389,"UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.74239415,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fF4bYQSWLlt2bKVhfJnyQb6nBh8Rgiap8YX482WOuhKw":-1},"/nuxt/ui/4563"]