Skip to content

Instantly share code, notes, and snippets.

Created May 25, 2019 19:45
What would you like to do?
This is Vuetify datatables code used in SharePoint. The components data source is a SharePoint list.
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=",300,400,500,700,900|Material+Icons" />
<link rel="stylesheet" href="" />
<div id="app">
<v-app id="inspire">
<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>
<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(){
methods: {
getListData: function(){
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
var vm = this;
vm.dataTable =;
console.log("Always executes")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment