QTable: Using wrap-cells with sortable columns breaks header row

[straurob]

What happened?

I'm using the QTable component with three columns:

• Column 1: sortable, short text
• Column 2: sortable, short text
• Column 3: not sortable, long text

As column 3 may contain long text, I added the wrap-cells attribute to the table. Now, the sort arrows in the table header row seem to get wrapped as well, so that the header row "breaks" as in the following screenshot.

What did you expect to happen?

I expected the table header row and the sort arrows to be on one level. If I remove the wrap-cells attribute, then the header row looks "fine". Maybe I'm missing something?

Reproduction URL

https://stackblitz.com/edit/quasarframework-4zyk8n?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Go to the reproduction link.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36) - linux/x64
NodeJs - 16.20.0

Global packages
  NPM - 9.4.2
  yarn - 1.22.19
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.9.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.40 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.24.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframework4zyk8n-ejiq
  en0 - 192.168.1.104

Relevant log output

No response

Additional context

No response

[metalsadman]

I think It does what is documented, what you can do is add a min-width ie. headerStyles: 'min-width: 110px; for your column to accommodate the header text.
https://stackblitz.com/edit/quasarframework-8emswb?file=src%2Fpages%2FIndexPage.vue

[straurob]

I think It does what is documented, what you can do is add a min-width ie. headerStyles: 'min-width: 110px; for your column to accommodate the header text.

That seems to do the trick, though I have to admin that I don't fully understand it. Is there no way to make the header automatically as wide as necessary to fit the header content incl. the sort arrows?

[michaelolson01]

I am going to also mention, why when using the headerClass:'no-wrap' it ignores it, and wraps the sort button to the next line?

[thomaspsik]

The class that works is:
headerClasses: 'text-no-wrap'