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

Initiated new table demos

pull/358/head
cagataycivici 2020-06-30 14:43:29 +03:00
parent 437f979b78
commit 01ecb64076
41 changed files with 823 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
public/demo/data/products-small.json Normal file
View File

@ -0,0 +1,124 @@
{
"data": [
{
"id": "1000",
"code": "f230fh0g3",
"name": "Bamboo Watch",
"description": "Product Description",
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
"quantity": 24,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch",
"description": "Product Description",
"image": "black-watch.jpg",
"price": 72,
"category": "Accessories",
"quantity": 61,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band",
"description": "Product Description",
"image": "blue-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1003",
"code": "244wgerg2",
"name": "Blue T-Shirt",
"description": "Product Description",
"image": "blue-t-shirt.jpg",
"price": 29,
"category": "Clothing",
"quantity": 25,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1004",
"code": "h456wer53",
"name": "Bracelet",
"description": "Product Description",
"image": "bracelet.jpg",
"price": 15,
"category": "Accessories",
"quantity": 73,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1005",
"code": "av2231fwg",
"name": "Brown Purse",
"description": "Product Description",
"image": "brown-purse.jpg",
"price": 120,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
},
{
"id": "1006",
"code": "bib36pfvm",
"name": "Chakra Bracelet",
"description": "Product Description",
"image": "chakra-bracelet.jpg",
"price": 32,
"category": "Accessories",
"quantity": 5,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1007",
"code": "mbvjkgip5",
"name": "Galaxy Earrings",
"description": "Product Description",
"image": "galaxy-earrings.jpg",
"price": 34,
"category": "Accessories",
"quantity": 23,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1008",
"code": "vbb124btr",
"name": "Game Controller",
"description": "Product Description",
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
},
{
"id": "1009",
"code": "cm230f032",
"name": "Gaming Set",
"description": "Product Description",
"image": "gaming-set.jpg",
"price": 299,
"category": "Electronics",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 3
}
]
}

364
public/demo/data/products.json Normal file
View File

