feat(ui): generischer DataTable-Wrapper + Version 1.0.0

DataTable (components/DataTable.tsx) gibt jeder CRUD-Tabelle drei
Baseline-Features auf einmal:
* Search-Input (Volltext über alle string-Felder, case-insensitive)
* Pagination 25/Seite mit showSizeChanger
* Auto-sorter pro Spalte mit dataIndex (string→localeCompare,
  number→subtract, boolean→bool→Number) — Spalten mit eigenem
  sorter behalten den.

Sweep aller 13 CRUD-Pages auf <DataTable>: Domains, Backends,
Routing-Rules, Networks, IP-Addresses, SSL, Cluster, sechs Firewall-
Tabs. Kleine Sub-Tabellen (System-Discovered IP-Card) bleiben
auf <Table> — read-only ohne CRUD braucht keine Pagination.

i18n: common.search, common.totalRows.

Version-Bump auf 1.0.0 (User-Direktive: ohne -dev): VERSION-Datei,
Go-Literale in cmd/edgeguard-{api,ctl,scheduler}/main.go,
package.json, Sidebar-Konstante. Live deployed auf 89.163.205.6 als
edgeguard 1.0.0 (api + ui + meta).

Memory: project_versioning.md hält die Patch-Bump-Konvention fest
(Gitea Package Registry 409't bei Doppel-Upload — bei jedem Release
zuerst die VERSION inkrementieren).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

management-ui/src/components/DataTable.tsx

@@ -0,0 +1,123 @@
+import { useMemo, useState } from 'react'
+import { Input, Space, Table } from 'antd'
+import type { ColumnsType, TableProps } from 'antd/es/table'
+import { SearchOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
+
+// DataTable wraps AntD's Table and gives every CRUD page the same
+// baseline UX:
+//
+//   * Search input above the table — filters across every string
+//     field of every row, case-insensitive.
+//   * Pagination on by default (25 / page, size-changer enabled).
+//   * Sortable columns out of the box — any column with `dataIndex`
+//     gets a default sorter inferred from the value type (string →
+//     localeCompare, number → subtract). Columns that already
+//     define `sorter` keep their custom one.
+//
+// Drop-in replacement: callers pass the same `columns` + `dataSource`
+// props they would to `<Table>`. Search visibility and page-size
+// can be customised via the props.
+interface DataTableProps<T> extends Omit<TableProps<T>, 'pagination'> {
+  pageSize?: number
+  searchPlaceholder?: string
+  searchable?: boolean
+  // toolbar renders to the right of the search input, useful for
+  // "Add" buttons.
+  toolbar?: React.ReactNode
+}
+
+function inferSorter<T>(dataIndex: string | string[] | undefined) {
+  if (dataIndex == null) return undefined
+  const path = Array.isArray(dataIndex) ? dataIndex : [dataIndex]
+  const get = (row: T): unknown => path.reduce<unknown>(
+    (acc, k) => (acc != null && typeof acc === 'object' ? (acc as Record<string, unknown>)[k] : undefined),
+    row as unknown,
+  )
+  return (a: T, b: T) => {
+    const va = get(a), vb = get(b)
+    if (typeof va === 'number' && typeof vb === 'number') return va - vb
+    if (typeof va === 'boolean' && typeof vb === 'boolean') return Number(va) - Number(vb)
+    const sa = String(va ?? '')
+    const sb = String(vb ?? '')
+    return sa.localeCompare(sb, undefined, { numeric: true, sensitivity: 'base' })
+  }
+}
+
+function flatStringValues(row: unknown): string[] {
+  if (row == null) return []
+  if (typeof row === 'string') return [row]
+  if (typeof row === 'number' || typeof row === 'boolean') return [String(row)]
+  if (Array.isArray(row)) return row.flatMap(flatStringValues)
+  if (typeof row === 'object') {
+    return Object.values(row as Record<string, unknown>).flatMap(flatStringValues)
+  }
+  return []
+}
+
+export default function DataTable<T extends object>(
+  props: DataTableProps<T>,
+) {
+  const { t } = useTranslation()
+  const {
+    dataSource,
+    columns,
+    pageSize = 25,
+    searchPlaceholder,
+    searchable = true,
+    toolbar,
+    ...rest
+  } = props
+
+  const [search, setSearch] = useState('')
+
+  const filtered = useMemo(() => {
+    if (!search || !dataSource) return dataSource
+    const q = search.toLowerCase()
+    return (dataSource as readonly T[]).filter((row) =>
+      flatStringValues(row).some((s) => s.toLowerCase().includes(q)),
+    )
+  }, [dataSource, search])
+
+  const enhancedCols: ColumnsType<T> = useMemo(() => {
+    if (!columns) return []
+    return (columns as ColumnsType<T>).map((c) => {
+      // Skip if user already declared a sorter or this column has
+      // no dataIndex (e.g. action columns).
+      const col = c as Record<string, unknown>
+      if (col.sorter || col.dataIndex == null) return c
+      const sorter = inferSorter<T>(col.dataIndex as string | string[])
+      if (!sorter) return c
+      return { ...c, sorter }
+    })
+  }, [columns])
+
+  return (
+    <Space direction="vertical" className="w-full mb-12" size="small">
+      {(searchable || toolbar) && (
+        <div className="flex-between mb-12">
+          {searchable && (
+            <Input
+              prefix={<SearchOutlined />}
+              placeholder={searchPlaceholder ?? t('common.search')}
+              allowClear
+              onChange={(e) => setSearch(e.target.value)}
+              style={{ maxWidth: 320 }}
+            />
+          )}
+          {toolbar && <div>{toolbar}</div>}
+        </div>
+      )}
+      <Table<T>
+        {...rest}
+        dataSource={filtered}
+        columns={enhancedCols}
+        pagination={{
+          pageSize,
+          showSizeChanger: true,
+          showTotal: (total) => t('common.totalRows', { count: total }),
+        }}
+      />
+    </Space>
+  )
+}

management-ui/src/components/Layout/Sidebar.tsx

@@ -68,7 +68,7 @@ const NAV: NavSection[] = [
   },
 ]
 
