From 4c9dbbd2fb9a6334af33e9aff0517d67614c7ddb Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 30 Jan 2020 13:42:35 +0300
Subject: [PATCH] New demo for the default datatable

---
 src/components/datatable/DataTable.vue |   1 +
 src/views/datatable/DataTableDemo.vue  | 165 ++++++++++++++++++++-----
 src/views/datatable/DataTableDoc.vue   | 165 ++++++++++++++++++++-----
 3 files changed, 271 insertions(+), 60 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 506c87d40..f3fcac5d0 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1818,6 +1818,7 @@ export default {
 
 .p-datatable .p-column-title {
     user-select: none;
+    vertical-align: middle;
 }
 
 .p-datatable .p-sortable-column {
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index cef38d44f..f9fe8ac18 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -10,27 +10,73 @@
 		</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>
-
-            <h3>Dynamic Columns</h3>
-			<DataTable :value="cars">
-                <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
-            </DataTable>
-
-            <h3>Styled</h3>
             <div class="p-card">
                 <div class="p-card-body" style="padding:0">
-                    <DataTable :value="cars" class="p-datatable-custom">
-                        <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" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single" 
+                        dataKey="vin" :paginator="true" :rows="10" :filters="filters">
+                        <template #header>
+                            List of Cars
+                            <div class="p-datatable-globalfilter-container">
+                                <InputText v-model="filters['global']" placeholder="Global Search" />
+                            </div>
+                        </template>
+                        <Column field="vin" header="Vin" :sortable="true">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Vin</span>
+                                {{slotProps.data.vin}}
+                            </template>
+                            <template #filter>
+                                <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
+                            </template>
+                        </Column>
+                        <Column field="year" header="Year" :sortable="true" filterMatchMode="contains">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Year</span>
+                                {{slotProps.data.year}}
+                            </template>
+                            <template #filter>
+                                <InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
+                            </template>
+                        </Column>
+                        <Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Brand</span>
+                                <img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/>
+                                <span style="vertical-align:middle">{{slotProps.data.brand}}</span>
+                            </template>
+                            <template #filter>
+                                <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                                    <template #option="brandSlotProps">
+                                        <div class="p-clearfix p-dropdown-car-option">
+                                            <img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" />
+                                            <span>{{brandSlotProps.option.brand}}</span>
+                                        </div>
+                                    </template>
+                                </Dropdown>
+                            </template>
+                        </Column>
+                        <Column field="color" header="Color" :sortable="true" filterMatchMode="in">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Color</span>
+                                {{slotProps.data.color}}
+                            </template>
+                            <template #filter>
+                                <MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" />
+                            </template>
+                        </Column>
+                        <Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Color</span>
+                                {{slotProps.data.color}}
+                            </template>
+                            <template #header>
+                                <Button type="button" icon="pi pi-cog"></Button>
+                            </template>
+                            <template #body>
+                                <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>
@@ -48,23 +94,39 @@ import DataTableDoc from './DataTableDoc';
 export default {
     data() {
         return {
-            columns: null,
-            cars: null
+            cars: null,
+            selectedCar: null,
+            filters: {},
+            brands: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'BMW', value: 'BMW'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
+            ],
+            colors: [
+                {name: 'White', value: 'White'},
+                {name: 'Green', value: 'Green'},
+                {name: 'Silver', value: 'Silver'},
+                {name: 'Black', value: 'Black'},
+                {name: 'Red', value: 'Red'},
+                {name: 'Maroon', value: 'Maroon'},
+                {name: 'Brown', value: 'Brown'},
+                {name: 'Orange', value: 'Orange'},
+                {name: 'Blue', value: 'Blue'}
+            ]
         }
     },
     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);
+        this.carService.getCarsLarge().then(data => this.cars = data);
     },
     components: {
         'DataTableDoc': DataTableDoc,
@@ -74,12 +136,55 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .p-datatable.p-datatable-custom {
+.p-column-filter {
+    margin-top: 1em;
+}
+
+.p-dropdown-car-option {
+    display: flex;
+    align-items: center;
+    text-align: left;
+
+    img {
+        margin-right: .5em;
+        width: 24px;
+    }
+
+    span {
+        margin-top: .125em;
+    }
+}
+
+.p-datatable-globalfilter-container {
+    float: right;
+
+    input {
+        width: 250px;
+    }
+}
+
+/deep/ .p-datatable.p-datatable-cars {
+    .p-datatable-header {
+        border: 0 none;
+        padding: 12px;
+        text-align: left;
+        font-size: 20px;
+    }
+
+    .p-paginator {
+        border: 0 none;
+        padding: 1em;
+    }
+
     .p-datatable-thead > tr > th {
         border: 0 none;
         text-align: left;
     }
 
+    .p-column-title {
+        font-size: 16px;
+    }
+
     .p-datatable-tbody > tr > td {
         border: 0 none;
     }
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 9d9d61a55..caced02cc 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2249,27 +2249,73 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
-&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;
-
-&lt;h3&gt;Dynamic Columns&lt;/h3&gt;
-&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;
-
-&lt;h3&gt;Styled&lt;/h3&gt;
 &lt;div class="p-card"&gt;
     &lt;div class="p-card-body" style="padding:0"&gt;
-        &lt;DataTable :value="cars" class="p-datatable-custom"&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 :value="cars" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single" 
+            dataKey="vin" :paginator="true" :rows="10" :filters="filters"&gt;
+            &lt;template #header&gt;
+                List of Cars
+                &lt;div  class="p-datatable-globalfilter-container"&gt;
+                    &lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+            &lt;Column field="vin" header="Vin" :sortable="true"&gt;
+                &lt;template #body="slotProps"&gt;
+                    &lt;span class="p-column-title"&gt;Vin&lt;/span&gt;
+                    {{slotProps.data.vin}}
+                &lt;/template&gt;
+                &lt;template #filter&gt;
+                    &lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /&gt;
+                &lt;/template&gt;
+            &lt;/Column&gt;
+            &lt;Column field="year" header="Year" :sortable="true" filterMatchMode="contains"&gt;
+                &lt;template #body="slotProps"&gt;
+                    &lt;span class="p-column-title"&gt;Year&lt;/span&gt;
+                    {{slotProps.data.year}}
+                &lt;/template&gt;
+                &lt;template #filter&gt;
+                    &lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt;
+                &lt;/template&gt;
+            &lt;/Column&gt;
+            &lt;Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals"&gt;
+                &lt;template #body="slotProps"&gt;
+                    &lt;span class="p-column-title"&gt;Brand&lt;/span&gt;
+                    &lt;img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/&gt;
+                    &lt;span style="vertical-align:middle"&gt;{{slotProps.data.brand}}&lt;/span&gt;
+                &lt;/template&gt;
+                &lt;template #filter&gt;
+                    &lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
+                        &lt;template #option="brandSlotProps"&gt;
+                            &lt;div class="p-clearfix p-dropdown-car-option"&gt;
+                                &lt;img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" /&gt;
+                                &lt;span&gt;{{brandSlotProps.option.brand}}&lt;/span&gt;
+                            &lt;/div&gt;
+                        &lt;/template&gt;
+                    &lt;/Dropdown&gt;
+                &lt;/template&gt;
+            &lt;/Column&gt;
+            &lt;Column field="color" header="Color" :sortable="true" filterMatchMode="in"&gt;
+                &lt;template #body="slotProps"&gt;
+                    &lt;span class="p-column-title"&gt;Color&lt;/span&gt;
+                    {{slotProps.data.color}}
+                &lt;/template&gt;
+                &lt;template #filter&gt;
+                    &lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" /&gt;
+                &lt;/template&gt;
+            &lt;/Column&gt;
+            &lt;Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center"&gt;
+                &lt;template #body="slotProps"&gt;
+                    &lt;span class="p-column-title"&gt;Color&lt;/span&gt;
+                    {{slotProps.data.color}}
+                &lt;/template&gt;
+                &lt;template #header&gt;
+                    &lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
+                &lt;/template&gt;
+                &lt;template #body&gt;
+                    &lt;Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"&gt;&lt;/Button&gt;
+                    &lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt;
+                &lt;/template&gt;
+            &lt;/Column&gt;
         &lt;/DataTable&gt;
     &lt;/div&gt;
 &lt;/div&gt;
@@ -2282,34 +2328,93 @@ import CarService from '../../service/CarService';
 export default {
     data() {
         return {
-            columns: null,
-            cars: null
+            cars: null,
+            selectedCar: null,
+            filters: {},
+            brands: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'BMW', value: 'BMW'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
+            ],
+            colors: [
+                {name: 'White', value: 'White'},
+                {name: 'Green', value: 'Green'},
+                {name: 'Silver', value: 'Silver'},
+                {name: 'Black', value: 'Black'},
+                {name: 'Red', value: 'Red'},
+                {name: 'Maroon', value: 'Maroon'},
+                {name: 'Brown', value: 'Brown'},
+                {name: 'Orange', value: 'Orange'},
+                {name: 'Blue', value: 'Blue'}
+            ]
         }
     },
     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);
+        this.carService.getCarsLarge().then(data => this.cars = data);
     }
 }
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-/deep/ .p-datatable.p-datatable-custom {
+.p-column-filter {
+    margin-top: 1em;
+}
+
+.p-dropdown-car-option {
+    display: flex;
+    align-items: center;
+    text-align: left;
+
+    img {
+        margin-right: .5em;
+        width: 24px;
+    }
+
+    span {
+        margin-top: .125em;
+    }
+}
+
+.p-datatable-globalfilter-container {
+    float: right;
+
+    input {
+        width: 250px;
+    }
+}
+
+/deep/ .p-datatable.p-datatable-cars {
+    .p-datatable-header {
+        border: 0 none;
+        padding: 12px;
+        text-align: left;
+        font-size: 20px;
+    }
+
+    .p-paginator {
+        border: 0 none;
+        padding: 1em;
+    }
+
     .p-datatable-thead > tr > th {
         border: 0 none;
         text-align: left;
     }
 
+        .p-column-title {
+        font-size: 16px;
+    }
+
     .p-datatable-tbody > tr > td {
         border: 0 none;
     }