`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: [email protected]
• Builder: -
• User Config: ui, colorMode, content, devtools, ssr, srcDir, modules, extends, runtimeConfig, compatibilityDate, future
• Runtime Modules: @nuxt/[email protected], @pinia/[email protected], @nuxt/[email protected], @nuxt/[email protected]
• 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' }"/>

[rdjanuar]

We separate custom on sort button and table header to make it more flexible. You @CepreR can try as commented by @NasrALdaya