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

Templating demo

pull/358/head
cagataycivici 2020-06-30 15:32:48 +03:00
parent d57cc67ac6
commit 68a89c7903
1 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -9,35 +9,42 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<DataTable :value="products">
<template #header>
<div class="table-header">
List of Cars
Products
<Button icon="pi pi-refresh" />
</div>
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand">
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/>
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="color" header="Color"></Column>
<Column headerStyle="width: 8em" bodyStyle="text-align: center">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
</template>
<Column field="price" header="Price">
<template #body="slotProps">
<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>
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category"></Column>
<Column field="rating" header="Reviews">
<template #body="slotProps">
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column header="Status">
<template #body="slotProps">
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
</template>
</Column>
<template #footer>
In total there are {{cars ? cars.length : 0 }} cars.
In total there are {{products ? products.length : 0 }} products.
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
@ -45,54 +52,101 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&gt;
&lt;DataTable :value="products"&gt;
&lt;template #header&gt;
&lt;div style="line-height:1.87em" class="p-clearfix"&gt;
&lt;Button icon="pi pi-refresh" style="float: left"/&gt;
List of Cars
&lt;div class="table-header"&gt;
Products
&lt;Button icon="pi pi-refresh" /&gt;
&lt;/div&gt;
&lt;/template&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 field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column headerStyle="width: 8em" bodyStyle="text-align: center"&gt;
&lt;template #header&gt;
&lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;Column field="price" header="Price"&gt;
&lt;template #body="slotProps"&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;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews"&gt;
&lt;template #body="slotProps"&gt;
&lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Status"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #footer&gt;
In total there are &#123;&#123;cars ? cars.length : 0 &#125;&#125; cars.
In total there are {{products ? products.length : 0 }} products.
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}
}
</CodeHighlight>
<CodeHighlight lang="css">
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.product-image {
width: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
</CodeHighlight>
</TabPanel>
@ -102,20 +156,25 @@ export default {
</template>
<script>
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}
}
</script>
@ -126,4 +185,33 @@ export default {
align-items: center;
justify-content: space-between;
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.product-image {
width: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
</style>