@ -0,0 +1,364 @@
{
"data": [
{
"id": "1000",
"code": "f230fh0g3",
"name": "Bamboo Watch",
"description": "Product Description",
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
"quantity": 24,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch",
"description": "Product Description",
"image": "black-watch.jpg",
"price": 72,
"category": "Accessories",
"quantity": 61,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band",
"description": "Product Description",
"image": "blue-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1003",
"code": "244wgerg2",
"name": "Blue T-Shirt",
"description": "Product Description",
"image": "blue-t-shirt.jpg",
"price": 29,
"category": "Clothing",
"quantity": 25,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1004",
"code": "h456wer53",
"name": "Bracelet",
"description": "Product Description",
"image": "bracelet.jpg",
"price": 15,
"category": "Accessories",
"quantity": 73,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1005",
"code": "av2231fwg",
"name": "Brown Purse",
"description": "Product Description",
"image": "brown-purse.jpg",
"price": 120,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
},
{
"id": "1006",
"code": "bib36pfvm",
"name": "Chakra Bracelet",
"description": "Product Description",
"image": "chakra-bracelet.jpg",
"price": 32,
"category": "Accessories",
"quantity": 5,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1007",
"code": "mbvjkgip5",
"name": "Galaxy Earrings",
"description": "Product Description",
"image": "galaxy-earrings.jpg",
"price": 34,
"category": "Accessories",
"quantity": 23,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1008",
"code": "vbb124btr",
"name": "Game Controller",
"description": "Product Description",
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
},
{
"id": "1009",
"code": "cm230f032",
"name": "Gaming Set",
"description": "Product Description",
"image": "gaming-set.jpg",
"price": 299,
"category": "Electronics",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 3
},
{
"id": "1010",
"code": "plb34234v",
"name": "Gold Phone Case",
"description": "Product Description",
"image": "gold-phone-case.jpg",
"price": 24,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
},
{
"id": "1011",
"code": "4920nnc2d",
"name": "Green Earbuds",
"description": "Product Description",
"image": "green-earbuds.jpg",
"price": 89,
"category": "Electronics",
"quantity": 23,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1012",
"code": "250vm23cc",
"name": "Green T-Shirt",
"description": "Product Description",
"image": "green-t-shirt.jpg",
"price": 49,
"category": "Clothing",
"quantity": 74,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1013",
"code": "fldsmn31b",
"name": "Grey T-Shirt",
"description": "Product Description",
"image": "grey-t-shirt.jpg",
"price": 48,
"category": "Clothing",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 3
},
{
"id": "1014",
"code": "waas1x2as",
"name": "Headphones",
"description": "Product Description",
"image": "headphones.jpg",
"price": 175,
"category": "Electronics",
"quantity": 8,
"inventoryStatus": "LOWSTOCK",
"rating": 5
},
{
"id": "1015",
"code": "vb34btbg5",
"name": "Light Green T-Shirt",
"description": "Product Description",
"image": "light-green-t-shirt.jpg",
"price": 49,
"category": "Clothing",
"quantity": 34,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1016",
"code": "k8l6j58jl",
"name": "Lime Band",
"description": "Product Description",
"image": "lime-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 12,
"inventoryStatus": "INSTOCK",
"rating": 3
},
{
"id": "1017",
"code": "v435nn85n",
"name": "Mini Speakers",
"description": "Product Description",
"image": "mini-speakers.jpg",
"price": 85,
"category": "Clothing",
"quantity": 42,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1018",
"code": "09zx9c0zc",
"name": "Painted Phone Case",
"description": "Product Description",
"image": "painted-phone-case.jpg",
"price": 56,
"category": "Accessories",
"quantity": 41,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1019",
"code": "mnb5mb2m5",
"name": "Pink Band",
"description": "Product Description",
"image": "pink-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 63,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1020",
"code": "r23fwf2w3",
"name": "Pink Purse",
"description": "Product Description",
"image": "pink-purse.jpg",
"price": 110,
"category": "Accessories",
"quantity": 0,
"inventoryStatus": "OUTOFSTOCK",
"rating": 4
},
{
"id": "1021",
"code": "pxpzczo23",
"name": "Purple Band",
"description": "Product Description",
"image": "purple-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 6,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1022",
"code": "2c42cb5cb",
"name": "Purple Gemstone Necklace",
"description": "Product Description",
"image": "purple-gemstone-necklace.jpg",
"price": 45,
"category": "Accessories",
"quantity": 62,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1023",
"code": "5k43kkk23",
"name": "Purple T-Shirt",
"description": "Product Description",
"image": "purple-t-shirt.jpg",
"price": 49,
"category": "Clothing",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 5
},
{
"id": "1024",
"code": "lm2tny2k4",
"name": "Shoes",
"description": "Product Description",
"image": "shoes.jpg",
"price": 64,
"category": "Clothing",
"quantity": 0,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1025",
"code": "nbm5mv45n",
"name": "Sneakers",
"description": "Product Description",
"image": "sneakers.jpg",
"price": 78,
"category": "Clothing",
"quantity": 52,
"inventoryStatus": "INSTOCK",
"rating": 4
},
{
"id": "1026",
"code": "zx23zc42c",
"name": "Teal T-Shirt",
"description": "Product Description",
"image": "teal-t-shirt.jpg",
"price": 49,
"category": "Clothing",
"quantity": 3,
"inventoryStatus": "LOWSTOCK",
"rating": 3
},
{
"id": "1027",
"code": "acvx872gc",
"name": "Yellow Earbuds",
"description": "Product Description",
"image": "yellow-earbuds.jpg",
"price": 89,
"category": "Electronics",
"quantity": 35,
"inventoryStatus": "INSTOCK",
"rating": 3
},
{
"id": "1028",
"code": "tx125ck42",
"name": "Yoga Mat",
"description": "Product Description",
"image": "yoga-mat.jpg",
"price": 20,
"category": "Fitness",
"quantity": 15,
"inventoryStatus": "INSTOCK",
"rating": 5
},
{
"id": "1029",
"code": "gwuby345v",
"name": "Yoga Set",
"description": "Product Description",
"image": "yoga-set.jpg",
"price": 20,
"category": "Fitness",
"quantity": 25,
"inventoryStatus": "INSTOCK",
"rating": 8
}
]
}