-const VERSION = '0.0.1-dev'
+const VERSION = '1.0.0'
 
 export default function Sidebar({ isOpen, onClose }: SidebarProps) {
   const { t } = useTranslation()

management-ui/src/i18n/locales/de/common.json

@@ -248,6 +248,8 @@
     "loading": "Lädt …",
     "error": "Fehler",
     "edit": "Bearbeiten",
-    "delete": "Löschen"
+    "delete": "Löschen",
+    "search": "Suchen …",
+    "totalRows": "{{count}} Einträge"
   }
 }

management-ui/src/i18n/locales/en/common.json

@@ -249,6 +249,8 @@
     "loading": "Loading …",
     "error": "Error",
     "edit": "Edit",
-    "delete": "Delete"
+    "delete": "Delete",
+    "search": "Search …",
+    "totalRows": "{{count}} rows"
   }
 }

management-ui/src/pages/Backends/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -118,7 +119,7 @@ export default function BackendsPage() {
       }}>
         {t('backends.addBackend')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
       <Modal
         title={editing ? t('backends.editBackend') : t('backends.addBackend')}
         open={editing !== null || creating}

management-ui/src/pages/Cluster/index.tsx

@@ -1,7 +1,8 @@
-import { Card, Spin, Table, Tag, Typography } from 'antd'
+import { Card, Spin, Tag, Typography } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -62,11 +63,11 @@ export default function ClusterPage() {
         {t('cluster.intro', { count: data?.nodes.length ?? 0 })}
       </Typography.Paragraph>
       <Card>
-        <Table
+        <DataTable
           rowKey="id"
           columns={columns}
           dataSource={data?.nodes ?? []}
-          pagination={false}
+          
         />
       </Card>
     </div>

management-ui/src/pages/Domains/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Typography, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -124,12 +125,12 @@ export default function DomainsPage() {
       }}>
         {t('domains.addDomain')}
       </Button>
-      <Table
+      <DataTable
         rowKey="id"
         loading={isLoading}
         dataSource={data ?? []}
         columns={columns}
-        pagination={false}
+        
       />
       <Modal
         title={editing ? t('domains.editDomain') : t('domains.addDomain')}

management-ui/src/pages/Firewall/AddressGroups.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { AddressGroup, AddressObject } from './types'
@@ -91,7 +92,7 @@ export default function AddressGroupsTab() {
       }}>
         {t('fw.ag.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.ag.edit') : t('fw.ag.add')}
         open={editing !== null || creating}

