Skip to content

Instantly share code, notes, and snippets.

@isogunro

isogunro/datatable.html

Created May 25, 2019 19:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save isogunro/28b6bfc8095c6b8bca33f331b2c8faa8 to your computer and use it in GitHub Desktop.
Save isogunro/28b6bfc8095c6b8bca33f331b2c8faa8 to your computer and use it in GitHub Desktop.
Download ZIP
This is Vuetify datatables code used in SharePoint. The components data source is a SharePoint list.
Raw
datatable.html
<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>
Raw
datatable.js
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")
})
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment