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

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

@ -9,35 +9,42 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars"> <DataTable :value="products">
<template #header> <template #header>
<div class="table-header"> <div class="table-header">
List of Cars Products
<Button icon="pi pi-refresh" /> <Button icon="pi pi-refresh" />
</div> </div>
</template> </template>
<Column field="vin" header="Vin"></Column> <Column field="name" header="Name"></Column>
<Column field="year" header="Year"></Column> <Column header="Image">
<Column field="brand" header="Brand"> <template #body="slotProps">
<template #body="slotProps"> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/>
</template> </template>
</Column> </Column>
<Column field="color" header="Color"></Column> <Column field="price" header="Price">
<Column headerStyle="width: 8em" bodyStyle="text-align: center">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
</template>
<template #body="slotProps"> <template #body="slotProps">
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button> {{formatCurrency(slotProps.data.price)}}
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button> </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> </template>
</Column> </Column>
<template #footer> <template #footer>
In total there are {{cars ? cars.length : 0 }} cars. In total there are {{products ? products.length : 0 }} products.
</template> </template>
</DataTable> </DataTable>
</div> </div>
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">
@ -45,54 +52,101 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="products"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="line-height:1.87em" class="p-clearfix"&gt; &lt;div class="table-header"&gt;
&lt;Button icon="pi pi-refresh" style="float: left"/&gt; Products
List of Cars &lt;Button icon="pi pi-refresh" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column header="Image"&gt;
&lt;Column field="brand" header="Brand"&gt; &lt;template #body="slotProps"&gt;
&lt;template #body="slotProps"&gt; &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="price" header="Price"&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;template #body="slotProps"&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; {{formatCurrency(slotProps.data.price)}}
&lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt; &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;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;template #footer&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;/template&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { 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> </CodeHighlight>
</TabPanel> </TabPanel>
@ -102,20 +156,25 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { 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> </script>
@ -126,4 +185,33 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; 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> </style>