diff --git a/public/demo/data/products-small.json b/public/demo/data/products-small.json
new file mode 100644
index 000000000..0daf2ccf2
--- /dev/null
+++ b/public/demo/data/products-small.json
@@ -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
+		}
+	]
+}
\ No newline at end of file
diff --git a/public/demo/data/products.json b/public/demo/data/products.json
new file mode 100644
index 000000000..c3dad4d02
--- /dev/null
+++ b/public/demo/data/products.json
@@ -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
+		}
+	]
+}
diff --git a/public/demo/images/product/bamboo-watch.jpg b/public/demo/images/product/bamboo-watch.jpg
new file mode 100644
index 000000000..dbff9ed44
Binary files /dev/null and b/public/demo/images/product/bamboo-watch.jpg differ
diff --git a/public/demo/images/product/black-watch.jpg b/public/demo/images/product/black-watch.jpg
new file mode 100644
index 000000000..03f8bd44d
Binary files /dev/null and b/public/demo/images/product/black-watch.jpg differ
diff --git a/public/demo/images/product/blue-band.jpg b/public/demo/images/product/blue-band.jpg
new file mode 100644
index 000000000..3b84a9a34
Binary files /dev/null and b/public/demo/images/product/blue-band.jpg differ
diff --git a/public/demo/images/product/blue-t-shirt.jpg b/public/demo/images/product/blue-t-shirt.jpg
new file mode 100644
index 000000000..3287ead69
Binary files /dev/null and b/public/demo/images/product/blue-t-shirt.jpg differ
diff --git a/public/demo/images/product/bracelet.jpg b/public/demo/images/product/bracelet.jpg
new file mode 100644
index 000000000..61776652e
Binary files /dev/null and b/public/demo/images/product/bracelet.jpg differ
diff --git a/public/demo/images/product/brown-purse.jpg b/public/demo/images/product/brown-purse.jpg
new file mode 100644
index 000000000..04115718d
Binary files /dev/null and b/public/demo/images/product/brown-purse.jpg differ
diff --git a/public/demo/images/product/chakra-bracelet.jpg b/public/demo/images/product/chakra-bracelet.jpg
new file mode 100644
index 000000000..29f4771b2
Binary files /dev/null and b/public/demo/images/product/chakra-bracelet.jpg differ
diff --git a/public/demo/images/product/galaxy-earrings.jpg b/public/demo/images/product/galaxy-earrings.jpg
new file mode 100644
index 000000000..ad0b1b1bb
Binary files /dev/null and b/public/demo/images/product/galaxy-earrings.jpg differ
diff --git a/public/demo/images/product/game-controller.jpg b/public/demo/images/product/game-controller.jpg
new file mode 100644
index 000000000..6d309ee52
Binary files /dev/null and b/public/demo/images/product/game-controller.jpg differ
diff --git a/public/demo/images/product/gaming-set.jpg b/public/demo/images/product/gaming-set.jpg
new file mode 100644
index 000000000..9fdbe6c51
Binary files /dev/null and b/public/demo/images/product/gaming-set.jpg differ
diff --git a/public/demo/images/product/gold-phone-case.jpg b/public/demo/images/product/gold-phone-case.jpg
new file mode 100644
index 000000000..76719685f
Binary files /dev/null and b/public/demo/images/product/gold-phone-case.jpg differ
diff --git a/public/demo/images/product/green-earbuds.jpg b/public/demo/images/product/green-earbuds.jpg
new file mode 100644
index 000000000..781310500
Binary files /dev/null and b/public/demo/images/product/green-earbuds.jpg differ
diff --git a/public/demo/images/product/green-t-shirt.jpg b/public/demo/images/product/green-t-shirt.jpg
new file mode 100644
index 000000000..fdb70a736
Binary files /dev/null and b/public/demo/images/product/green-t-shirt.jpg differ
diff --git a/public/demo/images/product/grey-t-shirt.jpg b/public/demo/images/product/grey-t-shirt.jpg
new file mode 100644
index 000000000..5b6d78ace
Binary files /dev/null and b/public/demo/images/product/grey-t-shirt.jpg differ
diff --git a/public/demo/images/product/headphones.jpg b/public/demo/images/product/headphones.jpg
new file mode 100644
index 000000000..5f9f31dee
Binary files /dev/null and b/public/demo/images/product/headphones.jpg differ
diff --git a/public/demo/images/product/light-green-t-shirt.jpg b/public/demo/images/product/light-green-t-shirt.jpg
new file mode 100644
index 000000000..2fb621979
Binary files /dev/null and b/public/demo/images/product/light-green-t-shirt.jpg differ
diff --git a/public/demo/images/product/lime-band.jpg b/public/demo/images/product/lime-band.jpg
new file mode 100644
index 000000000..5627c6b8b
Binary files /dev/null and b/public/demo/images/product/lime-band.jpg differ
diff --git a/public/demo/images/product/mini-speakers.jpg b/public/demo/images/product/mini-speakers.jpg
new file mode 100644
index 000000000..8883aa24a
Binary files /dev/null and b/public/demo/images/product/mini-speakers.jpg differ
diff --git a/public/demo/images/product/painted-phone-case.jpg b/public/demo/images/product/painted-phone-case.jpg
new file mode 100644
index 000000000..5da5f002d
Binary files /dev/null and b/public/demo/images/product/painted-phone-case.jpg differ
diff --git a/public/demo/images/product/pink-band.jpg b/public/demo/images/product/pink-band.jpg
new file mode 100644
index 000000000..50124ad17
Binary files /dev/null and b/public/demo/images/product/pink-band.jpg differ
diff --git a/public/demo/images/product/pink-purse.jpg b/public/demo/images/product/pink-purse.jpg
new file mode 100644
index 000000000..a5e864fe8
Binary files /dev/null and b/public/demo/images/product/pink-purse.jpg differ
diff --git a/public/demo/images/product/purple-band.jpg b/public/demo/images/product/purple-band.jpg
new file mode 100644
index 000000000..17523fecd
Binary files /dev/null and b/public/demo/images/product/purple-band.jpg differ
diff --git a/public/demo/images/product/purple-gemstone-necklace.jpg b/public/demo/images/product/purple-gemstone-necklace.jpg
new file mode 100644
index 000000000..a40d4b3a5
Binary files /dev/null and b/public/demo/images/product/purple-gemstone-necklace.jpg differ
diff --git a/public/demo/images/product/purple-t-shirt.jpg b/public/demo/images/product/purple-t-shirt.jpg
new file mode 100644
index 000000000..12d75f184
Binary files /dev/null and b/public/demo/images/product/purple-t-shirt.jpg differ
diff --git a/public/demo/images/product/shoes.jpg b/public/demo/images/product/shoes.jpg
new file mode 100644
index 000000000..efc7aca00
Binary files /dev/null and b/public/demo/images/product/shoes.jpg differ
diff --git a/public/demo/images/product/sneakers.jpg b/public/demo/images/product/sneakers.jpg
new file mode 100644
index 000000000..53f66dce9
Binary files /dev/null and b/public/demo/images/product/sneakers.jpg differ
diff --git a/public/demo/images/product/teal-t-shirt.jpg b/public/demo/images/product/teal-t-shirt.jpg
new file mode 100644
index 000000000..749ae9d58
Binary files /dev/null and b/public/demo/images/product/teal-t-shirt.jpg differ
diff --git a/public/demo/images/product/yellow-earbuds.jpg b/public/demo/images/product/yellow-earbuds.jpg
new file mode 100644
index 000000000..1bfc87ab5
Binary files /dev/null and b/public/demo/images/product/yellow-earbuds.jpg differ
diff --git a/public/demo/images/product/yoga-mat.jpg b/public/demo/images/product/yoga-mat.jpg
new file mode 100644
index 000000000..18d956487
Binary files /dev/null and b/public/demo/images/product/yoga-mat.jpg differ
diff --git a/public/demo/images/product/yoga-set.jpg b/public/demo/images/product/yoga-set.jpg
new file mode 100644
index 000000000..734ba5839
Binary files /dev/null and b/public/demo/images/product/yoga-set.jpg differ
diff --git a/src/service/ProductService.js b/src/service/ProductService.js
new file mode 100644
index 000000000..2ae3079b0
--- /dev/null
+++ b/src/service/ProductService.js
@@ -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);
+	}
+}
diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
index 922d5602c..5a68bc8b3 100755
--- a/src/views/datatable/DataTableBasicDemo.vue
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index e865a04a3..c2f70b877 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -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);
         }
     }
 }
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index 6a0f5c7b0..4cf02057a 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index 0f01bfa34..90c96c080 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 98e345e7c..814c5cfa4 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index d97ba3e9d..36f7eacd4 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index e1ec92f2a..eb90b6905 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -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;/DataTable&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;/DataTable&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;/DataTable&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;/DataTable&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>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index ff74c4655..455c3d124 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -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>
\ No newline at end of file