Expand Mode
-
+
+ ![]()
+
+
+
+
+ {{formatCurrency(slotProps.data.price)}}
+
+
+
+
+
+
+
+ {{slotProps.data.inventoryStatus}}
+
+
-
-
+
-
-
-<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
+<DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
<template #header>
<div class="table-header-container">
- <Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
+ <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
</template>
- <Column :expander="true" headerStyle="width: 3em" />
- <Column field="vin" header="Vin"></Column>
- <Column field="year" header="Year"></Column>
- <Column field="brand" header="Brand"></Column>
- <Column field="color" header="Color"></Column>
+ <Column :expander="true" headerStyle="width: 3rem" />
+ <Column field="name" header="Name" sortable></Column>
+ <Column header="Image">
+ <template #body="slotProps">
+ <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+ </template>
+ </Column>
+ <Column field="price" header="Price" sortable>
+ <template #body="slotProps">
+ {{formatCurrency(slotProps.data.price)}}
+ </template>
+ </Column>
+ <Column field="category" header="Category" sortable></Column>
+ <Column field="rating" header="Reviews" sortable>
+ <template #body="slotProps">
+ <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
+ </template>
+ </Column>
+ <Column header="Status" sortable>
+ <template #body="slotProps">
+ <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+ </template>
+ </Column>
<template #expansion="slotProps">
- <div class="car-details">
- <div>
- <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
- <div class="p-grid">
- <div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
- <div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
- <div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
- <div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
- </div>
- </div>
- <Button icon="pi pi-search"></Button>
+ <div class="orders-subtable">
+ <h5>Orders for {{slotProps.data.name}}</h5>
+ <DataTable :value="slotProps.data.orders">
+ <Column field="id" header="Id" sortable></Column>
+ <Column field="customer" header="Customer" sortable></Column>
+ <Column field="date" header="Date" sortable></Column>
+ <Column field="amount" header="Amount" sortable>
+ <template #body="slotProps" sortable>
+ {{formatCurrency(slotProps.data.amount)}}
+ </template>
+ </Column>
+ <Column header="Status" sortable>
+ <template #body="slotProps">
+ <span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span>
+ </template>
+ </Column>
+ <Column headerStyle="width:4rem">
+ <template #body>
+ <Button icon="pi pi-search" />
+ </template>
+ </Column>
+ </DataTable>
</div>
</template>
</DataTable>
@@ -77,36 +135,39 @@
-import CarService from '../../service/CarService';
+import ProductService from '../../service/ProductService';
export default {
data() {
return {
- cars: null,
+ products: null,
expandedRows: []
}
},
- carService: null,
+ productService: null,
created() {
- this.carService = new CarService();
+ this.productService = new ProductService();
},
mounted() {
- this.carService.getCarsSmall().then(data => this.cars = data);
+ this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
},
methods: {
onRowExpand(event) {
- this.$toast.add({severity: 'info', summary: 'Row Expanded', detail: 'Vin: ' + event.data.vin, life: 3000});
+ this.$toast.add({severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000});
},
onRowCollapse(event) {
- this.$toast.add({severity: 'success', summary: 'Row Collapsed', detail: 'Vin: ' + event.data.vin, life: 3000});
+ this.$toast.add({severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000});
},
expandAll() {
- this.expandedRows = this.cars.filter(car => car.vin);
+ this.expandedRows = this.products.filter(p => p.id);
this.$toast.add({severity: 'success', summary: 'All Rows Expanded', life: 3000});
},
collapseAll() {
this.expandedRows = null;
this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
+ },
+ formatCurrency(value) {
+ return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
}
}
@@ -118,75 +179,51 @@ export default {
\ No newline at end of file
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index 66ad3e834..b609d2bae 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -285,7 +285,7 @@ export default {
methods: {
loadChunk(index, length) {
let chunk = [];
- for (let i = 0; i < length; i++) {
+ for (let i = 0; i < length; i++) {
chunk[i] = {...this.inmemoryData[i]};
}
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index 24a61cfe9..d109ec235 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -298,7 +298,6 @@ export default {
- ![]()
-
-
+
-
- Vin: {{slotProps.data.vin}}
- Year: {{slotProps.data.year}}
- Brand: {{slotProps.data.brand}}
- Color: {{slotProps.data.color}}
-
+
+
+
+ {{formatCurrency(slotProps.data.amount)}}
+
+
+
+
+ {{slotProps.data.status}}
+
+
+
+
+
+
+
+
@@ -45,31 +74,60 @@