Fixed #244 - Loading template for DataTable

src/components/datatable/DataTable.vue

@@ -30,7 +30,7 @@
                 <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
+                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"

src/components/datatable/TableBody.vue

@@ -36,7 +36,8 @@
         </template>
         <tr v-else class="p-datatable-emptymessage">
             <td :colspan="columns.length">
-                <DTEmptySlotTemplate :template="templates.empty" v-if="templates.empty"/>
+                <DTSlotTemplate :template="templates.empty" v-if="templates.empty && !loading"/>
+                <DTSlotTemplate :template="templates.loading" v-if="templates.loading && loading"/>
             </td>
         </tr>
     </tbody>
@@ -75,7 +76,7 @@ const RowExpansionTemplate = {
     }
 }
 
-const EmptySlotTemplate = {
+const SlotTemplate = {
     functional: true,
     props: {
         template: {
@@ -175,6 +176,10 @@ export default {
             type: null,
             default: null
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
         templates: {
             type: null,
             default: null
@@ -435,7 +440,7 @@ export default {
     components: {
         'DTBodyCell': BodyCell,
         'DTRowExpansionTemplate': RowExpansionTemplate,
-        'DTEmptySlotTemplate': EmptySlotTemplate
+        'DTSlotTemplate': SlotTemplate
     }
 }
 </script>

src/views/datatable/DataTableDemo.vue

@@ -13,7 +13,7 @@
             <div class="p-card">
                 <div class="p-card-body" style="padding:0">
                     <DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
-                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
+                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
                         <template #header>
@@ -25,6 +25,9 @@
                         <template #empty>
                             No customers found.
                         </template>
+                        <template #loading>
+                            Loading customers data. Please wait.
+                        </template>
                         <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                         <Column field="name" header="Name" :sortable="true">
                             <template #body="slotProps">
@@ -115,6 +118,7 @@ export default {
             customers: null,
             selectedCustomers: null,
             filters: {},
+            loading: true,
             representatives: [
                 {name: "Amy Elsner", image: 'amyelsner.png'},
                 {name: "Anna Fali", image: 'annafali.png'},
@@ -137,6 +141,7 @@ export default {
     },
     mounted() {
         this.customerService.getCustomersLarge().then(data => this.customers = data);
+        this.loading = false;
     },
     methods: {
         filterDate(value, filter) {

src/views/datatable/DataTableDoc.vue

@@ -1476,10 +1476,14 @@ export default {
 </CodeHighlight>
 
                 <h3>Loading</h3>
-                <p>A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property.</p>
+                <p>A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally
+                an option loading template is available to render as the body until the data is loaded.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataTable :value="cars" :loading="loading"&gt;
+     &lt;template #loading&gt;
+        Loading records, please wait...
+    &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;
@@ -2331,7 +2335,7 @@ export default {
 &lt;div class="p-card"&gt;
     &lt;div class="p-card-body" style="padding:0"&gt;
         &lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
-            dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
+            dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
             paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
             &lt;template #header&gt;
@@ -2343,6 +2347,9 @@ export default {
             &lt;template #empty&gt;
                 No customers found.
             &lt;/template&gt;
+            &lt;template #loading&gt;
+                Loading customers data. Please wait.
+            &lt;/template&gt;
             &lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
             &lt;Column field="name" header="Name" :sortable="true"&gt;
                 &lt;template #body="slotProps"&gt;
@@ -2427,6 +2434,7 @@ export default {
             customers: null,
             selectedCustomers: null,
             filters: {},
+            loading: true,
             representatives: [
                 {name: "Amy Elsner", image: 'amyelsner.png'},
                 {name: "Anna Fali", image: 'annafali.png'},
@@ -2448,7 +2456,10 @@ export default {
         this.customerService = new CustomerService();
     },
     mounted() {
-        this.customerService.getCustomersLarge().then(data => this.customers = data);
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers = data;
+            this.loading = false;
+        });
     },
     methods: {
         filterDate(value, filter) {