SHL-01: ui-shell-design-system-zentral (tokens, theming, i18n-rahmen, basis-komponenten)

2026-08-28 21:41:56 +02:00
parent c895a67c4b
commit 00665592f6
15 changed files with 840 additions and 0 deletions
@@ -0,0 +1,83 @@
+// Table-Basis-Komponente — SHL-01. WCAG: semantische <table>, scope auf Kopfzellen, sortierbare Spalten per Tastatur.
+
+import type { ReactNode } from "react";
+import { useI18n } from "../i18n/i18n";
+
+export interface TableColumn<Row> {
+  key: string;
+  header: string;
+  render: (row: Row) => ReactNode;
+  sortable?: boolean;
+}
+
+export interface TableProps<Row> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  rowKey: (row: Row) => string;
+  sortKey?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (key: string) => void;
+  caption?: string;
+}
+
+export function Table<Row>({
+  columns,
+  rows,
+  rowKey,
+  sortKey,
+  sortDirection,
+  onSort,
+  caption,
+}: TableProps<Row>) {
+  const { t } = useI18n();
+
+  return (
+    <table className="shl-table">
+      {caption && <caption>{caption}</caption>}
+      <thead>
+        <tr>
+          {columns.map((column) => {
+            const isSorted = column.key === sortKey;
+            const ariaSort = column.sortable
+              ? isSorted
+                ? sortDirection === "asc"
+                  ? "ascending"
+                  : "descending"
+                : "none"
+              : undefined;
+            return (
+              <th key={column.key} scope="col" aria-sort={ariaSort}>
+                {column.sortable ? (
+                  <button
+                    type="button"
+                    onClick={() => onSort?.(column.key)}
+                    className="shl-table-sort-button"
+                  >
+                    {column.header}
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.length === 0 ? (
+          <tr>
+            <td colSpan={columns.length}>{t("shl.table.noRows")}</td>
+          </tr>
+        ) : (
+          rows.map((row) => (
+            <tr key={rowKey(row)}>
+              {columns.map((column) => (
+                <td key={column.key}>{column.render(row)}</td>
+              ))}
+            </tr>
+          ))
+        )}
+      </tbody>
+    </table>
+  );
+}