BIN
public/demo/images/product/bamboo-watch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
public/demo/images/product/black-watch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
public/demo/images/product/blue-band.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/demo/images/product/blue-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
public/demo/images/product/bracelet.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/demo/images/product/brown-purse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/demo/images/product/chakra-bracelet.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/demo/images/product/galaxy-earrings.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/demo/images/product/game-controller.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/demo/images/product/gaming-set.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/demo/images/product/gold-phone-case.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
public/demo/images/product/green-earbuds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
public/demo/images/product/green-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/demo/images/product/grey-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
public/demo/images/product/headphones.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
public/demo/images/product/light-green-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
public/demo/images/product/lime-band.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/demo/images/product/mini-speakers.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/demo/images/product/painted-phone-case.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
public/demo/images/product/pink-band.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/demo/images/product/pink-purse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/demo/images/product/purple-band.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/demo/images/product/purple-gemstone-necklace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/demo/images/product/purple-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
public/demo/images/product/shoes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/demo/images/product/sneakers.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
public/demo/images/product/teal-t-shirt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
public/demo/images/product/yellow-earbuds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
public/demo/images/product/yoga-mat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
public/demo/images/product/yoga-set.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

12
src/service/ProductService.js Normal file
View File

@ -0,0 +1,12 @@
import axios from 'axios';
export default class ProductService {
getProductsSmall() {
return axios.get('demo/data/products-small.json').then(res => res.data.data);
}
getProducts() {
return axios.get('demo/data/products.json').then(res => res.data.data);
}
}

41
src/views/datatable/DataTableBasicDemo.vue
View File

@ -9,11 +9,11 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<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 :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</div>
@ -23,30 +23,30 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&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 :value="products"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&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);
}
}
</CodeHighlight>
@ -57,19 +57,20 @@ 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);
}
}
</script>

78
src/views/datatable/DataTableColGroupDemo.vue
View File

