Vuetify Basic

HTML

<link rel="stylesheet" href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="people"
    >
      <template slot="items" scope="props">
        <tr>
          <td>{{ props.item.name }}</td>
          <td>{{ props.item.number }}</td>
        </tr>
      </template>
    </v-data-table>
    
    <v-btn
      @click="clearSort"
    >
      Clear sort
    </v-btn>
  </v-app>
</div>

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  methods: {
  	clearSort() {
    	// Not sure how to externally clear the sorting which is applied by the user
    },
  },
  data: {
  	people: [
    	{ name: "Alpha", number: 20 },
      { name: "Beta", number: 21 },
    ],
  	headers: [
    	{ text: "Name", value: 'name', sortable: true},
      { text: "Age", value: 'numeber', sortable: false }
    ]
  }
});