Is it possible to create a multi-line header in a Vuetify datatable?

Question

I would like to create a table with a multiline header, like in this example.

I've found this post, however the answer does not work. Furthermore, I have looked at the Vuetify documentation and Github issues, but there seems to be no solution.

Would be great if someone could let me know whether something like this is possible and if so how.

Solution 1

It turns out you can simply implement your own categories line above the default headers if you just add <thead> in the slot template. Leaving out the <thead> puts it underneath.

<v-data-table ...>
  <template v-slot:header="props" >
    <thead>
      <tr>
        <th colspan="2">Category 1</th>
        <th colspan="3">Category 2</th>
      </tr>
    </thead>
  </template>
</v-data-table>

Solution 2

You can probably use slot="headerCell". Note that the version of Vuetify used here is 1.5.11

Here's a sample that might give you some pointers:

<v-data-table
    v-bind:headers="headers"
    v-bind:items="items"
    v-bind:search="search"
    v-bind:pagination.sync="pagination"
    hide-actions
    class="elevation-1"
>
  <template slot="headerCell" scope="props">
    <div slot="activator">
      {{ props.header.text }}
    </div>
    <div>
       <span>A</span>
       <span>||</span>
       <span>B</span>
    </div>
    </template>
    <template slot="items" scope="props">
      .....
    </template>
  </v-data-table>

Here's the codepen link : https://codepen.io/nizantz/pen/KYyLOp

Hope it helps your case.

(Note to moderator who deleted my earlier post: I accidentally posted the answer to a wrong question and I already deleted it.)

Comments

[user3067684]

And still have the columns sortable?

[greensin]

That is great and helps me with what I need. Just a quick note, if you do not have a use for the props and dont need the header text write the slot attribute like so v-slot:header without the ="props"