feat: conditionally render table headers based on custom components

Author: SerVitasik

adminforth/modules/restApi.ts

@@ -20,7 +20,6 @@ import { ActionCheckSource, AdminForthConfigMenuItem, AdminForthDataTypes, Admin
    AnnouncementBadgeResponse,
    GetBaseConfigResponse,
    ShowInResolved} from "../types/Common.js";
-import { fa } from "@faker-js/faker";
 
 export async function interpretResource(
   adminUser: AdminUser, 

adminforth/spa/src/components/GroupsTable.vue

@@ -4,7 +4,7 @@
       {{ group.groupName }}
     </div>
     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
+      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-gray-700 uppercase dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group ">
         <tr>
           <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-6 py-3 hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -118,9 +118,15 @@
   }>();
 
   const arrayItemRefs = ref([]);
-
+  
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+  const allColumnsHaveCustomComponent = computed(() => {
+    return props.group.columns.every(column => {
+      const componentKey = `${props.source}Row` as keyof typeof column.components;
+      return column.components?.[componentKey];
+    });
+  });
 
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 

adminforth/spa/src/components/ShowTable.vue

@@ -4,7 +4,7 @@
         {{ groupName }}
         </div>
       <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 table-fixed">
-        <thead class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
+        <thead v-if="!allColumnsHaveCustomComponent"  class="text-gray-700 dark:text-gray-400 bg-lightFormHeading dark:bg-gray-700 block md:table-row-group">
           <tr>
             <th scope="col" class="px-6 py-3 text-xs uppercase hidden md:w-52 md:table-cell">
               {{ $t('Field') }}
@@ -59,7 +59,8 @@
   import ValueRenderer from '@/components/ValueRenderer.vue';
   import { getCustomComponent } from '@/utils';
   import { useCoreStore } from '@/stores/core';
-  defineProps<{ 
+  import { computed } from 'vue';
+  const props = defineProps<{ 
     columns: Array<{
         name: string;
         label: string;
@@ -74,11 +75,17 @@
           };
         };
     }>;
+    source: string;
     groupName?: string | null;
     noTitle?: boolean;
     resource: Record<string, any>;
     record: Record<string, any>;
   }>();
 
   const coreStore = useCoreStore();
+  const allColumnsHaveCustomComponent = computed(() => {
+    return props.columns.every(column => {
+      return column.components?.showRow;
+    });
+  });
   </script>