feat: Excel-artige DataTable (Spaltenbreite/Sortieren/Filtern) für alle Tabellen

- Portierte DataTable-Komponente (aus Vorrania): Spalten per Drag breiter ziehen
  und verschieben, Klick-Sortierung, Filterzeile je Spalte, Spalten ein-/ausblenden;
  Breiten/Reihenfolge/Filter pro Tabelle im Browser gemerkt (localStorage)
- Zu langer Zellinhalt wird mit „…" abgeschnitten (Titel bleibt sichtbar, Excel-artig)
- Umgestellt: Buchungen, Import-Prüfansicht (inkl. interaktiver Zellen), Import-
  Verlauf, Benutzer
- Neue Skeleton-Komponente für den Ladezustand

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/Import.jsx

@@ -6,6 +6,7 @@ import { useConfirm } from "../confirm";
 import { useToast } from "../toast";
 import Icon from "../components/Icon";
 import CategorySelect from "../components/CategorySelect";
+import DataTable from "../components/DataTable";
 import { formatMoney } from "../format";
 
 const DATE_FORMATS = [
@@ -176,12 +177,115 @@ export default function Import() {
 
   const includeCount = rows ? rows.filter((r) => r.include).length : 0;
 
-  function updateRow(idx, patch) {
-    setRows((rs) => rs.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
+  // Aktualisiert eine Zeile über ihren stabilen Erkennungs-Index (die Anzeige in
+  // der Tabelle kann sortiert/gefiltert sein, der Index bleibt gleich).
+  function updateRow(rowIndex, patch) {
+    setRows((rs) => rs.map((r) => (r.index === rowIndex ? { ...r, ...patch } : r)));
   }
 
   const acc = accountById[Number(accountId)];
 
+  const reviewColumns = useMemo(() => [
+    {
+      key: "include", header: "", width: 42, fixed: true,
+      render: (r) => (
+        <input type="checkbox" checked={!!r.include} disabled={!r.valid}
+               onChange={(e) => updateRow(r.index, { include: e.target.checked })} />
+      ),
+    },
+    {
+      key: "date", header: t("transactions.date"), width: 112,
+      sortValue: (r) => r.date || "",
+      render: (r) => (r.date
+        ? <span className="nowrap">{formatDate(r.date)}</span>
+        : <span className="amount neg">{t("import.badDate")}</span>),
+    },
+    {
+      key: "amount", header: t("transactions.amount"), align: "num", width: 120,
+      sortValue: (r) => r.amount_cents || 0,
+      render: (r) => (
+        <span className={`amount ${(r.amount_cents || 0) < 0 ? "neg" : "pos"}`}>
+          {formatMoney(Math.abs(r.amount_cents || 0), acc?.currency || "EUR")}
+        </span>
+      ),
+    },
+    {
+      key: "type", header: t("import.typeCol"), width: 128,
+      filterText: (r) => t(`transactions.${r.type}`),
+      render: (r) => (
+        <select value={r.type} onChange={(e) => updateRow(r.index, { type: e.target.value })}>
+          <option value="expense">{t("transactions.expense")}</option>
+          <option value="income">{t("transactions.income")}</option>
+          <option value="transfer">{t("transactions.transfer")}</option>
+        </select>
+      ),
+    },
+    {
+      key: "payee", header: t("import.payeeCol"), grow: true, min: 200,
+      filterText: (r) => r.payee || r.purpose || "",
+      render: (r) => (
+        <span className="ellipsis" style={{ display: "block" }}>
+          {r.payee || r.purpose || ""}
+          {r.is_duplicate && <span className="badge" style={{ marginLeft: 6 }}>{t("import.duplicate")}</span>}
+        </span>
+      ),
+    },
+    {
+      key: "category", header: t("transactions.category"), width: 210, min: 160,
+      render: (r) => (r.type === "transfer" ? (
+        <select value={r.to_account_id || ""}
+                onChange={(e) => updateRow(r.index, { to_account_id: e.target.value ? Number(e.target.value) : null })}>
+          <option value="">{t("import.chooseAccount")}</option>
+          {accounts.filter((a) => a.id !== Number(accountId)).map((a) => (
+            <option key={a.id} value={a.id}>{a.name}</option>
+          ))}
+        </select>
+      ) : (
+        <CategorySelect
+          groups={r.type === "income" ? incomeGroups : expenseGroups}
+          value={r.category_id || ""}
+          onChange={(id) => updateRow(r.index, { category_id: id != null ? Number(id) : null })}
+          allowNone
+          noneLabel={t("transactions.uncategorized")}
+          placeholder={t("transactions.uncategorized")}
+        />
+      )),
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  ], [t, formatDate, acc, accounts, accountId, incomeGroups, expenseGroups]);
+
+  const historyColumns = useMemo(() => [
+    {
+      key: "file", header: t("import.file"), grow: true, min: 180,
+      filterText: (b) => b.filename || "",
+      render: (b) => (
+        <span className="ellipsis" style={{ display: "block" }}>
+          <strong>{b.filename || "—"}</strong>{" "}
+          <span className="muted small">{accountById[b.account_id]?.name}</span>
+        </span>
+      ),
+    },
+    {
+      key: "date", header: t("transactions.date"), width: 150,
+      sortValue: (b) => b.created_at,
+      render: (b) => <span className="nowrap">{formatDate(b.created_at)}</span>,
+    },
+    {
+      key: "count", header: t("import.importedCount", { n: "" }).trim(), width: 110, align: "num",
+      sortValue: (b) => b.imported_count,
+      render: (b) => <span className="nowrap">{t("import.importedCount", { n: b.imported_count })}</span>,
+    },
+    {
+      key: "action", header: "", width: 120, fixed: true,
+      render: (b) => (b.status === "committed" ? (
+        <button className="btn sm danger" onClick={() => undo(b)}>
+          <Icon name="refresh-ccw" size={14} /> {t("import.undo")}
+        </button>
+      ) : <span className="muted small">{t("import.undone")}</span>),
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  ], [t, formatDate, accountById]);
+
   return (
     <div>
       <div className="page-head">
@@ -379,65 +483,13 @@ export default function Import() {
               <span>{t("import.noneValid")}</span>
             </div>
           )}
-          <div className="table-scroll">
-            <table className="table">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>{t("transactions.date")}</th>
-                  <th>{t("transactions.amount")}</th>
-                  <th>{t("import.typeCol")}</th>
-                  <th>{t("import.payeeCol")}</th>
-                  <th>{t("transactions.category")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((r, idx) => (
-                  <tr key={idx} className={!r.valid ? "row-invalid" : r.is_duplicate ? "row-dup" : ""}>
-                    <td>
-                      <input type="checkbox" checked={!!r.include} disabled={!r.valid}
-                             onChange={(e) => updateRow(idx, { include: e.target.checked })} style={{ width: "auto" }} />
-                    </td>
-                    <td className="nowrap">{r.date ? formatDate(r.date) : <span className="amount neg">{t("import.badDate")}</span>}</td>
-                    <td className="nowrap">
-                      <span className={`amount ${(r.amount_cents || 0) < 0 ? "neg" : "pos"}`}>
-                        {formatMoney(Math.abs(r.amount_cents || 0), acc?.currency || "EUR")}
-                      </span>
-                    </td>
-                    <td>
-                      <select value={r.type} onChange={(e) => updateRow(idx, { type: e.target.value })} style={{ minWidth: 110 }}>
-                        <option value="expense">{t("transactions.expense")}</option>
-                        <option value="income">{t("transactions.income")}</option>
-                        <option value="transfer">{t("transactions.transfer")}</option>
-                      </select>
-                    </td>
-                    <td className="ellipsis" style={{ maxWidth: 200 }}>
-                      {r.payee || r.purpose || ""}
-                      {r.is_duplicate && <span className="badge" style={{ marginLeft: 6 }}>{t("import.duplicate")}</span>}
-                    </td>
-                    <td>
-                      {r.type === "transfer" ? (
-                        <select value={r.to_account_id || ""} onChange={(e) => updateRow(idx, { to_account_id: e.target.value ? Number(e.target.value) : null })} style={{ minWidth: 150 }}>
-                          <option value="">{t("import.chooseAccount")}</option>
-                          {accounts.filter((a) => a.id !== Number(accountId)).map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
-                        </select>
-                      ) : (
-                        <CategorySelect
-                          groups={r.type === "income" ? incomeGroups : expenseGroups}
-                          value={r.category_id || ""}
-                          onChange={(id) => updateRow(idx, { category_id: id != null ? Number(id) : null })}
-                          allowNone
-                          noneLabel={t("transactions.uncategorized")}
-                          placeholder={t("transactions.uncategorized")}
-                          minWidth={180}
-                        />
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <DataTable
+            id="import-review"
+            rows={rows}
+            getRowKey={(r) => r.index}
+            rowClassName={(r) => (!r.valid ? "row-invalid" : r.is_duplicate ? "row-dup" : "")}
+            columns={reviewColumns}
+          />
         </div>
       )}
 
@@ -445,24 +497,13 @@ export default function Import() {
       {batches.length > 0 && (
         <div className="card">
           <h2>{t("import.history")}</h2>
-          <table className="table">
-            <tbody>
-              {batches.map((b) => (
-                <tr key={b.id} className={b.status === "undone" ? "row-dup" : ""}>
-                  <td><strong>{b.filename || "—"}</strong> <span className="muted small">{accountById[b.account_id]?.name}</span></td>
-                  <td className="nowrap">{formatDate(b.created_at)}</td>
-                  <td className="nowrap">{t("import.importedCount", { n: b.imported_count })}</td>
-                  <td style={{ textAlign: "right" }}>
-                    {b.status === "committed" ? (
-                      <button className="btn sm danger" onClick={() => undo(b)}>
-                        <Icon name="refresh-ccw" size={14} /> {t("import.undo")}
-                      </button>
-                    ) : <span className="muted small">{t("import.undone")}</span>}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          <DataTable
+            id="import-history"
+            rows={batches}
+            getRowKey={(b) => b.id}
+            rowClassName={(b) => (b.status === "undone" ? "row-dup" : "")}
+            columns={historyColumns}
+          />
         </div>
       )}
     </div>

web/src/pages/Transactions.jsx

@@ -9,6 +9,7 @@ import IconChip from "../components/IconChip";
 import Money from "../components/Money";
 import Modal from "../components/Modal";
 import CategorySelect from "../components/CategorySelect";
+import DataTable from "../components/DataTable";
 import { centsToInput, parseAmountToCents, todayIso } from "../format";
 
 const TYPES = ["expense", "income", "transfer"];
@@ -193,6 +194,62 @@ export default function Transactions() {
     };
   }
 
+  const txnColumns = useMemo(() => [
+    {
+      key: "date", header: t("transactions.date"), width: 112,
+      sortValue: (tx) => tx.date,
+      render: (tx) => <span className="nowrap">{formatDate(tx.date)}</span>,
+    },
+    {
+      key: "category", header: t("transactions.category"), grow: true, min: 200,
+      filterText: (tx) => rowLabel(tx).title,
+      sortValue: (tx) => rowLabel(tx).title,
+      render: (tx) => {
+        const l = rowLabel(tx);
+        return (
+          <div className="named">
+            <IconChip name={l.icon} color={l.color} size={26} />
+            <div className="named-text">
+              <div className="ellipsis">{l.title}</div>
+              {l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "account", header: t("transactions.account"), width: 150,
+      filterText: (tx) => accountById[tx.account_id]?.name || "",
+      render: (tx) => accountById[tx.account_id]?.name || "",
+    },
+    {
+      key: "amount", header: t("transactions.amount"), align: "num", width: 150,
+      sortValue: (tx) => tx.amount_base_cents,
+      render: (tx) => {
+        const acc = accountById[tx.account_id];
+        const sign = tx.type === "income" ? "pos" : tx.type === "expense" ? "neg" : null;
+        return (
+          <Money cents={tx.amount_cents} currency={acc?.currency || "EUR"}
+                 baseCents={tx.amount_base_cents} baseCurrency={baseCurrency} sign={sign} />
+        );
+      },
+    },
+    {
+      key: "actions", header: "", width: 96, fixed: true,
+      render: (tx) => (
+        <div className="nowrap" style={{ textAlign: "right" }}>
+          <button className="btn sm ghost" title={t("common.edit")} onClick={() => openEdit(tx)}>
+            <Icon name="edit" size={14} />
+          </button>
+          <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(tx)}>
+            <Icon name="trash" size={14} />
+          </button>
+        </div>
+      ),
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  ], [accountById, categoryById, baseCurrency, formatDate, t]);
+
   return (
     <div>
       <div className="page-head">
@@ -220,55 +277,13 @@ export default function Transactions() {
           </div>
 
           <div className="card">
-            {txns.length === 0 ? (
-              <div className="empty-state">{t("transactions.empty")}</div>
-            ) : (
-              <table className="table">
-                <thead>
-                  <tr>
-                    <th>{t("transactions.date")}</th>
-                    <th>{t("transactions.category")}</th>
-                    <th>{t("transactions.account")}</th>
-                    <th style={{ textAlign: "right" }}>{t("transactions.amount")}</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {txns.map((tx) => {
-                    const l = rowLabel(tx);
-                    const acc = accountById[tx.account_id];
-                    const sign = tx.type === "income" ? "pos" : tx.type === "expense" ? "neg" : null;
-                    return (
-                      <tr key={tx.id}>
-                        <td className="nowrap">{formatDate(tx.date)}</td>
-                        <td>
-                          <div className="named">
-                            <IconChip name={l.icon} color={l.color} size={28} />
-                            <div className="named-text">
-                              <div>{l.title}</div>
-                              {l.sub && <div className="named-sub">{l.sub}</div>}
-                            </div>
-                          </div>
-                        </td>
-                        <td className="nowrap">{acc?.name}</td>
-                        <td style={{ textAlign: "right" }}>
-                          <Money cents={tx.amount_cents} currency={acc?.currency || "EUR"}
-                                 baseCents={tx.amount_base_cents} baseCurrency={baseCurrency} sign={sign} />
-                        </td>
-                        <td className="nowrap" style={{ textAlign: "right" }}>
-                          <button className="btn sm ghost" title={t("common.edit")} onClick={() => openEdit(tx)}>
-                            <Icon name="edit" size={14} />
-                          </button>
-                          <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(tx)}>
-                            <Icon name="trash" size={14} />
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            )}
+            <DataTable
+              id="transactions"
+              rows={txns}
+              getRowKey={(tx) => tx.id}
+              empty={t("transactions.empty")}
+              columns={txnColumns}
+            />
           </div>
         </>
       )}

web/src/pages/Users.jsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { api, ApiError } from "../api";
 import { useAuth } from "../auth";
 import { useConfirm } from "../confirm";
 import { useToast } from "../toast";
 import Icon from "../components/Icon";
+import DataTable from "../components/DataTable";
 
 function randomPassword(len = 12) {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
@@ -95,6 +96,55 @@ export default function Users() {
     }
   }
 
+  const userColumns = useMemo(() => [
+    {
+      key: "name", header: t("users.username"), grow: true, min: 180,
+      filterText: (u) => u.display_name || u.username,
+      render: (u) => (
+        <span className="ellipsis" style={{ display: "block" }}>
+          <strong>{u.display_name || u.username}</strong>
+          {u.display_name && <span className="muted small"> · {u.username}</span>}
+          {u.id === self?.id && <span className="muted small"> {t("users.you")}</span>}
+        </span>
+      ),
+    },
+    {
+      key: "role", header: t("users.role"), width: 120,
+      filterText: (u) => (u.role === "admin" ? t("common.admin") : t("common.user")),
+      render: (u) => <span className="badge">{u.role === "admin" ? t("common.admin") : t("common.user")}</span>,
+    },
+    {
+      key: "status", header: t("users.status"), width: 120,
+      filterText: (u) => (u.is_active ? t("users.active") : t("users.inactive")),
+      render: (u) => (
+        <span className={`badge ${u.is_active ? "ok" : ""}`}>
+          {u.is_active ? t("users.active") : t("users.inactive")}
+        </span>
+      ),
+    },
+    {
+      key: "actions", header: t("common.actions"), width: 132, fixed: true,
+      render: (u) => (
+        <div className="nowrap" style={{ textAlign: "right" }}>
+          <button className="btn sm ghost" title={t("users.resetPassword")} onClick={() => passwortZuruecksetzen(u)}>
+            <Icon name="key" size={15} />
+          </button>
+          {u.id !== self?.id && (
+            <>
+              <button className="btn sm ghost" title={u.is_active ? t("users.inactive") : t("users.active")} onClick={() => aktivUmschalten(u)}>
+                <Icon name={u.is_active ? "eye-off" : "eye"} size={15} />
+              </button>
+              <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(u)}>
+                <Icon name="trash" size={15} />
+              </button>
+            </>
+          )}
+        </div>
+      ),
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  ], [t, self]);
+
   return (
     <div>
       <h1>{t("users.title")}</h1>
@@ -145,50 +195,13 @@ export default function Users() {
       </div>
 
       <div className="card">
-        <table className="table">
-          <thead>
-            <tr>
-              <th>{t("users.username")}</th>
-              <th>{t("users.role")}</th>
-              <th>{t("users.status")}</th>
-              <th style={{ textAlign: "right" }}>{t("common.actions")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {users.map((u) => (
-              <tr key={u.id}>
-                <td>
-                  <strong>{u.display_name || u.username}</strong>
-                  {u.display_name && <span className="muted small"> · {u.username}</span>}
-                  {u.id === self?.id && <span className="muted small"> {t("users.you")}</span>}
-                </td>
-                <td>
-                  <span className="badge">{u.role === "admin" ? t("common.admin") : t("common.user")}</span>
-                </td>
-                <td>
-                  <span className={`badge ${u.is_active ? "ok" : ""}`}>
-                    {u.is_active ? t("users.active") : t("users.inactive")}
-                  </span>
-                </td>
-                <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
-                  <button className="btn sm ghost" title={t("users.resetPassword")} onClick={() => passwortZuruecksetzen(u)}>
-                    <Icon name="key" size={15} />
-                  </button>
-                  {u.id !== self?.id && (
-                    <>
-                      <button className="btn sm ghost" title={u.is_active ? t("users.inactive") : t("users.active")} onClick={() => aktivUmschalten(u)}>
-                        <Icon name={u.is_active ? "eye-off" : "eye"} size={15} />
-                      </button>
-                      <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(u)}>
-                        <Icon name="trash" size={15} />
-                      </button>
-                    </>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <DataTable
+          id="users"
+          rows={users}
+          getRowKey={(u) => u.id}
+          empty={t("users.title")}
+          columns={userColumns}
+        />
       </div>
     </div>
   );