How can i set vertical text on q-table header quasar? - vue-component

Question

I'm trying to parse some excel sheets for my web project and in this q-table I need to set two columns with vertical text just like this example but when I try to rotate it changes all columns.

Answer 1

First, assign unique names for header cells. For example:
{
name: 'first',
align: 'center',
label: 'First col header',
field: row => row.value
},
{
name: 'second',
align: 'center',
label: 'Second col header',
field: row => row.value
},
{
name: 'third',
align: 'center',
label: 'Third col header',
field: row => row.value
},
{
name: 'fourth',
align: 'center',
label: 'Fourth col header',
field: row => row.value
},
]
Then. leverage the header-cell-[name] slot to target the headers by their names, and add CSS class .text-vertical to headers that need to be vertical.
Like this:
<q-table
:rows="rows"
:columns="columns"
row-key="name"
>
<template v-slot:header-cell-second="props">
<q-th :props="props">
<span class="text-vertical">
{{ props.col.label }}
</span>
</q-th>
</template>
<template v-slot:header-cell-third="props">
<q-th :props="props">
<span class="text-vertical">
{{ props.col.label }}
</span>
</q-th>
</template>
</q-table>
CSS:
.text-vertical{
writing-mode: vertical-rl;
transform: rotate(-180deg)
}
You could give a look to my implementation in codepen:
https://codepen.io/hoangdng-the-sans/pen/xxjNxgv