diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index aeceaeb52..de7d73aaf 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -2,23 +2,23 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Export</h1>
+				<h1>DataTable <span>Export</span></h1>
 				<p>DataTable can export its data to CSV format.</p>
 			</div>
 		</div>
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars" ref="dt">
+                <DataTable :value="products" ref="dt">
                     <template #header>
                         <div style="text-align: left">
                             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                         </div>
                     </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>
@@ -28,35 +28,35 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" ref="dt"&gt;
+&lt;DataTable :value="products" ref="dt"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: left"&gt;
             &lt;Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" /&gt;
         &lt;/div&gt;
     &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);
     },
     methods: {
         exportCSV() {
@@ -72,20 +72,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);
     },
     methods: {
         exportCSV() {
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 028c45f04..08441c044 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -9,17 +9,17 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars" :rowClass="rowClass">
-                    <Column field="vin" header="Vin"></Column>
-                    <Column field="year" header="Year" bodyStyle="padding: 0">
+                <DataTable :value="products" :rowClass="rowClass">
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity">
                         <template #body="slotProps">
-                            <div :class="[{'old-car': slotProps.data.year < 2010}]">
-                                {{slotProps.data.year}}
+                            <div :class="stockClass(slotProps.data)">
+                                {{slotProps.data.quantity}}
                             </div>
                         </template>
                     </Column>
-                    <Column field="brand" header="Brand"></Column>
-                    <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
 		</div>
@@ -29,55 +29,72 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :rowClass="rowClass"&gt;
-    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
-    &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
-            &lt;template #body="slotProps"&gt;
-            &lt;div :class="[{'old-car': slotProps.data.year &lt; 2010}]"&gt;
-                &#123;&#123;slotProps.data.year&#125;&#125;
+&lt;DataTable :value="products" :rowClass="rowClass"&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;template #body="slotProps"&gt;
+            &lt;div :class="stockClass(slotProps.data)"&gt;
+                {{slotProps.data.quantity}}
             &lt;/div&gt;
         &lt;/template&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&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();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProductsSmall().then(data => this.products = data);
     },
     methods: {
         rowClass(data) {
-            return data.color === 'Gray' ? 'gray-car': null;
+            return data.category === 'Accessories' ? 'row-accessories': null;
+        },
+        stockClass(data) {
+            return [
+                {'outofstock': data.quantity === 0,
+                 'lowstock': data.quantity > 0 && data.quantity < 10,
+                 'instock': data.quantity > 10}
+            ];
         }
     }
 }
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.old-car {
+.outofstock {
     font-weight: 700;
+    color: #FF5252;
     text-decoration: line-through;
 }
 
-/deep/ .gray-car {
-    background-color: #607D8B !important;
-    color: #ffffff !important;
+.lowstock {
+    font-weight: 700;
+    color: #FFA726;
+}
+
+.instock {
+    font-weight: 700;
+    color: #66BB6A;
+}
+
+/deep/ .row-accessories {
+    background-color: rgba(0,0,0,.15) !important;
+
 }
 </CodeHighlight>
                 </TabPanel>
@@ -87,38 +104,55 @@ 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();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProductsSmall().then(data => this.products = data);
     },
     methods: {
         rowClass(data) {
-            return data.color === 'Gray' ? 'gray-car': null;
+            return data.category === 'Accessories' ? 'row-accessories': null;
+        },
+        stockClass(data) {
+            return [
+                {'outofstock': data.quantity === 0,
+                 'lowstock': data.quantity > 0 && data.quantity < 10,
+                 'instock': data.quantity > 10}
+            ];
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
-.old-car {
+.outofstock {
     font-weight: 700;
+    color: #FF5252;
     text-decoration: line-through;
 }
 
-/deep/ .gray-car {
-    background-color: #607D8B !important;
-    color: #ffffff !important;
+.lowstock {
+    font-weight: 700;
+    color: #FFA726;
+}
+
+.instock {
+    font-weight: 700;
+    color: #66BB6A;
+}
+
+/deep/ .row-accessories {
+    background-color: rgba(0,0,0,.15) !important;
+
 }
 </style>
\ No newline at end of file