vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add styled table example

pull/132/head
cagataycivici 2019-12-26 21:40:26 +03:00
parent 75a264d48a
commit f99d84538c
2 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/datatable/DataTableDemo.vue
View File

@ -22,6 +22,18 @@
<DataTable :value="cars"> <DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable> </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> </div>
<DataTableDoc /> <DataTableDoc />
@ -60,3 +72,16 @@ export default {
} }
} }
</script> </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>

25
src/views/datatable/DataTableDoc.vue
View File

@ -2241,6 +2241,18 @@ export default {
&lt;DataTable :value="cars"&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;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&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> </template>
</CodeHighlight> </CodeHighlight>
@ -2269,6 +2281,19 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data); 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> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>