Tuning for lazy loading

src/components/datatable/DataTable.vue

@@ -847,24 +847,29 @@ export default {
             return [];
         },
         processedData() {
-            if (this.value && this.value.length) {
+            if (this.lazy) {
-                let data = this.value;
+                return this.value;
-
-                if (this.sorted) {
-                    if(this.sortMode === 'single')
-                        data = this.sortSingle(data);
-                    else if(this.sortMode === 'multiple')
-                        data = this.sortMultiple(data);
-                }
-
-                if (this.hasFilters) {
-                    data = this.filter(data);
-                }
-
-                return data;
             }
             else {
-                return null;
+                if (this.value && this.value.length) {
+                    let data = this.value;
+
+                    if (this.sorted) {
+                        if(this.sortMode === 'single')
+                            data = this.sortSingle(data);
+                        else if(this.sortMode === 'multiple')
+                            data = this.sortMultiple(data);
+                    }
+
+                    if (this.hasFilters) {
+                        data = this.filter(data);
+                    }
+
+                    return data;
+                }
+                else {
+                    return null;
+                }
             }
         },
         dataToRender() {
@@ -888,7 +893,8 @@ export default {
             }
         },
         empty() {
-            return (!this.value || this.value.length === 0);
+            const data = this.processedData;
+            return (!data || data.length === 0);
         },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');

src/views/datatable/DataTableDoc.vue

@@ -318,7 +318,7 @@ export default {
                 <p>Lazy loading is implemented by handling pagination, sorting and filtering using their own page, sort and filter events in addition to enabling lazy property. Here is a sample paging implementation with in memory data.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :lazy="true" paginator="true" :rows="10" 
+&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;

src/views/datatable/DataTableFilterDemo.vue

@@ -44,6 +44,9 @@
                         <MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
                     </template>
                 </Column>
+                <template #empty>
+                    No records found.
+                </template>
             </DataTable>
 		</div>
 
@@ -86,6 +89,9 @@
             &lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
+    &lt;template #empty&gt;
+        No records found.
+    &lt;/template&gt;
 &lt;/DataTable&gt;
 </template>
 </CodeHighlight>

src/views/datatable/DataTableLazyDemo.vue

@@ -13,7 +13,7 @@
 		</div>
 
 		<div class="content-section implementation">
-			<DataTable :value="cars" :lazy="true" paginator="true" :rows="10" 
+			<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
                 :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
@@ -27,7 +27,7 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :lazy="true" paginator="true" :rows="10" 
+&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10" 
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;