Initiated new table demos
cagataycivici
parent
437f979b78
commit
01ecb64076
|
|
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,30 +23,30 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -57,19 +57,20 @@ 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<DataTable :value="sales">
|
<DataTable :value="sales">
|
||||||
<ColumnGroup type="header">
|
<ColumnGroup type="header">
|
||||||
<Row>
|
<Row>
|
||||||
<Column header="Brand" :rowspan="3" />
|
<Column header="Product" :rowspan="3" />
|
||||||
<Column header="Sale Rate" :colspan="4" />
|
<Column header="Sale Rate" :colspan="4" />
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
||||||
</Row>
|
</Row>
|
||||||
</ColumnGroup>
|
</ColumnGroup>
|
||||||
<Column field="brand" />
|
<Column field="product" />
|
||||||
<Column field="lastYearSale">
|
<Column field="lastYearSale">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
{{slotProps.data.lastYearSale}}%
|
{{slotProps.data.lastYearSale}}%
|
||||||
|
|
@ -39,12 +39,12 @@
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="lastYearProfit">
|
<Column field="lastYearProfit">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
${{slotProps.data.lastYearProfit.toLocaleString()}}
|
{{formatCurrency(slotProps.data.lastYearProfit)}}
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="thisYearProfit">
|
<Column field="thisYearProfit">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
${{slotProps.data.thisYearProfit.toLocaleString()}}
|
{{formatCurrency(slotProps.data.thisYearProfit)}}
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<ColumnGroup type="footer">
|
<ColumnGroup type="footer">
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
<DataTable :value="sales">
|
<DataTable :value="sales">
|
||||||
<ColumnGroup type="header">
|
<ColumnGroup type="header">
|
||||||
<Row>
|
<Row>
|
||||||
<Column header="Brand" :rowspan="3" />
|
<Column header="Product" :rowspan="3" />
|
||||||
<Column header="Sale Rate" :colspan="4" />
|
<Column header="Sale Rate" :colspan="4" />
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
@ -80,25 +80,25 @@
|
||||||
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
<Column header="This Year" :sortable="true" field="thisYearProfit"/>
|
||||||
</Row>
|
</Row>
|
||||||
</ColumnGroup>
|
</ColumnGroup>
|
||||||
<Column field="brand" />
|
<Column field="product" />
|
||||||
<Column field="lastYearSale">
|
<Column field="lastYearSale">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
{{slotProps.data.lastYearSale}}%
|
{{slotProps.data.lastYearSale}}%
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="thisYearSale">
|
<Column field="thisYearSale">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
{{slotProps.data.thisYearSale}}%
|
{{slotProps.data.thisYearSale}}%
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="lastYearProfit">
|
<Column field="lastYearProfit">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
${{slotProps.data.lastYearProfit.toLocaleString()}}
|
{{formatCurrency(slotProps.data.lastYearProfit)}}
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="thisYearProfit">
|
<Column field="thisYearProfit">
|
||||||
<template #body="slotProps">
|
<template #body="slotProps">
|
||||||
${{slotProps.data.thisYearProfit.toLocaleString()}}
|
{{formatCurrency(slotProps.data.thisYearProfit)}}
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<ColumnGroup type="footer">
|
<ColumnGroup type="footer">
|
||||||
|
|
@ -122,18 +122,23 @@ export default {
|
||||||
carService: null,
|
carService: null,
|
||||||
created() {
|
created() {
|
||||||
this.sales = [
|
this.sales = [
|
||||||
{brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||||
{brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
||||||
{brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
|
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
|
||||||
{brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
|
{product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
|
||||||
{brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
|
{product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
|
||||||
{brand: 'LG', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
|
{product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
|
||||||
{brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
|
{product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
|
||||||
{brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
|
{product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
|
||||||
{brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
|
{product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
|
||||||
{brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
|
{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: {
|
computed: {
|
||||||
lastYearTotal() {
|
lastYearTotal() {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
|
|
@ -141,7 +146,7 @@ export default {
|
||||||
total += sale.lastYearProfit;
|
total += sale.lastYearProfit;
|
||||||
}
|
}
|
||||||
|
|
||||||
return '$' + total.toLocaleString();
|
return this.formatCurrency(total);
|
||||||
},
|
},
|
||||||
thisYearTotal() {
|
thisYearTotal() {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
|
|
@ -149,7 +154,7 @@ export default {
|
||||||
total += sale.thisYearProfit;
|
total += sale.thisYearProfit;
|
||||||
}
|
}
|
||||||
|
|
||||||
return '$' + total.toLocaleString();
|
return this.formatCurrency(total);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -170,18 +175,23 @@ export default {
|
||||||
carService: null,
|
carService: null,
|
||||||
created() {
|
created() {
|
||||||
this.sales = [
|
this.sales = [
|
||||||
{brand: 'Apple', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
{product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
|
||||||
{brand: 'Samsung', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
{product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
|
||||||
{brand: 'Microsoft', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
|
{product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
|
||||||
{brand: 'Philips', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
|
{product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
|
||||||
{brand: 'Song', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
|
{product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
|
||||||
{brand: 'LG', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
|
{product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005},
|
||||||
{brand: 'Sharp', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
|
{product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
|
||||||
{brand: 'Panasonic', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
|
{product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
|
||||||
{brand: 'HTC', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
|
{product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
|
||||||
{brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
|
{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: {
|
computed: {
|
||||||
lastYearTotal() {
|
lastYearTotal() {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
|
|
@ -189,7 +199,7 @@ export default {
|
||||||
total += sale.lastYearProfit;
|
total += sale.lastYearProfit;
|
||||||
}
|
}
|
||||||
|
|
||||||
return '$' + total.toLocaleString();
|
return this.formatCurrency(total);
|
||||||
},
|
},
|
||||||
thisYearTotal() {
|
thisYearTotal() {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
|
|
@ -197,7 +207,7 @@ export default {
|
||||||
total += sale.thisYearProfit;
|
total += sale.thisYearProfit;
|
||||||
}
|
}
|
||||||
|
|
||||||
return '$' + total.toLocaleString();
|
return this.formatCurrency(total);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<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>
|
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,35 +20,35 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<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>
|
||||||
</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 {
|
||||||
columns: null,
|
columns: null,
|
||||||
cars: null
|
products: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
|
|
||||||
this.columns = [
|
this.columns = [
|
||||||
{field: 'vin', header: 'Vin'},
|
{field: 'code', header: 'Code'},
|
||||||
{field: 'year', header: 'Year'},
|
{field: 'name', header: 'Name'},
|
||||||
{field: 'brand', header: 'Brand'},
|
{field: 'category', header: 'Category'},
|
||||||
{field: 'color', header: 'Color'}
|
{field: 'quantity', header: 'Quantity'}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsSmall().then(data => this.products = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -59,28 +59,28 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CarService from '../../service/CarService';
|
import ProductService from '../../service/ProductService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
columns: null,
|
columns: null,
|
||||||
cars: null
|
products: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
|
|
||||||
this.columns = [
|
this.columns = [
|
||||||
{field: 'vin', header: 'Vin'},
|
{field: 'code', header: 'Code'},
|
||||||
{field: 'year', header: 'Year'},
|
{field: 'name', header: 'Name'},
|
||||||
{field: 'brand', header: 'Brand'},
|
{field: 'category', header: 'Category'},
|
||||||
{field: 'color', header: 'Color'}
|
{field: 'quantity', header: 'Quantity'}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsSmall().then(data => this.products = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -3,20 +3,20 @@
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>DataTable <span>GridLines</span></h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" class="p-datatable-gridlines">
|
<DataTable :value="products" class="p-datatable-gridlines">
|
||||||
<template #header>
|
<template #header>
|
||||||
Header
|
Header
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
Footer
|
Footer
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -29,30 +29,36 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products" class="p-datatable-gridlines">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<template #header>
|
||||||
<Column field="year" header="Year"></Column>
|
Header
|
||||||
<Column field="brand" header="Brand"></Column>
|
</template>
|
||||||
<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>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -63,19 +69,20 @@ 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -9,16 +9,19 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" :paginator="true" :rows="10">
|
<DataTable :value="customers" :paginator="true" :rows="10"
|
||||||
<Column field="vin" header="Vin"></Column>
|
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
|
||||||
<Column field="year" header="Year"></Column>
|
:rowsPerPageOptions="[10,20,50]"
|
||||||
<Column field="brand" header="Brand"></Column>
|
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}">
|
||||||
<Column field="color" header="Color"></Column>
|
<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>
|
<template #paginatorLeft>
|
||||||
<Button type="button" icon="pi pi-refresh" />
|
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
|
||||||
</template>
|
</template>
|
||||||
<template #paginatorRight>
|
<template #paginatorRight>
|
||||||
<Button type="button" icon="pi pi-cloud" />
|
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
|
||||||
</template>
|
</template>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,36 +32,39 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars" :paginator="true" :rows="10">
|
<DataTable :value="customers" :paginator="true" :rows="10"
|
||||||
<Column field="vin" header="Vin"></Column>
|
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
|
||||||
<Column field="year" header="Year"></Column>
|
:rowsPerPageOptions="[10,20,50]"
|
||||||
<Column field="brand" header="Brand"></Column>
|
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}">
|
||||||
<Column field="color" header="Color"></Column>
|
<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>
|
<template #paginatorLeft>
|
||||||
<Button type="button" icon="pi pi-refresh" />
|
<Button type="button" icon="pi pi-refresh" class="p-button-text" />
|
||||||
</template>
|
</template>
|
||||||
<template #paginatorRight>
|
<template #paginatorRight>
|
||||||
<Button type="button" icon="pi pi-cloud" />
|
<Button type="button" icon="pi pi-cloud" class="p-button-text" />
|
||||||
</template>
|
</template>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
import CarService from '../../service/CarService';
|
import CustomerService from '../../service/CustomerService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null
|
customers: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
customerService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.customerService = new CustomerService();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
this.customerService.getCustomersLarge().then(data => this.customers = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -69,20 +75,20 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CarService from '../../service/CarService';
|
import CustomerService from '../../service/CustomerService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null
|
customers: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
customerService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.customerService = new CustomerService();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
this.customerService.getCustomersLarge().then(data => this.customers = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -3,44 +3,44 @@
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>DataTable <span>Size</span></h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
|
<DataTable :value="products" class="p-datatable-sm">
|
||||||
<template #header>
|
<template #header>
|
||||||
Small Table
|
Small Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" style="margin-bottom: 2rem">
|
<DataTable :value="products">
|
||||||
<template #header>
|
<template #header>
|
||||||
Normal Table
|
Normal Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" class="p-datatable-lg">
|
<DataTable :value="products" class="p-datatable-lg">
|
||||||
<template #header>
|
<template #header>
|
||||||
Large Table
|
Large Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -50,53 +50,53 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
|
<DataTable :value="products" class="p-datatable-sm">
|
||||||
<template #header>
|
<template #header>
|
||||||
Small Table
|
Small Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
<DataTable :value="cars" style="margin-bottom: 2rem">
|
<DataTable :value="products">
|
||||||
<template #header>
|
<template #header>
|
||||||
Normal Table
|
Normal Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
<DataTable :value="cars" class="p-datatable-lg">
|
<DataTable :value="products" class="p-datatable-lg">
|
||||||
<template #header>
|
<template #header>
|
||||||
Large Table
|
Large Table
|
||||||
</template>
|
</template>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -107,20 +107,20 @@ 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -10,41 +10,62 @@
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Single Column</h5>
|
<h5>Single Column</h5>
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products">
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="category" header="Category" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></Column>
|
<Column field="quantity" header="Quantity" sortable></Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Multiple Columns</h5>
|
<h5>Multiple Columns</h5>
|
||||||
<DataTable :value="cars" sortMode="multiple">
|
<p>Use metakey to add a column to the sort selection.</p>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<DataTable :value="products" sortMode="multiple">
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></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>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Presort</h5>
|
<h5>Presort</h5>
|
||||||
<DataTable :value="cars" sortField="year" :sortOrder="-1">
|
<DataTable :value="products" sortField="category" :sortOrder="-1">
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="category" header="Category" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></Column>
|
<Column field="quantity" header="Quantity" sortable></Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Removable Sort</h5>
|
<h5>Removable Sort</h5>
|
||||||
<DataTable :value="cars" removableSort>
|
<DataTable :value="products" removableSort>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="category" header="Category" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></Column>
|
<Column field="quantity" header="Quantity" sortable></Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,55 +75,89 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<h5>Single Column</h3>
|
<div class="card">
|
||||||
<DataTable :value="cars">
|
<h5>Single Column</h5>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<DataTable :value="products">
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></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>
|
</DataTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Multiple Columns</h3>
|
<div class="card">
|
||||||
<DataTable :value="cars" sortMode="multiple">
|
<h5>Multiple Columns</h5>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<p>Use metakey to add a column to the sort selection.</p>
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<DataTable :value="products" sortMode="multiple">
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></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>
|
</DataTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Presort</h3>
|
<div class="card">
|
||||||
<DataTable :value="cars" sortField="year" :sortOrder="-1">
|
<h5>Presort</h5>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<DataTable :value="products" sortField="category" :sortOrder="-1">
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></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>
|
</DataTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Removable Sort</h3>
|
<div class="card">
|
||||||
<DataTable :value="cars" removableSort>
|
<h5>Removable Sort</h5>
|
||||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
<DataTable :value="products" removableSort>
|
||||||
<Column field="year" header="Year" :sortable="true"></Column>
|
<Column field="code" header="Code" sortable></Column>
|
||||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="color" header="Color" :sortable="true"></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>
|
</DataTable>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
|
@ -113,20 +168,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>
|
||||||
|
|
@ -9,17 +9,11 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" class="p-datatable-striped">
|
<DataTable :value="products" class="p-datatable-striped">
|
||||||
<template #header>
|
<Column field="code" header="Code"></Column>
|
||||||
Header
|
<Column field="name" header="Name"></Column>
|
||||||
</template>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
|
||||||
<Column field="brand" header="Brand"></Column>
|
|
||||||
<Column field="color" header="Color"></Column>
|
|
||||||
<template #footer>
|
|
||||||
Footer
|
|
||||||
</template>
|
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,30 +23,30 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars">
|
<DataTable :value="products" class="p-datatable-striped">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="code" header="Code"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="name" header="Name"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="category" header="Category"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="quantity" header="Quantity"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -63,19 +57,20 @@ 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue