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 @@
+
+
Styled
+
@@ -59,4 +71,17 @@ export default {
'DataTableSubMenu': DataTableSubMenu
}
}
-
\ No newline at end of file
+
+
+
\ 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 {
<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>
@@ -2269,6 +2281,19 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
+
+
+
+/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;
+ }
+}