Using Vuetify (Datatables component) in SharePoint
Posted by Isaac Sogunro
Vuetify is an awesome material design framework for Vue.js. I really think it’s name should have been Vuedoo because of the amazing components you can leverage in your SharePoint applications. Here’s a recent video I created and the code I used in the video.
<head> | |
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> | |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" /> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" /> | |
</head> | |
<div id="app"> | |
{{test}} | |
<v-app id="inspire"> | |
<v-data-table | |
:headers="headers" | |
:items="dataTable" | |
class="elevation-1" | |
> | |
<template v-slot:items="props"> | |
<td>{{ props.item.Title }}</td> | |
<td class="text-xs-right">{{ props.item.Details }}</td> | |
<td class="text-xs-right">{{ props.item.keep }}</td> | |
</template> | |
</v-data-table> | |
</v-app> | |
</div> | |
<script type="text/javascript" src="/sites/demos/mdemos/webpart/datatable/datatable.js"></script> |
new Vue({ | |
el: "#app", | |
data: { | |
dataTable: [], | |
test: "HELLO THERE!!!", | |
headers: [ | |
{ text: 'Announcements', value:'Title'}, | |
{ text: 'Details', value: 'Details' }, | |
{ text: 'Keep', value: 'keep' } | |
], | |
}, | |
created: function(){ | |
this.getListData(); | |
}, | |
methods: { | |
getListData: function(){ | |
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items"; | |
var vm = this; | |
axios.get(endPointUrl).then(function(response){ | |
vm.dataTable = response.data.value; | |
}) | |
.catch(function(error){ | |
console.log(error); | |
}) | |
.then(function(){ | |
console.log("Always executes") | |
}) | |
} | |
} | |
}) |