How to invert headers direction with Vuetify?

Question

Everything is pretty much said in the title.

In the documentation, Vuetify builds a table with mutliple objects that all have the same properties. Like this:

https://vuetifyjs.com/en/components/data-tables

headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Actions', value: 'action', sortable: false },
      ]

This will show headers in the first row and then you will have a list of different Dessert objects.

What I need is to have headers displayed vertically in the first column, and than the value of that 1 object in the second column. Like this, where Password and Security question would be my 2 headers:

What is the best example on how to build this with Vuetify?

Answer 1

If you really want to use a data table for this you could perhaps just do this simply with CSS using flex-box.

Add the following CSS (you may want to create separate classes to prevent conflicts with other tables).

table tr {
   display:flex;
   flex-direction: column;
   float: left;
}

thead,tbody {
  float: left;
}

Here is a working example on Codepen https://codepen.io/pixelskribe/pen/VwwLwXa