\n\n\u003Cimg width=\"1315\" height=\"541\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e12e8c0c-9e43-45ee-8e81-5ee9ff1e8c50\" />",[3145,3148],{"name":3146,"color":3147},"question","d876e3",{"name":3149,"color":3150},"v3","49DCB8",4721,"nuxt","ui","open","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.7433889,{"description":3160,"labels":3161,"number":3166,"owner":3152,"repository":3153,"state":3154,"title":3167,"updated_at":3168,"url":3169,"score":3170},"- [x] Pagination\n- [ ] Row Pinning\n- [x] Grouping\n- [ ] Virtualization\n- ...\n\n\n",[3162,3165],{"name":3163,"color":3164},"enhancement","a2eeef",{"name":3149,"color":3150},2441,"[Table] Implement more TanStack Table features","2025-05-07T13:26:12Z","https://github.com/nuxt/ui/issues/2441",0.7558905,{"description":3172,"labels":3173,"number":3176,"owner":3152,"repository":3153,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Package\n\nv3.x\n\n### Description\n\nHi,\nIs there a way to allow users to adjust column widths using a column resize handler?",[3174,3175],{"name":3146,"color":3147},{"name":3149,"color":3150},4961,"closed","Table component column width","2025-09-13T09:36:00Z","https://github.com/nuxt/ui/issues/4961",0.6393387,{"description":3183,"labels":3184,"number":3197,"owner":3152,"repository":3153,"state":3177,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\n\n- Vue 3.5.12\n- Node 20.19.0\n- MacOS\n- Vite 6.3.2\n- Nuxt UI 3.0.2/3.1.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.2/3.0.1\n\n### Reproduction\n\n\nreproduction:\nhttps://codesandbox.io/p/devbox/jolly-minsky-c2hdtr\n\n\n\n### Description\n\nWhen using Nuxt UI v 3.0.2 and 3.1.0, both appear to experience an issue with the Table component and the width of the table due to columns that have enough data in them for the character count to exceed to size of the screen. I believe the `whitespace-nowrap` class being applied globally to the `td` slot is the main source of the issue. Furthermore, when the `whitespace-nowrap` class is applied, then any width class you try to apply to the column definition will apply in the html, but doesn't actually appear to limit the overall width of the column. \n\nThe only way I have found that will actually make the column the desired width is replace the `whitespace-nowrap` class with `whitespace-normal` class via:\n1. Global change to the `td` slot via vite.config to something like this: `table: { slots: { td: 'p-4 text-sm text-muted whitespace-normal [&:has([role=checkbox])]:pe-0' } }`\n2. The `ui` prop on the table with something like this: `:ui=\"{ td: 'whitespace-normal p-4 text-sm text-muted [&:has([role=checkbox])]:pe-0' }\"`\n3. Add `whitespace-normal` in the column def via the meta class `{ meta: { class: { td: 'w-20 whitespace-normal' } } }`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3185,3188,3189,3192,3195],{"name":3186,"color":3187},"bug","d73a4a",{"name":3149,"color":3150},{"name":3190,"color":3191},"triage","ffffff",{"name":3193,"color":3194},"closed-by-bot","ededed",{"name":3196,"color":3194},"stale",3988,"Table component width overflows screen when column data is large","2025-08-20T02:08:53Z","https://github.com/nuxt/ui/issues/3988",0.68789655,{"description":3203,"labels":3204,"number":3207,"owner":3152,"repository":3153,"state":3177,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Description\n\nIs there a template available of how to implement a custom column filter for the Nuxt UI (TanStack) tables?\n\nI have read the TanStack documentation but I cannot figure out how to implement it in the Nuxt UI version. I cannot seem to find any samples online either.\n\nThanks!",[3205,3206],{"name":3146,"color":3147},{"name":3149,"color":3150},4217,"Custom column filter in table","2025-05-26T12:39:05Z","https://github.com/nuxt/ui/issues/4217",0.71022767,{"description":3213,"labels":3214,"number":3218,"owner":3152,"repository":3153,"state":3177,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### 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",[3215,3216,3217],{"name":3146,"color":3147},{"name":3193,"color":3194},{"name":3196,"color":3194},2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.71796614,{"description":3224,"labels":3225,"number":3228,"owner":3152,"repository":3153,"state":3177,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[3226,3227],{"name":3146,"color":3147},{"name":3149,"color":3150},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7254052,{"labels":3234,"number":3238,"owner":3152,"repository":3152,"state":3177,"title":3239,"updated_at":3240,"url":3241,"score":3242},[3235],{"name":3236,"color":3237},"2.x","d4c5f9",6094,"computed property based on innerWidth / window.innerWidth","2025-01-31T18:15:36Z","https://github.com/nuxt/nuxt/issues/6094",0.7293488,{"description":3244,"labels":3245,"number":3247,"owner":3152,"repository":3153,"state":3177,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### 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_",[3246],{"name":3163,"color":3164},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.73054147,{"description":3253,"labels":3254,"number":3257,"owner":3152,"repository":3153,"state":3177,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Description\n\nI recently updated to the v3, which now uses Nuxt I18n for its own component translations. Since this update, my existing i18n configuration no longer works as expected. It seems the framework’s new i18n setup conflicts with or overrides my own translations, and I’m unable to figure out how to properly extend its default localization to include my own.\n\nCould you please provide guidance on how to configure or extend the new i18n setup so that my existing translations remain functional?\n\n",[3255,3256],{"name":3146,"color":3147},{"name":3149,"color":3150},2956,"How to extend Nuxt I18n translations?","2025-03-28T17:37:21Z","https://github.com/nuxt/ui/issues/2956",0.7335791,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPLmgWxX_NoJZjCu3QI7ZKHd0QlEpZdGWYhpbgiZfUME":-1},"/nuxt/ui/3935"]