Vuetify data-table

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> 

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.