Vuetify data-table

Question

I have the following code:

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          ></v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

in the script section:

data: {
headers: [
      {text: 'Name', value: 'name'},
    {text: 'Age', value: 'age'}
  ],
  items: [
      {
      name: 'John',
      age: 30
    }
  ]
}

https://jsfiddle.net/eywraw8t/507618/

I do not understand why I'm just getting the header of the table and not the data. Can someone help me?

Answer 1

Just define a slot with your table cells. In your code you have already added items props. You need to populate items inside a slot with data-table cells.

Here is your code with new changes.

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          >
           <template slot="items" slot-scope="props">
             <td>{{ props.item.name }}</td>
             <td class="text-xs-right">{{ props.item.age }}</td>
           </template>
         </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

If you need more information read the docs

Hope this helps.

Answer 2

You have to define your table cells within the "items" slot of the v-data-table component. Headers render automatically, you can specify a "header" slot from customer headers. Checkout out this codepen from the Vuetify Docs on datatables. Notice the template within the v-data-table element that is defining the "items" slot.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>
</template>