From 6d4fac6c2a45ca786060f71ebb145518acd68069 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 28 Jun 2019 17:40:32 +0300
Subject: [PATCH] Templating trial

---
 src/components/column/Column.vue              | 24 ++++++++
 src/components/datatable/DataTable.vue        | 39 +++++++++++-
 src/router.js                                 |  5 ++
 src/views/datatable/DataTableDemo.vue         |  6 +-
 src/views/datatable/DataTableSubMenu.vue      | 13 ++++
 .../datatable/DataTableTemplatingDemo.vue     | 59 +++++++++++++++++++
 6 files changed, 142 insertions(+), 4 deletions(-)
 create mode 100644 src/views/datatable/DataTableSubMenu.vue
 create mode 100644 src/views/datatable/DataTableTemplatingDemo.vue

diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index 30a5b4271..788dd77dc 100644
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -24,6 +24,30 @@ export default {
         footer: {
             type: null,
             default: null
+        },
+        headerStyle: {
+            type: null,
+            default: null
+        },
+        headerClass: {
+            type: String,
+            default: null
+        },
+        bodyStyle: {
+            type: null,
+            default: null
+        },
+        bodyClass: {
+            type: String,
+            default: null
+        },
+        footerStyle: {
+            type: null,
+            default: null
+        },
+        footerClass: {
+            type: String,
+            default: null
         }
     },
     render() {
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 318f76a63..5f29860ec 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1,19 +1,24 @@
 <template>
     <div class="p-datatable p-component">
         <slot></slot>
+        {{columns.length}}
         <div class="p-datatable-wrapper">
+            <div class="p-datatable-header" v-if="$scopedSlots.header">
+                <slot name="header"></slot>
+            </div>
             <table>
                 <thead class="p-datatable-thead">
                     <tr>
-                        <th v-for="col of columns" :key="col.columnKey||col.field">
+                        <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="col.headerClass">
                             <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                         </th>
                     </tr>
                 </thead>
                 <tbody class="p-datatable-tbody">
                     <tr class="p-datatable-row" v-for="(rowData, index) of value" :key="getRowKey(rowData, index)">
-                        <td v-for="col of columns" :key="col.columnKey||col.field">
-                            {{resolveFieldData(rowData, col.field)}}
+                        <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
+                            <ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
+                            <template v-else>{{resolveFieldData(rowData, col.field)}}</template>
                         </td>
                     </tr>
                 </tbody>
@@ -25,6 +30,31 @@
 <script>
 import ObjectUtils from '../utils/ObjectUtils';
 
+const ColumnSlot = {
+    functional: true,
+    props: {
+        column: {
+            type: null,
+            default: null
+        },
+        data: {
+            type: null,
+            default: null
+        },
+        type: {
+            type: String,
+            default: null
+        }
+    },
+    render(createElement, context) {
+        const content = context.props.column.$scopedSlots[context.props.type]({
+            'data': context.props.data,
+            'column': context.props.column
+        });
+        return [content];
+    }
+};
+
 export default {
     props: {
         value: {
@@ -51,6 +81,9 @@ export default {
         resolveFieldData(rowData, field) {
             return ObjectUtils.resolveFieldData(rowData, field);
         }
+    },
+    components: {
+        'ColumnSlot': ColumnSlot
     }
 }
 </script>
diff --git a/src/router.js b/src/router.js
index 85f6df8ae..9e788bb98 100644
--- a/src/router.js
+++ b/src/router.js
@@ -110,6 +110,11 @@ export default new Router({
 			path: '/datatable',
 			name: 'datatable',
 			component: () => import('./views/datatable/DataTableDemo.vue')
+        },
+        {
+			path: '/datatable/templating',
+			name: 'datatabletemplating',
+			component: () => import('./views/datatable/DataTableTemplatingDemo.vue')
 		},
 		{
 			path: '/dataview',
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 1d4b7ceef..556482e13 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -1,5 +1,7 @@
 <template>
 	<div>
+        <DataTableSubMenu />
+        
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable</h1>
@@ -28,6 +30,7 @@
 
 <script>
 import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
 import DataTableDoc from './DataTableDoc';
 
 export default {
@@ -52,7 +55,8 @@ export default {
         this.carService.getCarsSmall().then(data => this.cars = data);
     },
     components: {
-        'DataTableDoc': DataTableDoc
+        'DataTableDoc': DataTableDoc,
+        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableSubMenu.vue b/src/views/datatable/DataTableSubMenu.vue
new file mode 100644
index 000000000..ab7fe68f3
--- /dev/null
+++ b/src/views/datatable/DataTableSubMenu.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="content-section content-submenu p-clearfix">
+        <ul>
+            <li><router-link to="/datatable">&#9679; Documentation</router-link></li>
+            <li><router-link to="/datatable/templating">&#9679; Templating</router-link></li>
+            <li><router-link to="/datatable/paginator">&#9679; Paginator</router-link></li>
+            <li><router-link to="/datatable/sort">&#9679; Sort</router-link></li>
+            <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>
+        </ul>
+    </div>    
+</template>
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
new file mode 100644
index 000000000..e1ceee4f6
--- /dev/null
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -0,0 +1,59 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Templating</h1>
+				<p>Custom content at header, body and footer sections are supported via templating.</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">
+                    <template #body="slotProps">
+                        <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/>
+                    </template>
+                </Column>
+                <Column field="color" header="Color"></Column>
+                <Column headerStyle="text-align: center; width: 8em">
+                    <template #body="slotProps">
+                        <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
+                        <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
+                    </template>
+                </Column>
+            </DataTable>
+		</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();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file