From f99d84538cea4fa97bb444ad89d74cbf444638e6 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 26 Dec 2019 21:40:26 +0300
Subject: [PATCH] Add styled table example

---
 src/views/datatable/DataTableDemo.vue | 27 ++++++++++++++++++++++++++-
 src/views/datatable/DataTableDoc.vue  | 25 +++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 554b60616..9edbf1d25 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -22,6 +22,18 @@
 			<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>
+                </div>
+            </div>
 		</div>
 
         <DataTableDoc />
@@ -59,4 +71,17 @@ export default {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+/deep/ .p-datatable.p-datatable-custom {
+    .p-datatable-thead > tr > th {
+        border: 0 none;
+        text-align: left;
+    } 
+
+    .p-datatable-tbody > tr > td {
+        border: 0 none;
+    } 
+}
+</style>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index a977ac1fd..4f8f332be 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2241,6 +2241,18 @@ export default {
 &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&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 
@@ -2269,6 +2281,19 @@ export default {
         this.carService.getCarsSmall().then(data => this.cars = data);
     }
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+/deep/ .p-datatable.p-datatable-custom {
+    .p-datatable-thead > tr > th {
+        border: 0 none;
+        text-align: left;
+    } 
+
+    .p-datatable-tbody > tr > td {
+        border: 0 none;
+    } 
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>