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

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