├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── AddTutorial.vue
    │   ├── Tutorial.vue
    │   └── TutorialsList.vue
    ├── http-common.js
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router.js
    └── services
    │   └── TutorialDataService.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vuetify data-table example with CRUD App | v-data-table
 2 | 
 3 | For more detail, please visit:
 4 | > [Vuetify data-table example with CRUD App](https://bezkoder.com/vuetify-data-table-example/)
 5 | 
 6 | More Practice:
 7 | > [Vuetify Pagination (Server Side) example](https://bezkoder.com/vuetify-pagination-server-side/)
 8 | 
 9 | > [Vuetify File upload example](https://bezkoder.com/vuetify-file-upload/)
10 | 
11 | Using Bootstrap instead:
12 | > [Vue.js CRUD App with Vue Router & Axios](https://bezkoder.com/vue-js-crud-app/)
13 | 
14 | > [Vue Pagination with Axios and API (Server Side pagination) example](https://bezkoder.com/vue-pagination-axios/)
15 | 
16 | Server side Pagination for this app:
17 | 
18 | > [Server side Pagination in Node.js with Sequelize and MySQL](https://bezkoder.com/node-js-sequelize-pagination-mysql/)
19 | 
20 | > [Spring Boot Pagination and Filter example](https://bezkoder.com/spring-boot-pagination-filter-jpa-pageable/)
21 | 
22 | Fullstack with Node.js Express:
23 | > [Vue.js + Node.js Express + MySQL](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
24 | 
25 | > [Vue.js + Node.js Express + PostgreSQL](https://bezkoder.com/vue-node-express-postgresql/)
26 | 
27 | > [Vue.js + Node.js Express + MongoDB](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
28 | 
29 | Fullstack with Spring Boot:
30 | > [Vue.js + Spring Boot](https://bezkoder.com/spring-boot-vue-js-crud-example/)
31 | 
32 | > [Vue.js + Spring Boot + MongoDB](https://bezkoder.com/spring-boot-vue-mongodb/)
33 | 
34 | Fullstack with Django:
35 | > [Vue.js + Django](https://bezkoder.com/django-vue-js-rest-framework/)
36 | 
37 | ## Project setup
38 | ```
39 | npm install
40 | ```
41 | 
42 | ### Compiles and hot-reloads for development
43 | ```
44 | npm run serve
45 | ```
46 | 
47 | ### Compiles and minifies for production
48 | ```
49 | npm run build
50 | ```
51 | 
52 | ### Run your tests
53 | ```
54 | npm run test
55 | ```
56 | 
57 | ### Lints and fixes files
58 | ```
59 | npm run lint
60 | ```
61 | 
62 | ### Customize configuration
63 | See [Configuration Reference](https://cli.vuejs.org/config/).
64 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuetify-data-table-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.20.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11",
14 |     "vue-router": "^3.4.3",
15 |     "vuetify": "^2.2.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^4.5.0",
19 |     "@vue/cli-plugin-eslint": "^4.5.0",
20 |     "@vue/cli-service": "^4.5.0",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-vue": "^6.2.2",
24 |     "sass": "^1.19.0",
25 |     "sass-loader": "^8.0.0",
26 |     "vue-cli-plugin-vuetify": "^2.0.7",
27 |     "vue-template-compiler": "^2.6.11",
28 |     "vuetify-loader": "^1.3.0"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     },
42 |     "rules": {}
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions",
47 |     "not dead"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vuetify-data-table-example/abd37e1affa3f2dc2c061a9881339c7cb4c163ce/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar app dark>
 4 |       <div class="d-flex align-center mr-2">
 5 |         bezKoder
 6 |       </div>
 7 | 
 8 |       <v-btn to="/tutorials" text>
 9 |         Tutorials
10 |       </v-btn>
11 | 
12 |       <v-btn to="/add" text>
13 |         Add
14 |       </v-btn>
15 |     </v-app-bar>
16 | 
17 |     <v-main>
18 |       <router-view />
19 |     </v-main>
20 |   </v-app>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: "app",
26 | };
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vuetify-data-table-example/abd37e1affa3f2dc2c061a9881339c7cb4c163ce/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/AddTutorial.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="submit-form mt-3 mx-auto">
 3 |     <p class="headline">Add Tutorial</p>
 4 | 
 5 |     <div v-if="!submitted">
 6 |       <v-form ref="form" lazy-validation>
 7 |         <v-text-field
 8 |           v-model="tutorial.title"
 9 |           :rules="[(v) => !!v || 'Title is required']"
10 |           label="Title"
11 |           required
12 |         ></v-text-field>
13 | 
14 |         <v-text-field
15 |           v-model="tutorial.description"
16 |           :rules="[(v) => !!v || 'Description is required']"
17 |           label="Description"
18 |           required
19 |         ></v-text-field>
20 |       </v-form>
21 | 
22 |       <v-btn color="primary" class="mt-3" @click="saveTutorial">Submit</v-btn>
23 |     </div>
24 | 
25 |     <div v-else>
26 |       <v-card class="mx-auto">
27 |         <v-card-title>
28 |           Submitted successfully!
29 |         </v-card-title>
30 | 
31 |         <v-card-subtitle>
32 |           Click the button to add new Tutorial.
33 |         </v-card-subtitle>
34 | 
35 |         <v-card-actions>
36 |           <v-btn color="success" @click="newTutorial">Add</v-btn>
37 |         </v-card-actions>
38 |       </v-card>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | import TutorialDataService from "../services/TutorialDataService";
45 | 
46 | export default {
47 |   name: "add-tutorial",
48 |   data() {
49 |     return {
50 |       tutorial: {
51 |         id: null,
52 |         title: "",
53 |         description: "",
54 |         published: false,
55 |       },
56 |       submitted: false,
57 |     };
58 |   },
59 |   methods: {
60 |     saveTutorial() {
61 |       var data = {
62 |         title: this.tutorial.title,
63 |         description: this.tutorial.description,
64 |       };
65 | 
66 |       TutorialDataService.create(data)
67 |         .then((response) => {
68 |           this.tutorial.id = response.data.id;
69 |           console.log(response.data);
70 |           this.submitted = true;
71 |         })
72 |         .catch((e) => {
73 |           console.log(e);
74 |         });
75 |     },
76 | 
77 |     newTutorial() {
78 |       this.submitted = false;
79 |       this.tutorial = {};
80 |     },
81 |   },
82 | };
83 | </script>
84 | 
85 | <style>
86 | .submit-form {
87 |   max-width: 300px;
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/Tutorial.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="currentTutorial" class="edit-form py-3">
  3 |     <p class="headline">Edit Tutorial</p>
  4 | 
  5 |     <v-form ref="form" lazy-validation>
  6 |       <v-text-field
  7 |         v-model="currentTutorial.title"
  8 |         :rules="[(v) => !!v || 'Title is required']"
  9 |         label="Title"
 10 |         required
 11 |       ></v-text-field>
 12 | 
 13 |       <v-text-field
 14 |         v-model="currentTutorial.description"
 15 |         :rules="[(v) => !!v || 'Description is required']"
 16 |         label="Description"
 17 |         required
 18 |       ></v-text-field>
 19 | 
 20 |       <label><strong>Status:</strong></label>
 21 |       {{ currentTutorial.published ? "Published" : "Pending" }}
 22 | 
 23 |       <v-divider class="my-5"></v-divider>
 24 | 
 25 |       <v-btn v-if="currentTutorial.published"
 26 |         @click="updatePublished(false)"
 27 |         color="primary" small class="mr-2"
 28 |       >
 29 |         UnPublish
 30 |       </v-btn>
 31 | 
 32 |       <v-btn v-else
 33 |         @click="updatePublished(true)"
 34 |         color="primary" small class="mr-2"
 35 |       >
 36 |         Publish
 37 |       </v-btn>
 38 | 
 39 |       <v-btn color="error" small class="mr-2" @click="deleteTutorial">
 40 |         Delete
 41 |       </v-btn>
 42 | 
 43 |       <v-btn color="success" small @click="updateTutorial">
 44 |         Update
 45 |       </v-btn>
 46 |     </v-form>
 47 | 
 48 |     <p class="mt-3">{{ message }}</p>
 49 |   </div>
 50 | 
 51 |   <div v-else>
 52 |     <p>Please click on a Tutorial...</p>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | import TutorialDataService from "../services/TutorialDataService";
 58 | 
 59 | export default {
 60 |   name: "tutorial",
 61 |   data() {
 62 |     return {
 63 |       currentTutorial: null,
 64 |       message: "",
 65 |     };
 66 |   },
 67 |   methods: {
 68 |     getTutorial(id) {
 69 |       TutorialDataService.get(id)
 70 |         .then((response) => {
 71 |           this.currentTutorial = response.data;
 72 |           console.log(response.data);
 73 |         })
 74 |         .catch((e) => {
 75 |           console.log(e);
 76 |         });
 77 |     },
 78 | 
 79 |     updatePublished(status) {
 80 |       var data = {
 81 |         id: this.currentTutorial.id,
 82 |         title: this.currentTutorial.title,
 83 |         description: this.currentTutorial.description,
 84 |         published: status,
 85 |       };
 86 | 
 87 |       TutorialDataService.update(this.currentTutorial.id, data)
 88 |         .then((response) => {
 89 |           this.currentTutorial.published = status;
 90 |           console.log(response.data);
 91 |         })
 92 |         .catch((e) => {
 93 |           console.log(e);
 94 |         });
 95 |     },
 96 | 
 97 |     updateTutorial() {
 98 |       TutorialDataService.update(this.currentTutorial.id, this.currentTutorial)
 99 |         .then((response) => {
100 |           console.log(response.data);
101 |           this.message = "The tutorial was updated successfully!";
102 |         })
103 |         .catch((e) => {
104 |           console.log(e);
105 |         });
106 |     },
107 | 
108 |     deleteTutorial() {
109 |       TutorialDataService.delete(this.currentTutorial.id)
110 |         .then((response) => {
111 |           console.log(response.data);
112 |           this.$router.push({ name: "tutorials" });
113 |         })
114 |         .catch((e) => {
115 |           console.log(e);
116 |         });
117 |     },
118 |   },
119 |   mounted() {
120 |     this.message = "";
121 |     this.getTutorial(this.$route.params.id);
122 |   },
123 | };
124 | </script>
125 | 
126 | <style>
127 | .edit-form {
128 |   max-width: 300px;
129 |   margin: auto;
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/components/TutorialsList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-row align="center" class="list px-3 mx-auto">
  3 |     <v-col cols="12" md="8">
  4 |       <v-text-field v-model="title" label="Search by Title"></v-text-field>
  5 |     </v-col>
  6 | 
  7 |     <v-col cols="12" md="4">
  8 |       <v-btn small @click="searchTitle">
  9 |         Search
 10 |       </v-btn>
 11 |     </v-col>
 12 | 
 13 |     <v-col cols="12" sm="12">
 14 |       <v-card class="mx-auto" tile>
 15 |         <v-card-title>Tutorials</v-card-title>
 16 | 
 17 |         <v-data-table
 18 |           :headers="headers"
 19 |           :items="tutorials"
 20 |           disable-pagination
 21 |           :hide-default-footer="true"
 22 |         >
 23 |           <template v-slot:[`item.actions`]="{ item }">
 24 |             <v-icon small class="mr-2" @click="editTutorial(item.id)">mdi-pencil</v-icon>
 25 |             <v-icon small @click="deleteTutorial(item.id)">mdi-delete</v-icon>
 26 |           </template>
 27 |         </v-data-table>
 28 | 
 29 |         <v-card-actions v-if="tutorials.length > 0">
 30 |           <v-btn small color="error" @click="removeAllTutorials">
 31 |             Remove All
 32 |           </v-btn>
 33 |         </v-card-actions>
 34 |       </v-card>
 35 |     </v-col>
 36 |   </v-row>
 37 | </template>
 38 | 
 39 | <script>
 40 | import TutorialDataService from "../services/TutorialDataService";
 41 | export default {
 42 |   name: "tutorials-list",
 43 |   data() {
 44 |     return {
 45 |       tutorials: [],
 46 |       title: "",
 47 |       headers: [
 48 |         { text: "Title", align: "start", sortable: false, value: "title" },
 49 |         { text: "Description", value: "description", sortable: false },
 50 |         { text: "Status", value: "status", sortable: false },
 51 |         { text: "Actions", value: "actions", sortable: false },
 52 |       ],
 53 |     };
 54 |   },
 55 |   methods: {
 56 |     retrieveTutorials() {
 57 |       TutorialDataService.getAll()
 58 |         .then((response) => {
 59 |           this.tutorials = response.data.map(this.getDisplayTutorial);
 60 |           console.log(response.data);
 61 |         })
 62 |         .catch((e) => {
 63 |           console.log(e);
 64 |         });
 65 |     },
 66 | 
 67 |     refreshList() {
 68 |       this.retrieveTutorials();
 69 |     },
 70 | 
 71 |     removeAllTutorials() {
 72 |       TutorialDataService.deleteAll()
 73 |         .then((response) => {
 74 |           console.log(response.data);
 75 |           this.refreshList();
 76 |         })
 77 |         .catch((e) => {
 78 |           console.log(e);
 79 |         });
 80 |     },
 81 | 
 82 |     searchTitle() {
 83 |       TutorialDataService.findByTitle(this.title)
 84 |         .then((response) => {
 85 |           this.tutorials = response.data.map(this.getDisplayTutorial);
 86 |           console.log(response.data);
 87 |         })
 88 |         .catch((e) => {
 89 |           console.log(e);
 90 |         });
 91 |     },
 92 | 
 93 |     editTutorial(id) {
 94 |       this.$router.push({ name: "tutorial-details", params: { id: id } });
 95 |     },
 96 | 
 97 |     deleteTutorial(id) {
 98 |       TutorialDataService.delete(id)
 99 |         .then(() => {
100 |           this.refreshList();
101 |         })
102 |         .catch((e) => {
103 |           console.log(e);
104 |         });
105 |     },
106 | 
107 |     getDisplayTutorial(tutorial) {
108 |       return {
109 |         id: tutorial.id,
110 |         title: tutorial.title.length > 30 ? tutorial.title.substr(0, 30) + "..." : tutorial.title,
111 |         description: tutorial.description.length > 30 ? tutorial.description.substr(0, 30) + "..." : tutorial.description,
112 |         status: tutorial.published ? "Published" : "Pending",
113 |       };
114 |     },
115 |   },
116 |   mounted() {
117 |     this.retrieveTutorials();
118 |   },
119 | };
120 | </script>
121 | 
122 | <style>
123 | .list {
124 |   max-width: 750px;
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/http-common.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default axios.create({
4 |   baseURL: "http://localhost:8080/api",
5 |   headers: {
6 |     "Content-type": "application/json"
7 |   }
8 | });
9 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify'
 4 | import router from './router'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   router,
10 |   vuetify,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | 
 4 | Vue.use(Router);
 5 | 
 6 | export default new Router({
 7 |   mode: "history",
 8 |   routes: [
 9 |     {
10 |       path: "/",
11 |       alias: "/tutorials",
12 |       name: "tutorials",
13 |       component: () => import("./components/TutorialsList")
14 |     },
15 |     {
16 |       path: "/tutorials/:id",
17 |       name: "tutorial-details",
18 |       component: () => import("./components/Tutorial")
19 |     },
20 |     {
21 |       path: "/add",
22 |       name: "add",
23 |       component: () => import("./components/AddTutorial")
24 |     }
25 |   ]
26 | });
27 | 


--------------------------------------------------------------------------------
/src/services/TutorialDataService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class TutorialDataService {
 4 |   getAll() {
 5 |     return http.get("/tutorials");
 6 |   }
 7 | 
 8 |   get(id) {
 9 |     return http.get(`/tutorials/${id}`);
10 |   }
11 | 
12 |   create(data) {
13 |     return http.post("/tutorials", data);
14 |   }
15 | 
16 |   update(id, data) {
17 |     return http.put(`/tutorials/${id}`, data);
18 |   }
19 | 
20 |   delete(id) {
21 |     return http.delete(`/tutorials/${id}`);
22 |   }
23 | 
24 |   deleteAll() {
25 |     return http.delete(`/tutorials`);
26 |   }
27 | 
28 |   findByTitle(title) {
29 |     return http.get(`/tutorials?title=${title}`);
30 |   }
31 | }
32 | 
33 | export default new TutorialDataService();


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: ["vuetify"],
3 |   devServer: {
4 |     port: 8081,
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------