Crud demo for DataTable

src/views/datatable/DataTableCrudDemo.vue

@@ -10,13 +10,52 @@
 		</div>
 
 		<div class="content-section implementation">
-			<h3 class="first">Basic</h3>
-			<DataTable :value="cars">
-                <Column field="vin" header="Vin"></Column>
-                <Column field="year" header="Year"></Column>
-                <Column field="brand" header="Brand"></Column>
-                <Column field="color" header="Color"></Column>
+			<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
+                :paginator="true" :rows="15">
+                <template #header>
+                    CRUD for Cars
+                </template>
+                <Column field="vin" header="Vin" :sortable="true"></Column>
+                <Column field="year" header="Year" :sortable="true"></Column>
+                <Column field="brand" header="Brand" :sortable="true"></Column>
+                <Column field="color" header="Color" :sortable="true"></Column>
+                <template #footer>
+                    <div style="text-align:left">
+                        <Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
+                    </div>
+                </template>
             </DataTable>
+
+            <Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
+                <div class="p-cardialog-content">
+                    <div class="p-grid p-fluid" v-if="car">
+                        <div class="p-col-4"><label for="vin">Vin</label></div>
+                        <div class="p-col-8">
+                            <InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" />
+                        </div>
+
+                        <div class="p-col-4"><label for="year">Year</label></div>
+                        <div class="p-col-8">
+                            <InputText id="year" v-model="car.year" autocomplete="off" />
+                        </div>
+
+                        <div class="p-col-4"><label for="brand">Brand</label></div>
+                        <div class="p-col-8">
+                            <InputText id="brand" v-model="car.brand" autocomplete="off" />
+                        </div>
+                        
+                        <div class="p-col-4"><label for="color">Color</label></div>
+                        <div class="p-col-8">
+                            <InputText id="color" v-model="car.color" autocomplete="off" />
+                        </div>
+                    </div>
+                </div>
+                
+                <template #footer>
+                    <Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" />
+                    <Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" />
+                </template>
+            </Dialog>
 		</div>
 	</div>
 </template>
@@ -28,7 +67,10 @@ import DataTableSubMenu from './DataTableSubMenu';
 export default {
     data() {
         return {
-            cars: null
+            cars: null,
+            dialogVisible: false,
+            car: null,
+            selectedCar: null
         }
     },
     carService: null,
@@ -38,8 +80,72 @@ export default {
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
     },
+    methods: {
+        addNewCar() {
+            this.car = {vin: this.generateVin(), year: '', brand: '', color: ''};
+            this.dialogVisible = true;
+        },
+        deleteCar() {
+            let index = this.findIndexByVin(this.car.vin);
+            this.cars = this.cars.filter((val,i) => i !== index);
+            this.dialogVisible = false;
+            this.car = null;
+            this.selectedCar = null;
+        },
+        saveCar() {
+            let index = this.findIndexByVin(this.car.vin);
+            let cars = [...this.cars];
+            if (index === -1)
+                cars.push(this.car);
+            else
+                cars[index] = this.car;
+
+            this.cars = cars;
+            this.dialogVisible = false;
+            this.car = null;
+            this.selectedCar = null;
+        },
+        onRowSelect(event) {
+            this.car = {...event.data};
+            this.dialogVisible = true;
+        },
+        generateVin() {
+            let result = '';
+            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            let charactersLength = characters.length;
+            for ( var i = 0; i < 8; i++ ) {
+                result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            }
+            return result;
+        },
+        findIndexByVin(vin) {
+            let index = -1;
+            for (let i = 0; i < this.cars.length; i++) {
+                if (this.cars[i].vin === vin) {
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        }
+    },
     components: {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
+
+<style scoped>
+.p-cardialog-content {
+    padding: 1em;
+}
+
+.p-cardialog-content .p-col-4 {
+    padding: .75em;
+}
+
+.p-cardialog-content .p-col-8 {
+    padding: .5em;
+}
+</style>