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") | |
| }) | |
| } | |
| } | |
| }) |