@ -12,7 +12,7 @@
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
<Column header="Brand" :rowspan="3" />
<Column header="Product" :rowspan="3" />
<Column header="Sale Rate" :colspan="4" />
</Row>
<Row>
@ -26,7 +26,7 @@
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
</Row>
</ColumnGroup>
<Column field="brand" />
<Column field="product" />
<Column field="lastYearSale">
<template #body="slotProps">
{{slotProps.data.lastYearSale}}%
@ -39,12 +39,12 @@
</Column>
<Column field="lastYearProfit">
<template #body="slotProps">
${{slotProps.data.lastYearProfit.toLocaleString()}}
{{formatCurrency(slotProps.data.lastYearProfit)}}
</template>
</Column>
<Column field="thisYearProfit">
<template #body="slotProps">
${{slotProps.data.thisYearProfit.toLocaleString()}}
{{formatCurrency(slotProps.data.thisYearProfit)}}
</template>
</Column>
<ColumnGroup type="footer">
@ -66,7 +66,7 @@
&lt;DataTable :value="sales"&gt;
&lt;ColumnGroup type="header"&gt;
&lt;Row&gt;
&lt;Column header="Brand" :rowspan="3" /&gt;
&lt;Column header="Product" :rowspan="3" /&gt;
&lt;Column header="Sale Rate" :colspan="4" /&gt;
&lt;/Row&gt;
&lt;Row&gt;
@ -80,25 +80,25 @@
&lt;Column header="This Year" :sortable="true" field="thisYearProfit"/&gt;
&lt;/Row&gt;
&lt;/ColumnGroup&gt;
&lt;Column field="brand" /&gt;
&lt;Column field="product" /&gt;
&lt;Column field="lastYearSale"&gt;
&lt;template #body="slotProps"&gt;
&#123;&#123;slotProps.data.lastYearSale&#125;&#125;%
{{slotProps.data.lastYearSale}}%
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="thisYearSale"&gt;
&lt;template #body="slotProps"&gt;
&#123;&#123;slotProps.data.thisYearSale&#125;&#125;%
{{slotProps.data.thisYearSale}}%
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="lastYearProfit"&gt;
&lt;template #body="slotProps"&gt;
$&#123;&#123;slotProps.data.lastYearProfit.toLocaleString()&#125;&#125;
{{formatCurrency(slotProps.data.lastYearProfit)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="thisYearProfit"&gt;
&lt;template #body="slotProps"&gt;
$&#123;&#123;slotProps.data.thisYearProfit.toLocaleString()&#125;&#125;
{{formatCurrency(slotProps.data.thisYearProfit)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;ColumnGroup type="footer"&gt;
@ -122,18 +122,23 @@ export default {
carService: null,
created() {
this.sales = [
{brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
{brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
{brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
{brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
{brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
{brand: 'LG', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
{brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
{brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
{brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
{brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
{product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
{product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
{product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
{product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
{product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
{product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
{product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
];
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
},
computed: {
lastYearTotal() {
let total = 0;
@ -141,7 +146,7 @@ export default {
total += sale.lastYearProfit;
}
return '$' + total.toLocaleString();
return this.formatCurrency(total);
},
thisYearTotal() {
let total = 0;
@ -149,7 +154,7 @@ export default {
total += sale.thisYearProfit;
}
return '$' + total.toLocaleString();
return this.formatCurrency(total);
}
}
}
@ -170,18 +175,23 @@ export default {
carService: null,
created() {
this.sales = [
{brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
{brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
{brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
{brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
{brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
{brand: 'LG', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
{brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
{brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
{brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
{brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
{product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
{product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
{product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
{product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
{product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
{product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
{product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
];
},
methods: {
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
},
computed: {
lastYearTotal() {
let total = 0;
@ -189,7 +199,7 @@ export default {
total += sale.lastYearProfit;
}
return '$' + total.toLocaleString();
return this.formatCurrency(total);
},
thisYearTotal() {
let total = 0;
@ -197,7 +207,7 @@ export default {
total += sale.thisYearProfit;
}
return '$' + total.toLocaleString();
return this.formatCurrency(total);
}
}
}

40
src/views/datatable/DataTableDynamicColumnsDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<DataTable :value="products">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
@ -20,35 +20,35 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&gt;
&lt;DataTable :value="products"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
columns: null,
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
{field: 'code', header: 'Code'},
{field: 'name', header: 'Name'},
{field: 'category', header: 'Category'},
{field: 'quantity', header: 'Quantity'}
];
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
}
}
</CodeHighlight>
@ -59,28 +59,28 @@ export default {
</template>
<script>
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
columns: null,
cars: null
products: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
{field: 'code', header: 'Code'},
{field: 'name', header: 'Name'},
{field: 'category', header: 'Category'},
{field: 'quantity', header: 'Quantity'}
];
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
}
}
</script>

49
src/views/datatable/DataTableGridLinesDemo.vue
View File

@ -3,20 +3,20 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>GridLines</span></h1>
<p>Adding <i>p-datatable-gridlines</i> displays borders between cells. Note: Some themes may always displays gridlines by design.</p>
<p>Adding <b>p-datatable-gridlines</b> displays borders between cells. Note: Some themes may always displays gridlines by design.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-gridlines">
<DataTable :value="products" class="p-datatable-gridlines">
<template #header>
Header
</template>
<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 field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
<template #footer>
Footer
</template>
@ -29,30 +29,36 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&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 :value="products" class="p-datatable-gridlines"&gt;
&lt;template #header&gt;
Header
&lt;/template&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;template #footer&gt;
Footer
&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);
}
}
</CodeHighlight>
@ -63,19 +69,20 @@ 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);
}
}
</script>

54
src/views/datatable/DataTablePaginatorDemo.vue
View File

@ -9,16 +9,19 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :paginator="true" :rows="10">
<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 :value="customers" :paginator="true" :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10,20,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="company" header="Company"></Column>
<Column field="representative.name" header="Representative"></Column>
<template #paginatorLeft>
<Button type="button" icon="pi pi-refresh" />
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
</template>
<template #paginatorRight>
<Button type="button" icon="pi pi-cloud" />
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
</template>
</DataTable>
</div>
@ -29,36 +32,39 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" :paginator="true" :rows="10"&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 :value="customers" :paginator="true" :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10,20,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;template #paginatorLeft&gt;
&lt;Button type="button" icon="pi pi-refresh" /&gt;
&lt;Button type="button" icon="pi pi-refresh" class="p-button-text" /&gt;
&lt;/template&gt;
&lt;template #paginatorRight&gt;
&lt;Button type="button" icon="pi pi-cloud" /&gt;
&lt;Button type="button" icon="pi pi-cloud" class="p-button-text" /&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
import CustomerService from '../../service/CustomerService';
export default {
data() {
return {
cars: null
customers: null
}
},
carService: null,
customerService: null,
created() {
this.carService = new CarService();
this.customerService = new CustomerService();
},
mounted() {
this.carService.getCarsLarge().then(data => this.cars = data);
this.customerService.getCustomersLarge().then(data => this.customers = data);
}
}
</CodeHighlight>
@ -69,20 +75,20 @@ export default {
</template>
<script>
import CarService from '../../service/CarService';
import CustomerService from '../../service/CustomerService';
export default {
data() {
return {
cars: null
customers: null
}
},
carService: null,
customerService: null,
created() {
this.carService = new CarService();
this.customerService = new CustomerService();
},
mounted() {
this.carService.getCarsLarge().then(data => this.cars = data);
this.customerService.getCustomersLarge().then(data => this.customers = data);
}
}
</script>

82
src/views/datatable/DataTableSizeDemo.vue
View File

@ -3,44 +3,44 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable <span>Size</span></h1>
<p>In addition to a regular table, a smaller and a larger alternatives available.</p>
<p>In addition to a regular table, alternatives with alternative sizes are available.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
<DataTable :value="products" class="p-datatable-sm">
<template #header>
Small Table
</template>
<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 field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<DataTable :value="cars" style="margin-bottom: 2rem">
<DataTable :value="products">
<template #header>
Normal Table
</template>
<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 field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<DataTable :value="cars" class="p-datatable-lg">
<DataTable :value="products" class="p-datatable-lg">
<template #header>
Large Table
</template>
<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 field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</div>
@ -50,53 +50,53 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem"&gt;
&lt;DataTable :value="products" class="p-datatable-sm"&gt;
&lt;template #header&gt;
Small Table
&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&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;DataTable :value="cars" style="margin-bottom: 2rem"&gt;
&lt;DataTable :value="products"&gt;
&lt;template #header&gt;
Normal Table
&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&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;DataTable :value="cars" class="p-datatable-lg"&gt;
&lt;DataTable :value="products" class="p-datatable-lg"&gt;
&lt;template #header&gt;
Large Table
&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&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&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);
}
}
</CodeHighlight>
@ -107,20 +107,20 @@ 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);
}
}
</script>

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

@ -10,41 +10,62 @@
<div class="content-section implementation">
<div class="card">
<h5>Single Column</h5>
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<DataTable :value="products">
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column field="category" header="Category" sortable></Column>
<Column field="quantity" header="Quantity" sortable></Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Multiple Columns</h5>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<p>Use metakey to add a column to the sort selection.</p>
<DataTable :value="products" sortMode="multiple">
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column field="category" header="Category" sortable></Column>
<Column field="quantity" header="Quantity" sortable></Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Presort</h5>
<DataTable :value="cars" sortField="year" :sortOrder="-1">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<DataTable :value="products" sortField="category" :sortOrder="-1">
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column field="category" header="Category" sortable></Column>
<Column field="quantity" header="Quantity" sortable></Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Removable Sort</h5>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
<DataTable :value="products" removableSort>
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column field="category" header="Category" sortable></Column>
<Column field="quantity" header="Quantity" sortable></Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</div>
</div>
@ -54,55 +75,89 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h5&gt;Single Column&lt;/h3&gt;
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Single Column&lt;/h5&gt;
&lt;DataTable :value="products"&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Multiple Columns&lt;/h3&gt;
&lt;DataTable :value="cars" sortMode="multiple"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Multiple Columns&lt;/h5&gt;
&lt;p&gt;Use metakey to add a column to the sort selection.&lt;/p&gt;
&lt;DataTable :value="products" sortMode="multiple"&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Presort&lt;/h3&gt;
&lt;DataTable :value="cars" sortField="year" :sortOrder="-1"&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Presort&lt;/h5&gt;
&lt;DataTable :value="products" sortField="category" :sortOrder="-1"&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Removable Sort&lt;/h3&gt;
&lt;DataTable :value="cars" removableSort&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Removable Sort&lt;/h5&gt;
&lt;DataTable :value="products" removableSort&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&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>
@ -113,20 +168,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>

47
src/views/datatable/DataTableStripedDemo.vue
View File

@ -9,17 +9,11 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-striped">
<template #header>
Header
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #footer>
Footer
</template>
<DataTable :value="products" class="p-datatable-striped">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</div>
@ -29,30 +23,30 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&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 :value="products" class="p-datatable-striped"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&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);
}
}
</CodeHighlight>
@ -63,19 +57,20 @@ 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);
}
}
</script>