From 96362b6e97d37d9547ccf69562216020d4e3cd70 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 9 Jul 2019 16:02:15 +0300
Subject: [PATCH] Placeholders for new features

---
 src/router.js                                 | 20 +++++++++
 .../datatable/DataTableColToggleDemo.vue      | 45 +++++++++++++++++++
 src/views/datatable/DataTableCrudDemo.vue     | 45 +++++++++++++++++++
 src/views/datatable/DataTableExportDemo.vue   | 45 +++++++++++++++++++
 .../datatable/DataTableResponsiveDemo.vue     | 45 +++++++++++++++++++
 src/views/datatable/DataTableSubMenu.vue      |  4 ++
 6 files changed, 204 insertions(+)
 create mode 100644 src/views/datatable/DataTableColToggleDemo.vue
 create mode 100644 src/views/datatable/DataTableCrudDemo.vue
 create mode 100644 src/views/datatable/DataTableExportDemo.vue
 create mode 100644 src/views/datatable/DataTableResponsiveDemo.vue

diff --git a/src/router.js b/src/router.js
index 319e48b07..157559217 100644
--- a/src/router.js
+++ b/src/router.js
@@ -140,6 +140,26 @@ export default new Router({
 			path: '/datatable/selection',
 			name: 'datatableselection',
 			component: () => import('./views/datatable/DataTableSelectionDemo.vue')
+        },
+        {
+			path: '/datatable/coltoggle',
+			name: 'datatablecoltoggle',
+			component: () => import('./views/datatable/DataTableColToggleDemo.vue')
+        },
+        {
+			path: '/datatable/responsive',
+			name: 'datatableresponsive',
+			component: () => import('./views/datatable/DataTableResponsiveDemo.vue')
+        },
+        {
+			path: '/datatable/export',
+			name: 'datatableexport',
+			component: () => import('./views/datatable/DataTableExportDemo.vue')
+        },
+        {
+			path: '/datatable/crud',
+			name: 'datatablecrud',
+			component: () => import('./views/datatable/DataTableCrudDemo.vue')
 		},
 		{
 			path: '/dataview',
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
new file mode 100644
index 000000000..0b57b9f81
--- /dev/null
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Column Toggle</h1>
+				<p>MultiSelect component can be used to implement column toggle functionality.</p>
+			</div>
+		</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>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
new file mode 100644
index 000000000..b1f0029c8
--- /dev/null
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Crud</h1>
+				<p>This samples demonstrates a CRUD implementation using various PrimeReact components.</p>
+			</div>
+		</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>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
new file mode 100644
index 000000000..33758b884
--- /dev/null
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Export</h1>
+				<p>DataTable can export its data to CSV format..</p>
+			</div>
+		</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>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
new file mode 100644
index 000000000..41f776fa1
--- /dev/null
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Responsive</h1>
+				<p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
+			</div>
+		</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>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableSubMenu.vue b/src/views/datatable/DataTableSubMenu.vue
index ab7fe68f3..a3b2d3b82 100644
--- a/src/views/datatable/DataTableSubMenu.vue
+++ b/src/views/datatable/DataTableSubMenu.vue
@@ -8,6 +8,10 @@
             <li><router-link to="/datatable/filter">&#9679; Filter</router-link></li>
             <li><router-link to="/datatable/selection">&#9679; Selection</router-link></li>
             <li><router-link to="/datatable/lazy">&#9679; Lazy</router-link></li>
+            <li><router-link to="/datatable/coltoggle">&#9679; ColToggle</router-link></li>
+            <li><router-link to="/datatable/responsive">&#9679; Responsive</router-link></li>
+            <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
+            <li><router-link to="/datatable/crud">&#9679; Crud</router-link></li>
         </ul>
     </div>    
 </template>