[Vuejs]-How to create table with header in v-data-table?

by

1👍

The way you use it, you are looking for v-simple-table (or just v-table in Vuetify 3). Just replace the main tag name and wrap the table content into a v-slot:default:

Vuetify 2 Snippet:

<v-simple-table border="1" ref="exportable_table">
  <template v-slot:default>
    <thead>
     ...
  </template>
</v-simple-table>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>

          <v-simple-table border="1">
            <template v-slot:default>
            <thead>
              <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th colspan="2">Left</th>
                <th colspan="2">Right</th>
                <th colspan="2">Top</th>
                <th colspan="2">Bottom</th>
              </tr>
              <tr>
                <th>Date</th>
                <th>Time</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
                <th>EP4-B1</th>
              </tr>
              <tr>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>kPa</th>
                <th>deg C</th>
                <th>kPa</th>
                <th>deg C</th>
                <th>kPa</th>
                <th>deg C</th>
                <th>kPa</th>
                <th>deg C</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Nov, 13 2023</td>
                <td>12:03</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
              </tr>
              <tr>
                <td>Nov, 13 2023</td>
                <td>12:03</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
              </tr>
              <tr>
                <td>Nov, 13 2023</td>
                <td>12:03</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
              </tr>
              <tr>
                <td>Nov, 13 2023</td>
                <td>12:03</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
                <td>213.24</td>
                <td>29.44</td>
              </tr>
            </tbody>
            </template>
          </v-simple-table>

        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Vuetify 3 snippet:

const {createApp,} = Vue;
const {createVuetify} = Vuetify
const vuetify = createVuetify()
const app = {}
createApp(app).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-table border="1">
        <template v-slot:default>
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th colspan="2">Left</th>
            <th colspan="2">Right</th>
            <th colspan="2">Top</th>
            <th colspan="2">Bottom</th>
          </tr>
          <tr>
            <th>Date</th>
            <th>Time</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
            <th>EP4-B1</th>
          </tr>
          <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>kPa</th>
            <th>deg C</th>
            <th>kPa</th>
            <th>deg C</th>
            <th>kPa</th>
            <th>deg C</th>
            <th>kPa</th>
            <th>deg C</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Nov, 13 2023</td>
            <td>12:03</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
          </tr>
          <tr>
            <td>Nov, 13 2023</td>
            <td>12:03</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
          </tr>
          <tr>
            <td>Nov, 13 2023</td>
            <td>12:03</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
          </tr>
          <tr>
            <td>Nov, 13 2023</td>
            <td>12:03</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
            <td>213.24</td>
            <td>29.44</td>
          </tr>
        </tbody>
        </template>
      </v-table>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>

The v-data-table is build from an array of objects, not fully typed out tables. So you need an array like

const items = [
{
  date: 'Nov, 13 2023',
  left_kPa: '12:03',
  left_degC: '29.44',
  ...
},{
  date: 'Nov, 14 2023',
  left_kPa: '11:03',
  left_degC: '31.25',
  ...
},
],

Then you can declare a header like this:

const headers = [
  {value: 'date', text: 'Date'},
  {value: 'left_kPa', text: 'Left kPa'},
  {value: 'left_degC', text: 'Left Deg C'},
  ...
]

where value is the key in the items and text is the column header (in Vuetify 3, use key and title instead).

Finally, you can use the header slot or the body.prepend slot to set a complex header.

Here is a quick snippet, hope it helps you get going:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [{
      date: 'Nov, 13 2023',
      left_kPa: '12:03',
      left_degC: '29.44',
    }, {
      date: 'Nov, 14 2023',
      left_kPa: '11:03',
      left_degC: '31.25',
    }, ],
    headers: [{
        value: 'date',
        text: 'Date'
      },
      {
        value: 'left_kPa',
        text: 'Left kPa'
      },
      {
        value: 'left_degC',
        text: 'Left Deg C'
      },
    ]

  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :headers="headers"
            :items="items"
          >
            <template v-slot:body.prepend="{isMobile, props, on}">
              <tr>
                <th></th>
                <th colspan="2">Left</th>
              </tr>
            </template>
          </v-data-table>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
👤Moritz Ringler

Leave a comment