Implemented VirtualScrolling

src/assets/styles/app.scss

@@ -40,6 +40,18 @@
     border-top-right-radius: $val;
 }
 
+@keyframes pulse {
+    0% {
+        background-color: rgba(165, 165, 165, 0.1)
+    }
+    50% {
+        background-color: rgba(165, 165, 165, 0.3)
+    }
+    100% {
+        background-color: rgba(165, 165, 165, 0.1)
+    }
+}
+
 $focusBorderColor:#8dcdff;
 
 body {

src/components/datatable/ScrollableView.vue

@@ -22,6 +22,7 @@
                 <colgroup class="p-datatable-scrollable-colgroup">
                     <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
                 </colgroup>
+                <DTTableLoadingBody :columns="columns" :rows="rows" />
             </table>
             <div class="p-datatable-virtual-scroller" ref="virtualScroller"></div>
         </div>
@@ -40,6 +41,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import TableLoadingBody from './TableLoadingBody';
 
 export default {
     props: {
@@ -231,6 +233,9 @@ export default {
         bodyTableStyle() {
             return this.virtualScroll ? {top: '0'} : null;
         }
+    },
+    components: {
+        'DTTableLoadingBody': TableLoadingBody
     }
 }
 </script>

src/components/datatable/TableLoadingBody.vue

@@ -0,0 +1,29 @@
+<template>
+    <tbody class="p-datatable-tbody">
+        <tr v-for="n in rows" :key="n">
+            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i">
+                <DTColumnSlot :column="col" :index="i" type="loading" />
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script>
+import ColumnSlot from './ColumnSlot';
+
+export default {
+    props: {
+        columns: {
+            type: null,
+            default: null
+        },
+        rows: {
+            type: null,
+            default: null
+        }
+    },
+    components: {
+        'DTColumnSlot': ColumnSlot
+    }
+}
+</script>

src/views/datatable/DataTableScrollDemo.vue

@@ -21,10 +21,26 @@
             <h3>Virtual Scroll</h3>
 			<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20"
                 :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
-                <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="vin" header="Vin">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="year" header="Year">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="color" header="Color">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
             </DataTable>
 
             <h3>Horizontal and Vertical</h3>
@@ -185,3 +201,14 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.loading-text {
+    display: block;
+    background-color: #f1f1f1;
+    min-height: 19px;
+    animation: pulse 1s infinite ease-in-out;
+    text-indent: -99999px;
+    overflow: hidden;
+}
+</style>