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; + } +}