@eventcatalog/core 2.62.1 → 2.64.0

package/eventcatalog/src/components/Tables/columns/ContainersTableColumns.tsx

@@ -6,13 +6,13 @@ import { DatabaseIcon } from 'lucide-react';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
 import { filterCollectionByName } from '../filters/custom-filters';
-
+import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<TData<'containers'>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Storage</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Storage'}</span>,
     cell: (info) => {
       const containerRaw = info.row.original;
       const color = 'blue';
@@ -44,7 +44,7 @@ export const columns = () => [
   }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
-    header: () => 'Summary',
+    header: () => <span>{tableConfiguration.columns?.summary?.label || 'Summary'}</span>,
     cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
     footer: (info) => info.column.id,
     meta: {
@@ -53,7 +53,8 @@ export const columns = () => [
     },
   }),
   columnHelper.accessor('data.servicesThatWriteToContainer', {
-    header: () => <span>Writes</span>,
+    id: 'writes',
+    header: () => <span>{tableConfiguration.columns?.writes?.label || 'Writes'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'servicesThatWriteToContainer',
@@ -92,7 +93,8 @@ export const columns = () => [
     filterFn: filterCollectionByName('servicesThatWriteToContainer'),
   }),
   columnHelper.accessor('data.servicesThatReadFromContainer', {
-    header: () => <span>Reads</span>,
+    id: 'reads',
+    header: () => <span>{tableConfiguration.columns?.reads?.label || 'Reads'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'servicesThatReadFromContainer',
@@ -130,9 +132,9 @@ export const columns = () => [
     footer: (info) => info.column.id,
     filterFn: filterCollectionByName('servicesThatReadFromContainer'),
   }),
-  createBadgesColumn(columnHelper),
+  createBadgesColumn(columnHelper, tableConfiguration),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const container = info.row.original;
       return (

package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx

@@ -4,13 +4,14 @@ import { filterByName, filterCollectionByName } from '../filters/custom-filters'
 import { buildUrl } from '@utils/url-builder';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
+import type { TableConfiguration } from '@types';
 
 const columnHelper = createColumnHelper<TData<'domains'>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Domain</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Domain'}</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
       const color = 'yellow';
@@ -42,7 +43,7 @@ export const columns = () => [
   }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
-    header: () => 'Summary',
+    header: () => <span>{tableConfiguration.columns?.summary?.label || 'Summary'}</span>,
     cell: (info) => (
       <span className="font-light ">
         {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
@@ -55,6 +56,7 @@ export const columns = () => [
     },
   }),
   columnHelper.accessor('data.services', {
+    id: 'services',
     header: () => <span>Services</span>,
     meta: {
       filterVariant: 'collection',
@@ -94,9 +96,10 @@ export const columns = () => [
     },
     filterFn: filterCollectionByName('services'),
   }),
-  createBadgesColumn(columnHelper),
+  createBadgesColumn(columnHelper, tableConfiguration),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    id: 'actions',
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (
@@ -108,7 +111,6 @@ export const columns = () => [
         </a>
       );
     },
-    id: 'actions',
     meta: {
       showFilter: false,
     },

package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx

@@ -4,13 +4,14 @@ import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
+import type { TableConfiguration } from '@types';
 
 const columnHelper = createColumnHelper<TData<'flows'>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Flow</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Flow'}</span>,
     cell: (info) => {
       const flowRaw = info.row.original;
       const color = 'teal';
@@ -41,7 +42,8 @@ export const columns = () => [
     filterFn: filterByName,
   }),
   columnHelper.accessor('data.version', {
-    header: () => <span>Version</span>,
+    id: 'version',
+    header: () => <span>{tableConfiguration.columns?.version?.label || 'Version'}</span>,
     cell: (info) => {
       const service = info.row.original;
       return (
@@ -52,7 +54,7 @@ export const columns = () => [
   }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
-    header: () => 'Summary',
+    header: () => <span>{tableConfiguration.columns?.summary?.label || 'Summary'}</span>,
     cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
     footer: (info) => info.column.id,
     meta: {
@@ -60,9 +62,10 @@ export const columns = () => [
       className: 'max-w-md',
     },
   }),
-  createBadgesColumn(columnHelper),
+  createBadgesColumn(columnHelper, tableConfiguration),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    id: 'actions',
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (
@@ -74,7 +77,6 @@ export const columns = () => [
         </a>
       );
     },
-    id: 'actions',
     meta: {
       showFilter: false,
     },

package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx

@@ -5,7 +5,7 @@ import { filterByName, filterCollectionByName } from '../filters/custom-filters'
 import { buildUrl } from '@utils/url-builder';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
-import type { CollectionMessageTypes } from '@types';
+import type { CollectionMessageTypes, TableConfiguration } from '@types';
 
 const columnHelper = createColumnHelper<TData<CollectionMessageTypes>>();
 
@@ -23,10 +23,10 @@ export const getColorAndIconForMessageType = (type: string) => {
   }
 };
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Message</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Name'}</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
       const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
@@ -59,7 +59,7 @@ export const columns = () => [
 
   columnHelper.accessor('data.summary', {
     id: 'summary',
-    header: () => 'Summary',
+    header: () => <span>{tableConfiguration.columns?.summary?.label || 'Summary'}</span>,
     cell: (info) => (
       <span className="font-light ">
         {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
@@ -73,7 +73,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.producers', {
-    header: () => <span>Producers</span>,
+    id: 'producers',
+    header: () => <span>{tableConfiguration.columns?.producers?.label || 'Producers'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'producers',
@@ -112,7 +113,8 @@ export const columns = () => [
     filterFn: filterCollectionByName('producers'),
   }),
   columnHelper.accessor('data.consumers', {
-    header: () => <span>Consumers</span>,
+    id: 'consumers',
+    header: () => <span>{tableConfiguration.columns?.consumers?.label || 'Consumers'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'consumers',
@@ -151,9 +153,10 @@ export const columns = () => [
     footer: (info) => info.column.id,
     filterFn: filterCollectionByName('consumers'),
   }),
-  createBadgesColumn(columnHelper),
+  createBadgesColumn(columnHelper, tableConfiguration),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    id: 'actions',
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (
@@ -165,7 +168,6 @@ export const columns = () => [
         </a>
       );
     },
-    id: 'actions',
     meta: {
       showFilter: false,
     },

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -6,13 +6,13 @@ import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
-
+import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<TData<'services'>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Service</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Service'}</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
       const color = 'pink';
@@ -43,7 +43,7 @@ export const columns = () => [
   }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
-    header: () => 'Summary',
+    header: () => <span>{tableConfiguration.columns?.summary?.label || 'Summary'}</span>,
     cell: (info) => (
       <span className="font-light ">
         {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
@@ -56,6 +56,7 @@ export const columns = () => [
     },
   }),
   columnHelper.accessor('data.receives', {
+    id: 'receives',
     header: () => <span>Receives</span>,
     meta: {
       filterVariant: 'collection',
@@ -117,6 +118,7 @@ export const columns = () => [
     filterFn: filterCollectionByName('receives'),
   }),
   columnHelper.accessor('data.sends', {
+    id: 'sends',
     header: () => <span>Sends</span>,
     meta: {
       filterVariant: 'collection',
@@ -177,9 +179,10 @@ export const columns = () => [
     },
     filterFn: filterCollectionByName('sends'),
   }),
-  createBadgesColumn(columnHelper),
+  createBadgesColumn(columnHelper, tableConfiguration),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    id: 'actions',
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (
@@ -191,7 +194,6 @@ export const columns = () => [
         </a>
       );
     },
-    id: 'actions',
     meta: {
       showFilter: false,
     },

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -3,13 +3,15 @@ import { Tag } from 'lucide-react';
 import { filterByBadge } from '../filters/custom-filters';
 import type { TCollectionTypes, TData } from '../Table';
 import { getIcon } from '@utils/badges';
+import type { TableConfiguration } from '@types';
 
 export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'badges'> }, U extends TCollectionTypes>(
-  columnHelper: ReturnType<typeof createColumnHelper<T>>
+  columnHelper: ReturnType<typeof createColumnHelper<T>>,
+  tableConfiguration: TableConfiguration
 ) => {
   return columnHelper.accessor((row) => row.data.badges, {
     id: 'badges',
-    header: () => <span>Badges</span>,
+    header: () => <span>{tableConfiguration.columns?.badges?.label || 'Badges'}</span>,
     cell: (info) => {
       const item = info.row.original;
       const badges = item.data.badges || [];

package/eventcatalog/src/components/Tables/columns/TeamsTableColumns.tsx

@@ -7,13 +7,13 @@ import type { TData } from '../Table';
 import type { CollectionUserTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
-
+import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Name</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Name'}</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
       const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
@@ -42,7 +42,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedEvents', {
-    header: () => <span>Owned events</span>,
+    id: 'ownedEvents',
+    header: () => <span>{tableConfiguration.columns?.ownedEvents?.label || 'Owned events'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedEvents',
@@ -94,7 +95,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedCommands', {
-    header: () => <span>Owned commands</span>,
+    id: 'ownedCommands',
+    header: () => <span>{tableConfiguration.columns?.ownedCommands?.label || 'Owned commands'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedCommands',
@@ -148,7 +150,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedQueries', {
-    header: () => <span>Owned queries</span>,
+    id: 'ownedQueries',
+    header: () => <span>{tableConfiguration.columns?.ownedQueries?.label || 'Owned queries'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedQueries',
@@ -202,7 +205,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedServices', {
-    header: () => <span>Owned Services</span>,
+    id: 'ownedServices',
+    header: () => <span>{tableConfiguration.columns?.ownedServices?.label || 'Owned Services'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedServices',
@@ -254,7 +258,7 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (

package/eventcatalog/src/components/Tables/columns/UserTableColumns.tsx

@@ -7,13 +7,13 @@ import type { CollectionUserTypes } from '@types';
 import { User, Users } from 'lucide-react';
 import type { CollectionEntry } from 'astro:content';
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-
+import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
 
-export const columns = () => [
+export const columns = (tableConfiguration: TableConfiguration) => [
   columnHelper.accessor('data.name', {
     id: 'name',
-    header: () => <span>Name</span>,
+    header: () => <span>{tableConfiguration.columns?.name?.label || 'Name'}</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
       const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
@@ -42,7 +42,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedEvents', {
-    header: () => <span>Owned events</span>,
+    id: 'ownedEvents',
+    header: () => <span>{tableConfiguration.columns?.ownedEvents?.label || 'Owned events'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedEvents',
@@ -94,7 +95,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedCommands', {
-    header: () => <span>Owned commands</span>,
+    id: 'ownedCommands',
+    header: () => <span>{tableConfiguration.columns?.ownedCommands?.label || 'Owned commands'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedCommands',
@@ -148,7 +150,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedQueries', {
-    header: () => <span>Owned queries</span>,
+    id: 'ownedQueries',
+    header: () => <span>{tableConfiguration.columns?.ownedQueries?.label || 'Owned queries'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedQueries',
@@ -202,7 +205,8 @@ export const columns = () => [
   }),
 
   columnHelper.accessor('data.ownedServices', {
-    header: () => <span>Owned Services</span>,
+    id: 'ownedServices',
+    header: () => <span>{tableConfiguration.columns?.ownedServices?.label || 'Owned Services'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'ownedServices',
@@ -253,7 +257,8 @@ export const columns = () => [
     filterFn: filterCollectionByName('ownedServices'),
   }),
   columnHelper.accessor('data.associatedTeams', {
-    header: () => <span>Teams</span>,
+    id: 'associatedTeams',
+    header: () => <span>{tableConfiguration.columns?.associatedTeams?.label || 'Teams'}</span>,
     meta: {
       filterVariant: 'collection',
       collectionFilterKey: 'associatedTeams',
@@ -304,7 +309,7 @@ export const columns = () => [
     filterFn: filterCollectionByName('associatedTeams'),
   }),
   columnHelper.accessor('data.name', {
-    header: () => <span />,
+    header: () => <span>{tableConfiguration.columns?.actions?.label || 'Actions'}</span>,
     cell: (info) => {
       const domain = info.row.original;
       return (

package/eventcatalog/src/components/Tables/columns/index.tsx

@@ -5,24 +5,25 @@ import { columns as DomainTableColumns } from './DomainTableColumns';
 import { columns as FlowTableColumns } from './FlowTableColumns';
 import { columns as TeamsTableColumns } from './TeamsTableColumns';
 import { columns as ContainerTableColumns } from './ContainersTableColumns';
-export const getColumnsByCollection = (collection: string): any => {
+import type { TableConfiguration } from '@types';
+export const getColumnsByCollection = (collection: string, tableConfiguration: TableConfiguration): any => {
   switch (collection) {
     case 'events':
     case 'commands':
     case 'queries':
-      return MessageTableColumns();
+      return MessageTableColumns(tableConfiguration);
     case 'services':
-      return ServiceTableColumns();
+      return ServiceTableColumns(tableConfiguration);
     case 'domains':
-      return DomainTableColumns();
+      return DomainTableColumns(tableConfiguration);
     case 'flows':
-      return FlowTableColumns();
+      return FlowTableColumns(tableConfiguration);
     case 'users':
-      return UserTableColumns();
+      return UserTableColumns(tableConfiguration);
     case 'teams':
-      return TeamsTableColumns();
+      return TeamsTableColumns(tableConfiguration);
     case 'containers':
-      return ContainerTableColumns();
+      return ContainerTableColumns(tableConfiguration);
     default:
       return [];
   }

package/eventcatalog/src/content.config.ts

@@ -46,7 +46,7 @@ const channelPointer = z
 
 const resourcePointer = z.object({
   id: z.string(),
-  version: z.union([z.string(), z.number()]).optional().default('latest'),
+  version: z.string().optional().default('latest'),
   type: z.enum(['service', 'event', 'command', 'query', 'flow', 'channel', 'domain', 'user', 'team', 'container']),
 });
 
@@ -79,7 +79,8 @@ const baseSchema = z.object({
   id: z.string(),
   name: z.string(),
   summary: z.string().optional(),
-  version: z.union([z.string(), z.number()]),
+  // version: z.union([z.string(), z.number()]),
+  version: z.string(),
   draft: z.union([z.boolean(), z.object({ title: z.string().optional(), message: z.string() })]).optional(),
   badges: z.array(badge).optional(),
   owners: z.array(ownerReference).optional(),

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -377,6 +377,7 @@ const badges = doc?.badges || [];
       }
 
       if (enableSupportForElkLayout) {
+        // @ts-ignore
         const { default: elkLayouts } = await import('@mermaid-js/layout-elk/dist/mermaid-layout-elk.core.mjs');
         mermaid.registerLayoutLoaders(elkLayouts);
       }

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -1,20 +1,11 @@
 ---
 import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
-import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
-import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
-import { getCommands } from '@utils/commands';
-import { getDomains } from '@utils/collections/domains';
-import { getFlows } from '@utils/collections/flows';
-import { getEvents } from '@utils/events';
-import { getServices } from '@utils/collections/services';
 import { buildUrl } from '@utils/url-builder';
-import { getQueries } from '@utils/queries';
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
-import Checkbox from '@components/Checkbox.astro';
 import { User, Users } from 'lucide-react';
 import { getUsers } from '@utils/users';
 import { getTeams } from '@utils/teams';
+import config from '@config';
 
 const users = await getUsers();
 const teams = await getTeams();
@@ -32,6 +23,9 @@ const currentPath = Astro.url.pathname;
 const checkboxLatestId = 'latest-only';
 const checkboxDraftsId = 'drafts-only';
 
+// @ts-ignore
+const tableConfiguration = config[type as keyof typeof config]?.tableConfiguration ?? { columns: {} };
+
 const tabs = [
   {
     label: `Users (${users.length})`,
@@ -40,6 +34,7 @@ const tabs = [
     icon: User,
     activeColor: 'orange',
     enabled: users.length > 0,
+    visible: users.length > 0,
   },
   {
     label: `Teams (${teams.length})`,
@@ -48,6 +43,7 @@ const tabs = [
     icon: Users,
     activeColor: 'blue',
     enabled: teams.length > 0,
+    visible: teams.length > 0,
   },
 ];
 ---
@@ -59,18 +55,20 @@ const tabs = [
         <div class="border-b border-gray-200">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
             {
-              tabs.map((tab) => (
-                <a
-                  href={tab.href}
-                  class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
-                  aria-current="page"
-                >
-                  <tab.icon
-                    className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
-                  />
-                  <span>{tab.label}</span>
-                </a>
-              ))
+              tabs
+                .filter((tab) => tab.visible)
+                .map((tab) => (
+                  <a
+                    href={tab.href}
+                    class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                    aria-current="page"
+                  >
+                    <tab.icon
+                      className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                    />
+                    <span>{tab.label}</span>
+                  </a>
+                ))
             }
           </nav>
         </div>
@@ -94,6 +92,7 @@ const tabs = [
                 checkboxDraftsId={checkboxDraftsId}
                 data={data}
                 collection={type}
+                tableConfiguration={tableConfiguration}
                 client:load
               />
             </div>