From a4457368e7042600b05cf6284a829f0bd82748fd Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 30 Jan 2020 13:07:40 +0300
Subject: [PATCH] Add new DataTable demos

---
 src/components/splitbutton/SplitButton.vue    |  3 +-
 src/router.js                                 | 10 +++
 src/views/datatable/DataTableBasicDemo.vue    | 80 +++++++++++++++++
 .../datatable/DataTableDynamicColumnsDemo.vue | 90 +++++++++++++++++++
 src/views/datatable/DataTableSubMenu.vue      |  2 +
 5 files changed, 183 insertions(+), 2 deletions(-)
 create mode 100644 src/views/datatable/DataTableBasicDemo.vue
 create mode 100644 src/views/datatable/DataTableDynamicColumnsDemo.vue

diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index af8ce388e..6be7eaf8f 100644
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -3,14 +3,13 @@
         <PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
         <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
             aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
-        <Menu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
+        <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
     </div>
 </template>
 
 <script>
 import Button from '../button/Button';
 import Menu from '../menu/Menu';
-import DomHandler from '../utils/DomHandler';
 import UniqueComponentId from '../utils/UniqueComponentId';
 
 export default {
diff --git a/src/router.js b/src/router.js
index 1f84daa29..88f07a454 100644
--- a/src/router.js
+++ b/src/router.js
@@ -131,6 +131,16 @@ export default new Router({
 			name: 'datatable',
 			component: () => import('./views/datatable/DataTableDemo.vue')
         },
+        {
+			path: '/datatable/basic',
+			name: 'datatablebasic',
+			component: () => import('./views/datatable/DataTableBasicDemo.vue')
+        },
+        {
+			path: '/datatable/dynamiccolumns',
+			name: 'datatabledynamiccolumns',
+			component: () => import('./views/datatable/DataTableDynamicColumnsDemo.vue')
+        },
         {
 			path: '/datatable/templating',
 			name: 'datatabletemplating',
diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
new file mode 100644
index 000000000..723c79b35
--- /dev/null
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -0,0 +1,80 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Basic</h1>
+				<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<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 class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </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/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
new file mode 100644
index 000000000..250ea0dc1
--- /dev/null
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -0,0 +1,90 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Dynamic Columns</h1>
+				<p>Columns can be defined dynamically using the v-for directive.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars">
+                <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+            </DataTable>
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars"&gt;
+    &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+
+        this.columns = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+
+        this.columns = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+    },
+    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 dd10d483f..d473fc38c 100644
--- a/src/views/datatable/DataTableSubMenu.vue
+++ b/src/views/datatable/DataTableSubMenu.vue
@@ -2,6 +2,8 @@
     <div class="content-section content-submenu p-clearfix">
         <ul>
             <li><router-link to="/datatable">&#9679; Documentation</router-link></li>
+            <li><router-link to="/datatable/basic">&#9679; Basic</router-link></li>
+            <li><router-link to="/datatable/dynamiccolumns">&#9679; Dynamic</router-link></li>
             <li><router-link to="/datatable/templating">&#9679; Templating</router-link></li>
             <li><router-link to="/datatable/colgroup">&#9679; ColGroup</router-link></li>
             <li><router-link to="/datatable/paginator">&#9679; Paginator</router-link></li>