@eventcatalog/core 3.48.4 → 4.0.0-beta.1

package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx

@@ -30,6 +30,7 @@ export type CollectionType =
   | 'services'
   | 'external-systems'
   | 'domains'
+  | 'systems'
   | 'flows'
   | 'containers'
   | 'data-products';
@@ -49,6 +50,9 @@ export interface DiscoverTableData {
   hasDecisionMakers?: boolean;
   hasInputs?: boolean;
   hasOutputs?: boolean;
+  hasServices?: boolean;
+  hasFlows?: boolean;
+  isSubdomain?: boolean;
   data: {
     id: string;
     name: string;
@@ -79,6 +83,7 @@ export interface DiscoverTableData {
     model?: any;
     agents?: Array<any>;
     services?: Array<any>;
+    flows?: Array<any>;
     servicesThatWriteToContainer?: Array<any>;
     servicesThatReadFromContainer?: Array<any>;
     inputs?: Array<any>;
@@ -91,11 +96,19 @@ export interface PropertyOption {
   label: string;
 }
 
+export interface CollectionKindOption {
+  id: CollectionType;
+  label: string;
+  href: string;
+  count: number;
+}
+
 export interface DiscoverTableProps<T extends DiscoverTableData> {
   data: T[];
   collectionType: CollectionType;
   collectionLabel: string;
   collectionDescription?: string;
+  collectionKinds?: CollectionKindOption[];
   domains?: Array<{ id: string; name: string; version: string }>;
   owners?: Array<{ id: string; name: string; type?: 'user' | 'team' }>;
   producers?: Array<{ id: string; name: string }>;
@@ -153,6 +166,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
   collectionType,
   collectionLabel,
   collectionDescription,
+  collectionKinds = [],
   domains = [],
   owners = [],
   producers = [],
@@ -197,6 +211,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
   const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
   const [selectedProperties, setSelectedProperties] = useState<string[]>([]);
   const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
+  const selectedKind = collectionKinds.find((kind) => kind.id === collectionType);
 
   // Collect unique badges from all items
   const allBadges = useMemo(() => {
@@ -341,6 +356,10 @@ export function DiscoverTable<T extends DiscoverTableData>({
             const services = row.data.services || [];
             if (services.length === 0) return false;
           }
+          if (prop === 'hasFlows') {
+            const flows = row.data.flows || [];
+            if (flows.length === 0) return false;
+          }
 
           // Container-specific checks
           if (prop === 'hasWriters') {
@@ -554,6 +573,12 @@ export function DiscoverTable<T extends DiscoverTableData>({
     setSelectedProperties((prev) => (prev.includes(propertyId) ? prev.filter((p) => p !== propertyId) : [...prev, propertyId]));
   };
 
+  const navigateToKind = (kindId: CollectionType) => {
+    const selectedKind = collectionKinds.find((kind) => kind.id === kindId);
+    if (!selectedKind || selectedKind.id === collectionType) return;
+    window.location.href = selectedKind.href;
+  };
+
   const clearAllFilters = () => {
     setSelectedDomains([]);
     setSelectedOwners([]);
@@ -629,6 +654,28 @@ export function DiscoverTable<T extends DiscoverTableData>({
 
         {/* Filter sections */}
         <div className="flex-1 overflow-y-auto px-4 pt-4 pb-4 space-y-6">
+          {collectionKinds.length > 1 && (
+            <div>
+              <label className="block text-xs font-medium text-[rgb(var(--ec-page-text)/0.8)] mb-1.5">Kind</label>
+              <FilterDropdown
+                label="Select kind..."
+                selectedItems={selectedKind ? [selectedKind.label] : []}
+                onClear={() => {}}
+                clearable={false}
+              >
+                {collectionKinds.map((kind) => (
+                  <CheckboxItem
+                    key={kind.id}
+                    label={kind.label}
+                    checked={kind.id === collectionType}
+                    onChange={() => navigateToKind(kind.id)}
+                    count={kind.count}
+                  />
+                ))}
+              </FilterDropdown>
+            </div>
+          )}
+
           {/* Message Filters Section */}
           {(showProducersFilter || showConsumersFilter) && (filteredProducers.length > 0 || filteredConsumers.length > 0) && (
             <div className="space-y-3">

package/eventcatalog/src/components/Tables/Discover/FilterComponents.tsx

@@ -8,10 +8,18 @@ export interface FilterDropdownProps {
   selectedItems: string[];
   onClear: () => void;
   onRemoveItem?: (item: string) => void;
+  clearable?: boolean;
   children: React.ReactNode;
 }
 
-export const FilterDropdown = ({ label, selectedItems, onClear, onRemoveItem, children }: FilterDropdownProps) => {
+export const FilterDropdown = ({
+  label,
+  selectedItems,
+  onClear,
+  onRemoveItem,
+  clearable = true,
+  children,
+}: FilterDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const hasSelection = selectedItems.length > 0;
@@ -88,7 +96,7 @@ export const FilterDropdown = ({ label, selectedItems, onClear, onRemoveItem, ch
           )}
         </div>
         <div className="flex items-center gap-1 flex-shrink-0 ml-2">
-          {hasSelection && (
+          {hasSelection && clearable && (
             <span
               role="button"
               tabIndex={0}

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

@@ -1,5 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
 import {
   ArrowDownIcon,
@@ -139,9 +140,14 @@ const ResourceNameCell = ({ item }: { item: DiscoverTableData }) => {
   );
 };
 
+const MENU_WIDTH = 280;
+const MENU_GAP = 6;
+
 const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; collectionType: CollectionType }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
   const favorites = useStore(favoritesStore);
   const href = buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`);
   const visualiserHref = buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`);
@@ -153,9 +159,35 @@ const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; col
       : collectionType.charAt(0).toUpperCase() + collectionType.slice(1, -1);
   const isFavorite = favorites.some((fav) => fav.nodeKey === nodeKey);
 
+  // The table lives inside scrollable, overflow-hidden containers, so the menu is
+  // rendered in a portal with fixed positioning to avoid being clipped.
+  const updatePosition = () => {
+    const button = buttonRef.current;
+    if (!button) return;
+    const rect = button.getBoundingClientRect();
+    const menuHeight = menuRef.current?.offsetHeight ?? 0;
+    const spaceBelow = window.innerHeight - rect.bottom;
+
+    // Flip above the trigger when there isn't enough room below it.
+    const openUpwards = menuHeight > 0 && spaceBelow < menuHeight + MENU_GAP && rect.top > spaceBelow;
+    const top = openUpwards ? rect.top - menuHeight - MENU_GAP : rect.bottom + MENU_GAP;
+    const left = Math.max(MENU_GAP, rect.right - MENU_WIDTH);
+
+    setMenuPosition({ top, left });
+  };
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updatePosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   useEffect(() => {
+    if (!isOpen) return;
+
     const handlePointerDown = (event: MouseEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) {
+      const target = event.target as Node;
+      if (!menuRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
         setIsOpen(false);
       }
     };
@@ -166,14 +198,20 @@ const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; col
       }
     };
 
+    const handleReposition = () => updatePosition();
+
     document.addEventListener('mousedown', handlePointerDown);
     document.addEventListener('keydown', handleEscape);
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
 
     return () => {
       document.removeEventListener('mousedown', handlePointerDown);
       document.removeEventListener('keydown', handleEscape);
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
     };
-  }, []);
+  }, [isOpen]);
 
   const handleToggleFavorite = () => {
     const favoriteItem: FavoriteItem = {
@@ -188,8 +226,9 @@ const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; col
   };
 
   return (
-    <div className="relative flex justify-end" ref={menuRef}>
+    <div className="relative flex justify-end">
       <button
+        ref={buttonRef}
         type="button"
         aria-haspopup="menu"
         aria-expanded={isOpen}
@@ -199,34 +238,48 @@ const RowActionsMenu = ({ item, collectionType }: { item: DiscoverTableData; col
         <EllipsisVerticalIcon className="h-4 w-4" />
       </button>
 
-      {isOpen && (
-        <div className="absolute right-0 top-[calc(100%+0.35rem)] z-30 min-w-[280px] overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xl">
-          <a
-            href={href}
-            className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+      {isOpen &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            ref={menuRef}
+            role="menu"
+            style={{
+              position: 'fixed',
+              top: menuPosition?.top ?? -9999,
+              left: menuPosition?.left ?? -9999,
+              width: MENU_WIDTH,
+              visibility: menuPosition ? 'visible' : 'hidden',
+            }}
+            className="z-50 overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xl"
           >
-            <DocumentTextIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-            View documentation
-          </a>
-          {hasVisualiser && (
             <a
-              href={visualiserHref}
+              href={href}
               className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
             >
-              <MapIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-              View in visualiser
+              <DocumentTextIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+              View documentation
             </a>
-          )}
-          <button
-            type="button"
-            onClick={handleToggleFavorite}
-            className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
-          >
-            <StarIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
-            {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-          </button>
-        </div>
-      )}
+            {hasVisualiser && (
+              <a
+                href={visualiserHref}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+              >
+                <MapIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+                View in visualiser
+              </a>
+            )}
+            <button
+              type="button"
+              onClick={handleToggleFavorite}
+              className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-accent))]"
+            >
+              <StarIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
+              {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+            </button>
+          </div>,
+          document.body
+        )}
     </div>
   );
 };
@@ -617,6 +670,39 @@ export const getDomainColumns = (tableConfiguration: TableConfiguration) => [
   createActionsColumn('domains', tableConfiguration),
 ];
 
+// ============================================================================
+// SYSTEM COLUMNS
+// ============================================================================
+export const getSystemColumns = (tableConfiguration: TableConfiguration) => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>{tableConfiguration?.columns?.name?.label || 'System'}</span>,
+    cell: (info) => <ResourceNameCell item={info.row.original} />,
+    meta: {
+      filterVariant: 'name',
+    },
+  }),
+  createSummaryColumn(tableConfiguration),
+  columnHelper.accessor('data.services', {
+    id: 'services',
+    header: () => <span>Services</span>,
+    cell: (info) => <CollectionListCell items={info.getValue()} />,
+    meta: {
+      showFilter: false,
+    },
+  }),
+  columnHelper.accessor('data.flows', {
+    id: 'flows',
+    header: () => <span>Flows</span>,
+    cell: (info) => <CollectionListCell items={info.getValue()} />,
+    meta: {
+      showFilter: false,
+    },
+  }),
+  createBadgesColumn(tableConfiguration),
+  createActionsColumn('systems', tableConfiguration),
+];
+
 // ============================================================================
 // FLOW COLUMNS
 // ============================================================================
@@ -740,6 +826,8 @@ export const getDiscoverColumns = (collectionType: CollectionType, tableConfigur
       return getServiceColumns(tableConfiguration);
     case 'domains':
       return getDomainColumns(tableConfiguration);
+    case 'systems':
+      return getSystemColumns(tableConfiguration);
     case 'flows':
       return getFlowColumns(tableConfiguration);
     case 'containers':

package/eventcatalog/src/components/Tables/Discover/index.ts

@@ -1,4 +1,10 @@
 export { DiscoverTable } from './DiscoverTable';
-export type { DiscoverTableData, DiscoverTableProps, CollectionType, PropertyOption } from './DiscoverTable';
+export type {
+  DiscoverTableData,
+  DiscoverTableProps,
+  CollectionType,
+  CollectionKindOption,
+  PropertyOption,
+} from './DiscoverTable';
 export { FilterDropdown, CheckboxItem } from './FilterComponents';
 export type { FilterDropdownProps, CheckboxItemProps } from './FilterComponents';

package/eventcatalog/src/components/Tables/SystemResources/SystemResourcesTable.tsx

@@ -0,0 +1,267 @@
+import { useMemo, useState } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type SortingState,
+} from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ArrowUpDown, Search, SearchX } from 'lucide-react';
+import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
+import { isIconPath, resolveIconUrl } from '@utils/icon';
+
+export type SystemResourceCollection = 'services' | 'flows' | 'entities' | 'containers' | 'events' | 'commands' | 'queries';
+
+export interface SystemResourceItem {
+  collection: SystemResourceCollection;
+  id: string;
+  name: string;
+  version: string;
+  summary?: string;
+  icon?: string;
+  href: string;
+}
+
+interface SystemResourcesTableProps {
+  resources: SystemResourceItem[];
+}
+
+const TYPE_LABELS: Record<SystemResourceCollection, string> = {
+  services: 'Services',
+  flows: 'Flows',
+  entities: 'Entities',
+  containers: 'Data Stores',
+  events: 'Events',
+  commands: 'Commands',
+  queries: 'Queries',
+};
+
+// Order the type filter pills follow on the page.
+const TYPE_ORDER: SystemResourceCollection[] = ['services', 'flows', 'entities', 'containers', 'events', 'commands', 'queries'];
+
+// Small icon for a collection type (used in filter pills and the type column).
+const CollectionTypeIcon = ({ collection, className }: { collection: SystemResourceCollection; className?: string }) => {
+  const { color, Icon } = getColorAndIconForCollection(collection);
+  const colorClass = getCollectionTextColorClass(color, 'text-[rgb(var(--ec-icon-color))]');
+  return <Icon className={`${className ?? 'h-3.5 w-3.5'} ${colorClass}`} aria-hidden="true" />;
+};
+
+const ResourceIcon = ({ item }: { item: SystemResourceItem }) => {
+  if (item.icon && isIconPath(item.icon)) {
+    return <img src={resolveIconUrl(item.icon)} alt="" className="h-5 w-5" loading="lazy" />;
+  }
+  return <CollectionTypeIcon collection={item.collection} className="h-5 w-5" />;
+};
+
+const columnHelper = createColumnHelper<SystemResourceItem>();
+
+const SortIcon = ({ direction }: { direction: false | 'asc' | 'desc' }) => {
+  if (direction === 'asc') return <ArrowUp className="h-3.5 w-3.5" aria-hidden="true" />;
+  if (direction === 'desc') return <ArrowDown className="h-3.5 w-3.5" aria-hidden="true" />;
+  return <ArrowUpDown className="h-3.5 w-3.5 opacity-40" aria-hidden="true" />;
+};
+
+export function SystemResourcesTable({ resources }: SystemResourcesTableProps) {
+  const [search, setSearch] = useState('');
+  const [selectedTypes, setSelectedTypes] = useState<SystemResourceCollection[]>([]);
+  const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: false }]);
+
+  // Only show type filters that actually have resources in this system.
+  const availableTypes = useMemo(
+    () => TYPE_ORDER.filter((type) => resources.some((resource) => resource.collection === type)),
+    [resources]
+  );
+
+  const filtered = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return resources.filter((resource) => {
+      if (selectedTypes.length > 0 && !selectedTypes.includes(resource.collection)) {
+        return false;
+      }
+      if (query) {
+        const haystack = `${resource.name} ${resource.id} ${resource.summary ?? ''}`.toLowerCase();
+        if (!haystack.includes(query)) return false;
+      }
+      return true;
+    });
+  }, [resources, search, selectedTypes]);
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (info) => {
+          const resource = info.row.original;
+          return (
+            <a href={resource.href} className="group flex items-center gap-3">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))]">
+                <ResourceIcon item={resource} />
+              </span>
+              <span className="text-sm font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))]">
+                {resource.name}
+              </span>
+            </a>
+          );
+        },
+      }),
+      columnHelper.accessor((row) => TYPE_LABELS[row.collection], {
+        id: 'type',
+        header: 'Type',
+        cell: (info) => {
+          const { collection } = info.row.original;
+          return (
+            <span className="inline-flex items-center gap-1.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
+              <CollectionTypeIcon collection={collection} />
+              {TYPE_LABELS[collection]}
+            </span>
+          );
+        },
+      }),
+      columnHelper.accessor('version', {
+        header: 'Version',
+        cell: (info) => (
+          <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] px-2 py-0.5 text-xs text-[rgb(var(--ec-page-text-muted))]">
+            v{info.getValue()}
+          </span>
+        ),
+      }),
+      columnHelper.accessor((row) => row.summary ?? '', {
+        id: 'summary',
+        header: 'Summary',
+        enableSorting: false,
+        cell: (info) => (
+          <span className="line-clamp-2 text-sm text-[rgb(var(--ec-page-text-muted))]">{info.getValue() || '-'}</span>
+        ),
+      }),
+    ],
+    []
+  );
+
+  const table = useReactTable({
+    data: filtered,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const toggleType = (type: SystemResourceCollection) => {
+    setSelectedTypes((prev) => (prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type]));
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Controls: search + type filters */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-xs">
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]"
+            aria-hidden="true"
+          />
+          <input
+            type="text"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="Search resources..."
+            className="w-full rounded-md border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] py-2 pl-9 pr-3 text-sm text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.4)]"
+          />
+        </div>
+
+        {availableTypes.length > 1 && (
+          <div className="flex flex-wrap gap-2">
+            {availableTypes.map((type) => {
+              const active = selectedTypes.includes(type);
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  onClick={() => toggleType(type)}
+                  className={[
+                    'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
+                    active
+                      ? 'border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]'
+                      : 'border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]',
+                  ].join(' ')}
+                >
+                  <CollectionTypeIcon collection={type} />
+                  {TYPE_LABELS[type]}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))]">
+        <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border))]">
+          <thead className="bg-[rgb(var(--ec-card-bg))]">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  const isSummary = header.column.id === 'summary';
+                  return (
+                    <th
+                      key={header.id}
+                      className={[
+                        'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]',
+                        isSummary ? 'hidden md:table-cell' : '',
+                      ].join(' ')}
+                    >
+                      {canSort ? (
+                        <button
+                          type="button"
+                          onClick={header.column.getToggleSortingHandler()}
+                          className="inline-flex items-center gap-1.5 uppercase tracking-wider hover:text-[rgb(var(--ec-page-text))]"
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          <SortIcon direction={header.column.getIsSorted()} />
+                        </button>
+                      ) : (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      )}
+                    </th>
+                  );
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="divide-y divide-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))]">
+            {table.getRowModel().rows.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-12">
+                  <div className="flex flex-col items-center justify-center gap-2 text-center text-[rgb(var(--ec-page-text-muted))]">
+                    <SearchX className="h-6 w-6" aria-hidden="true" />
+                    <p className="text-sm">No resources found.</p>
+                  </div>
+                </td>
+              </tr>
+            )}
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="transition-colors hover:bg-[rgb(var(--ec-card-bg))]">
+                {row.getVisibleCells().map((cell) => {
+                  const isSummary = cell.column.id === 'summary';
+                  return (
+                    <td key={cell.id} className={['px-4 py-3', isSummary ? 'hidden max-w-md md:table-cell' : ''].join(' ')}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+        Showing {filtered.length} of {resources.length} resources
+      </p>
+    </div>
+  );
+}
+
+export default SystemResourcesTable;