Merge pull request #7 from Sreesanth46/feature/loader-and-no-data-mes…

…sage No Data Message and Loader
Sreesanth46 · Jan 6, 2024 · 413ce33 · 413ce33
2 parents 6caf400 + 54d84e6
commit 413ce33
Show file tree

Hide file tree

Showing 6 changed files with 3,320 additions and 3,276 deletions.
diff --git a/README.md b/README.md
@@ -60,37 +60,48 @@ const data = [{
         "status",
         ["createdUser", "user", "name"],
     ];
+    const loading = ref(false);
 
-    {/* getData[0].createdUser.user.name || [ ["createdUser", "user", "name"] ] */}
+    {/* getData[0].createdUser.user.name ==> [ ["createdUser", "user", "name"] ] */}
 
     {/* get data from api || store */}
-    const getData = () => {}
+    const getData = () => {
+      const loading = ref(true);
+      // get data
+    }
 </script>
 
 <template>
-    <VueTable :headers="headers" :keys="keyValue" :data="getData">
-        <template #th>
-            <th> Actions</th>
-        </template>
-        <template #td="{ item }">
-            {/* item will be the object in a row */}
-            <td class="flex">
-                <DeleteIcon @click="deleteItem(item.id)" />
-                <EditIcon @click="edit(item)" />
-            </td>
-        </template>
+    <VueTable
+      :headers="headers"
+      :keys="keyValues"
+      :data="getData"
+      :loading="loading"
+    >
+      <template #th>
+        <th> Actions</th>
+      </template>
+      <template #td="{ item }">
+        {/* item will be the object in a row */}
+        <td class="flex">
+            <DeleteIcon @click="deleteItem(item.id)" />
+            <EditIcon @click="edit(item)" />
+        </td>
+      </template>
     </VueTable>
 <template>
 ```
 
 ### Props - VueTable
 
-| Prop      | Description                            | Default |
-| --------- | -------------------------------------- | ------- |
-| `data`    | Data to be rendered                    | `[]`    |
-| `headers` | Heading of the table                   | `[]`    |
-| `keys`    | Keys of the table data (can be nested) | `[]`    |
-| `dark`    | Dark mode                              | `false` |
+| Prop            | Description                            | Default             |
+| --------------- | -------------------------------------- | ------------------- |
+| `data`          | Data to be rendered                    |                     |
+| `headers`       | Heading of the table                   |                     |
+| `keys`          | Keys of the table data (can be nested) |                     |
+| `dark`          | Dark mode                              | `false`             |
+| `loading`       | Data loading state - show a spinner    | `false`             |
+| `noDataMessage` | Message when there is no data          | `No data available` |
 
 ## VuePaginator
 

diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -27,6 +27,7 @@ const itemsPerPage = 8;
 
 const startOffSet = ref(0);
 const endOffSet = ref(startOffSet.value + itemsPerPage);
+const loading = ref(false);
 
 watch(startOffSet, nOff => {
   endOffSet.value = startOffSet.value + itemsPerPage;
@@ -35,12 +36,16 @@ watch(startOffSet, nOff => {
 const pageCount = Math.ceil(data.length / itemsPerPage);
 
 const currentData = computed(() =>
-  data.slice(startOffSet.value, endOffSet.value)
+  loading.value ? [] : data.slice(startOffSet.value, endOffSet.value)
 );
 
 function onPageChange(pageNumber) {
   const newOffSet = (pageNumber - 1) * itemsPerPage;
-  startOffSet.value = newOffSet;
+  loading.value = true;
+  setTimeout(() => {
+    startOffSet.value = newOffSet;
+    loading.value = false;
+  }, 500);
 }
 </script>
 
@@ -54,7 +59,11 @@ function onPageChange(pageNumber) {
       margin: 0 auto;
       margin-top: 6%;
     ">
-    <VueTable :headers="headers" :keys="keyValues" :data="currentData" />
+    <VueTable
+      :headers="headers"
+      :keys="keyValues"
+      :data="currentData"
+      :loading="loading" />
     <div
       style="
         display: flex;