Show 'no results' warning even if there's no pagination

Author: pascalbaljet

__tests__/Table.spec.js

@@ -1,6 +1,7 @@
 import { mount } from "@vue/test-utils"
 import Table from "../js/Tailwind2/Table.vue";
 import expect from 'expect'
+import TableWithDataWithoutPagination from "./TableWithDataWithoutPagination.vue";
 
 describe('Table.vue', () => {
     it('can enable a search row', () => {
@@ -200,4 +201,35 @@ describe('Table.vue', () => {
             expect(updates).toHaveLength(1);
         });
     });
+
+    it('knows when there are no results and there is no pagination', () => {
+        const component = mount(Table, {
+            propsData: {
+                meta: {},
+            }
+        });
+
+        expect(component.vm.paginationMeta).toEqual({ meta: { total: 0 } });
+    });
+
+    it('knows when there are results while there is no pagination', () => {
+        const component = mount(TableWithDataWithoutPagination, {
+            propsData: {
+                meta: {},
+            }
+        });
+
+        expect(component.html()).toContain("<td></td>");
+        expect(component.html()).not.toContain("No results found");
+    });
+
+    it('uses the meta property for pagination', () => {
+        const component = mount(Table, {
+            propsData: {
+                meta: { meta: { total: 1 } },
+            }
+        });
+
+        expect(component.html()).not.toContain("No results found");
+    });
 })

__tests__/TableWithDataWithoutPagination.vue

@@ -0,0 +1,15 @@
+<template>
+  <Table>
+    <template #body>
+      <tr>
+        <td></td>
+      </tr>
+    </template>
+  </Table>
+</template>
+
+<script>
+import Table from "../js/Tailwind2/Table.vue";
+
+export default { components: { Table } };
+</script>

js/Components/Table.vue

@@ -52,6 +52,10 @@ export default {
       return Object.keys(this.search || {}).length > 0;
     },
 
+    hasBody() {
+      return !!this.$slots.body;
+    },
+
     onlyData() {
       if (this.hasFilters || this.hasColumns || this.hasSearchRows) {
         return false;
@@ -63,6 +67,20 @@ export default {
 
       return this.search.global ? false : true;
     },
+
+    paginationMeta() {
+      if (this.hasBody) {
+        return this.meta;
+      }
+
+      const hasPagination = 'meta' in this.meta || ('total' in this.meta && 'to' in this.meta && 'from' in this.meta);
+
+      if (hasPagination) {
+        return this.meta;
+      }
+
+      return { meta: { total: 0 } };
+    }
   },
 
   data() {

js/Tailwind2/Table.vue

@@ -120,7 +120,7 @@ table >>> tr:hover td {
         </slot>
 
         <slot name="pagination">
-          <Pagination :meta="meta" />
+          <Pagination :meta="paginationMeta" />
         </slot>
       </TableWrapper>
     </slot>