Add some props for hiding search and pagination

Author: jdanino

js/Components/Pagination.vue

@@ -3,6 +3,7 @@
     v-if="hasPagination"
     class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
   >
+      {{ hasPagination}}
     <p v-if="!hasData || pagination.total < 1">
       {{ translations.no_results_found }}
     </p>
@@ -229,7 +230,7 @@ const hasLinks = computed(() => {
 });
 
 const hasPagination = computed(() => {
-    return Object.keys(pagination.value).length > 0;
+    return Object.keys(pagination.value).length > 0 && pagination.value.total > 1;
 });
 
 const pagination = computed(() => {

js/Components/Table.vue

@@ -20,16 +20,14 @@
             :on-filter-change="changeFilterValue"
           >
             <TableFilter
-
+              v-if="hasData"
               :has-enabled-filters="queryBuilderProps.hasEnabledFilters"
               :filters="queryBuilderProps.filters"
               :on-filter-change="changeFilterValue"
             />
           </slot>
         </div>
-
         <div
-          v-if="queryBuilderProps.globalSearch"
           class="flex flex-row order-1 w-full mb-2 sm:w-auto sm:flex-grow sm:order-2 sm:mb-0 "
         >
           <slot
@@ -40,7 +38,7 @@
             :on-change="changeGlobalSearchValue"
           >
             <TableGlobalSearch
-              v-if="queryBuilderProps.globalSearch"
+              v-if="showGlobalSearch && queryBuilderProps.globalSearch && hasData"
               class="flex-grow"
               :label="queryBuilderProps.globalSearch.label"
               :value="queryBuilderProps.globalSearch.value"
@@ -71,7 +69,7 @@
           :on-add="showSearchInput"
         >
           <TableAddSearchRow
-            v-if="queryBuilderProps.hasSearchInputs"
+            v-if="showGlobalSearch && queryBuilderProps.hasSearchInputs && hasData"
             class="order-3 sm:order-4"
             :search-inputs="queryBuilderProps.searchInputsWithoutGlobal"
             :has-search-inputs-without-value="queryBuilderProps.hasSearchInputsWithoutValue"
@@ -173,6 +171,15 @@
                     </td>
                   </tr>
                 </slot>
+
+                <tr v-if="!hasData">
+                  <td
+                    class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap text-center"
+                    :colspan="100"
+                  >
+                    Geen resultaten gevonden.
+                  </td>
+                </tr>
               </tbody>
             </table>
           </slot>
@@ -295,6 +302,12 @@ const props = defineProps({
                 focusBorder: "focus:border-indigo-500"
             };
         }
+    },
+
+    showGlobalSearch: {
+        type: [Boolean, String],
+        default: true,
+        required: false,
     }
 });
 

js/Components/TableFilter.vue

@@ -27,7 +27,7 @@
       role="menu"
       aria-orientation="horizontal"
       aria-labelledby="filter-menu"
-      class="min-w-max"
+      class="min-w-[320px]"
     >
       <div
         v-for="(filter, key) in filters"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@jdanino/inertiajs-tables-laravel-query-builder",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Inertia.js Front-end Components for Spatie's Laravel Query Builder",
   "private": false,
   "author": "Pascal Baljet <pascal@protone.media>",