Search code examples
vue-componentvuetify.jsquasar-frameworkquasarvuetify-datatable

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

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.

Solution
    • 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)
}