Using Vuetify (Datatables component) in SharePoint

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.

<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>
view raw datatable.html hosted with ❤ by GitHub
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")
view raw datatable.js hosted with ❤ by GitHub


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: