Vuetify data-table - datatables

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

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>

Answer 2

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.