`th` styles not applying to sortable columns in `UTable`

[CepreR]

Environment

• Operating System: Linux
• Node Version: v22.4.1
• Nuxt Version: 3.13.0
• CLI Version: 3.13.0
• Nitro Version: 2.9.7
• Package Manager: yarn@1.22.22
• Builder: -
• User Config: ui, colorMode, content, devtools, ssr, srcDir, modules, extends, runtimeConfig, compatibilityDate, future
• Runtime Modules: @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @nuxt/eslint@0.3.13, @nuxt/content@2.13.2
• Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-xz318d?file=app.vue

Description

th styles not applying to sortable columns in UTable

When using the UTable component, custom styles applied to the th element (e.g., color: 'text-pink-400') do not affect columns marked as sortable. This results in inconsistent styling between sortable and non-sortable columns.

Steps to Reproduce:

Define a UTable with custom th styles. Include both sortable and non-sortable columns. Observe that the custom styles are not applied to the sortable columns.

Expected Behavior

All column headers should apply the specified th styles, regardless of whether they are sortable.

Additional context

Logs

No response

[CepreR]

Additionally, attempting to modify the default.sortButton configuration (e.g., icon, color, variant) does not have any effect:

    sortButton: {
      color: 'red',
    },

[NasrALdaya]

It deals with a sortable column th as a custom button with custom styles.

You can customize it however you want and match its style with your own "th". Here’s how you can give it a pink color: <UTable :columns="columns" :rows="people" :ui="{ th: { color: 'text-pink-500' } }" :sort-button="{ color: 'pink' }"/>