management-ui/src/pages/Firewall/AddressObjects.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { AddressObject } from './types'
@@ -84,7 +85,7 @@ export default function AddressObjectsTab() {
       }}>
         {t('fw.ao.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.ao.edit') : t('fw.ao.add')}
         open={editing !== null || creating}

management-ui/src/pages/Firewall/NATRules.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { NATRule } from './types'
@@ -128,7 +129,7 @@ export default function NATRulesTab() {
       }}>
         {t('fw.nat.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.nat.edit') : t('fw.nat.add')}
         open={editing !== null || creating}

management-ui/src/pages/Firewall/Rules.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { AddressGroup, AddressObject, FwRule, FwService, ServiceGroup, Zone } from './types'
@@ -195,7 +196,7 @@ export default function RulesTab() {
       }}>
         {t('fw.rule.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.rule.edit') : t('fw.rule.add')}
         open={editing !== null || creating}

management-ui/src/pages/Firewall/ServiceGroups.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { FwService, ServiceGroup } from './types'
@@ -91,7 +92,7 @@ export default function ServiceGroupsTab() {
       }}>
         {t('fw.sg.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.sg.edit') : t('fw.sg.add')}
         open={editing !== null || creating}

management-ui/src/pages/Firewall/Services.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Tooltip, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import type { FwService } from './types'
@@ -95,7 +96,7 @@ export default function ServicesTab() {
       }}>
         {t('fw.svc.add')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
       <Modal
         title={editing ? t('fw.svc.edit') : t('fw.svc.add')}
         open={editing !== null || creating}

management-ui/src/pages/IPAddresses/index.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Spac
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -167,11 +168,11 @@ export default function IPAddressesPage() {
         {(sysAddrs ?? []).length === 0
           ? <Typography.Text type="secondary">—</Typography.Text>
           : (
-            <Table
+            <DataTable
               size="small"
               rowKey={(r) => `${r.ifname}-${r.address}`}
               dataSource={sysAddrs ?? []}
-              pagination={false}
+              
               columns={[
                 { title: t('ips.interface'), dataIndex: 'ifname', key: 'ifname', render: (s: string) => <code>{s}</code> },
                 { title: t('ips.address'), key: 'addr', render: (_, row: SystemAddress) => <code>{row.address}/{row.prefix}</code> },
@@ -189,7 +190,7 @@ export default function IPAddressesPage() {
       }}>
         {t('ips.addAddress')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={ips ?? []} columns={columns} pagination={false} />
+      <Table rowKey="id" loading={isLoading} dataSource={ips ?? []} columns={columns}  />
       <Modal
         title={editing ? t('ips.editAddress') : t('ips.addAddress')}
         open={editing !== null || creating}

management-ui/src/pages/Networks/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Tooltip, Typography, message } from 'antd'
+import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Tooltip, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -151,7 +152,7 @@ export default function NetworksPage() {
         {t('networks.addInterface')}
       </Button>
 
-      <Table rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns}  />
 
       <Modal
         title={editing ? t('networks.editInterface') : t('networks.addInterface')}

management-ui/src/pages/RoutingRules/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -128,7 +129,7 @@ export default function RoutingRulesPage() {
       }}>
         {t('routing.addRule')}
       </Button>
-      <Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns}  />
       <Modal
         title={editing ? t('routing.editRule') : t('routing.addRule')}
         open={editing !== null || creating}

management-ui/src/pages/SSL/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
-import { Alert, Button, Card, Form, Input, Popconfirm, Select, Space, Table, Tabs, Tag, Typography, message } from 'antd'
+import { Alert, Button, Card, Form, Input, Popconfirm, Select, Space, Tabs, Tag, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -192,7 +193,7 @@ export default function SSLPage() {
       <Tabs items={tabs} defaultActiveKey="letsencrypt" />
 
       <Typography.Title level={5} style={{ marginTop: 24 }}>{t('ssl.installedTitle')}</Typography.Title>
-      <Table rowKey="id" loading={isLoading} dataSource={certs ?? []} columns={columns} pagination={false} />
+      <DataTable rowKey="id" loading={isLoading} dataSource={certs ?? []} columns={columns}  />
     </div>
   )
 }