React Editable Table: Spreadsheet-Grid oder Inline Edit

Eine React Editable Table klingt nach einer einzigen Komponente, aber gemeint sind damit zwei verschiedene Dinge. Manchmal willst du eine ganz normale Datentabelle, in der sich ein Preis oder ein Status direkt korrigieren lässt. Manchmal willst du eine kleine Tabellenkalkulation in der App: eine Zelle überschreiben, einen Bereich markieren, 40 Zeilen aus Excel einfügen und Strg+Z drücken, wenn etwas schiefgeht. Das sind zwei verschiedene Umsetzungen mit unterschiedlichem Aufwand. Dieser Guide zeigt beide mit Komponenten von Wingo UI, das Editable Grid für den Spreadsheet-Fall und Inline Edit in der Data Table für den leichteren, und hilft dir bei der Wahl.

Welche Art von React Editable Table brauchst du?

Schau dir an, was die Leute auf dem Screen die meiste Zeit tun. Wenn sie vor allem lesen, suchen und filtern und nur ab und zu ein Feld ändern, reichen ein paar editierbare Zellen in einer normalen Datentabelle. Wenn sie in einem Rutsch viele Zeilen erfassen oder korrigieren, brauchen sie ein Grid, das sich wie eine Tabellenkalkulation verhält. Mit weniger müssen sie sich per Tab durch ein Input nach dem anderen hangeln.

Hat shadcn eine editierbare Tabelle?

Nein. Die Data-Table-Seite von shadcn (opens in a new tab) (geprüft am 5. November 2026) versteht sich ausdrücklich als Anleitung, mit der du deine eigene Tabelle auf TanStack Table baust, nicht als fertige Komponente. Sie deckt Sortieren, Filtern, Pagination, Spaltensichtbarkeit und Zeilenauswahl ab. Das Bearbeiten von Zellen gehört nicht dazu. Eine „shadcn editable table“ bedeutet also, dass du die Editoren, die Tastatursteuerung und das Speichern selbst im Cell-Renderer schreibst. Für eine editierbare Spalte ist das in Ordnung. Teuer wird es, sobald du Bereichsauswahl und Einfügen brauchst, und genau da lohnt sich ein eigenes React Editable Grid. Die TanStack-Seite der Geschichte findest du in unserer Anleitung zur Data Table mit TanStack Table v9, die das Anzeigen der Daten Schritt für Schritt aufbaut.

Wie baust du in React ein editierbares Grid im Stil einer Tabellenkalkulation?

Du beschreibst die Spalten mit je einem Typ und übergibst die Zeilen. Den Rest erledigt das Editable Grid: die aktive Zelle, die Bereichsauswahl, die Editoren, die Bewegung per Tastatur, die Zwischenablage, Undo und Validierung. Installier es mit:

npx wingo-ui@latest add editable-grid

Jede Zeile braucht eine eindeutige id als String. Die id einer Spalte ist der Schlüssel in der Zeile, den sie bearbeitet, und type wählt den Editor und den Parser: text, number, currency, select, date oder checkbox.

"use client"

import { useState } from "react"
import { EditableGrid, type GridColumn, type GridRow } from "@/components/ui/editable-grid"

type Product = GridRow & {
  name: string
  category: string
  price: number | null
  stock: number | null
  active: boolean
}

const columns: GridColumn<Product>[] = [
  { id: "name", header: "Produkt", required: true, width: 240 },
  {
    id: "category",
    header: "Kategorie",
    type: "select",
    options: [
      { value: "licenses", label: "Lizenzen" },
      { value: "services", label: "Dienstleistungen" },
    ],
  },
  { id: "price", header: "Preis netto", type: "currency", currency: "USD", min: 0 },
  { id: "stock", header: "Bestand", type: "number", step: 1, min: 0 },
  { id: "active", header: "Aktiv", type: "checkbox" },
]

export function PriceList() {
  const [rows, setRows] = useState<Product[]>([
    { id: "p-1", name: "Business-Lizenz (Monat)", category: "licenses", price: 49, stock: 120, active: true },
    { id: "p-2", name: "Einrichtung und Schulung (Stunde)", category: "services", price: 65, stock: null, active: true },
  ])

  return (
    <EditableGrid
      title="Preisliste 2026"
      columns={columns}
      value={rows}
      onValueChange={setRows}
      locale="en-US"
      createRow={() => ({ id: crypto.randomUUID(), name: "", category: "licenses", price: null, stock: null, active: true })}
    />
  )
}

Die Tastatur funktioniert so, wie es Leute aus Tabellenkalkulationen gewohnt sind. Tippen ersetzt den Inhalt der Zelle, Enter, F2 oder ein Doppelklick bearbeiten ihn. Enter übernimmt den Wert und springt nach unten, Tab übernimmt ihn und springt nach rechts, Escape bricht ab. Shift mit den Pfeiltasten, Shift+Klick oder Ziehen mit der Maus markiert einen Bereich, eine Zeilennummer markiert die Zeile und ein Spaltenkopf die Spalte. Das ganze Grid ist ein einziger Tab-Stopp, also verlässt man es mit der Tastatur weiterhin per Tab, solange man nichts bearbeitet.

Ab 100 Zeilen (der Standardwert von virtualThreshold) rendert das Grid nur die Zeilen, die innerhalb der height des Scroll-Containers sichtbar sind (standardmäßig 480px; mit height={0} wächst es mit den Zeilen und virtualisiert nie). Die Doku enthält ein Beispiel mit 2.000 Zeilen und einem Frame-Zähler, damit du es auf deiner eigenen Hardware prüfen kannst. Spalten werden nicht virtualisiert, das Grid ist also für die unter 30 Spalten gedacht, die ein formularartiges Sheet hat. Für schreibgeschützte Tabellen mit 100.000 Zeilen zeigt unser Guide zur React Virtualized Table das Setup mit TanStack Virtual.

Wie funktioniert Kopieren und Einfügen aus Excel in einem React-Grid?

Excel und Google Sheets legen einen kopierten Bereich als reinen Text in die Zwischenablage: eine Zeile pro Tabellenzeile, ein Tab zwischen den Zellen. Das Grid liest das bei Strg+V, schreibt den Block ab der aktiven Zelle und hängt Zeilen an, wenn der eingefügte Block mehr Zeilen hat, als darunter noch übrig sind (abschalten mit allowPasteNewRows={false}). Strg+C macht das Umgekehrte, ein aus dem Grid kopierter Bereich lässt sich also direkt in eine Tabellenkalkulation einfügen.

Schwierig ist nicht das Aufteilen, sondern das Umwandeln. Ein eingefügtes „1,234.50“ ist in en-US 1234.5, bedeutet in de-DE aber etwas anderes, und „10/06/2026“ ist in den USA ein anderer Tag als in Europa. Das Grid parst Zahlen, Geldbeträge und Datumswerte in seinem locale, ordnet Options-Labels ihren Werten zu und liest „true“, „yes“ oder „x“ als angehakte Checkbox. In Zahlen-, Geld-, Datums- und Auswahlspalten bleibt Text, der sich nicht parsen lässt, als Text in der Zelle stehen und wird als ungültig markiert, damit nichts unbemerkt verloren geht. Beide Helfer sind exportiert, falls du sie woanders brauchst, zum Beispiel bei einem CSV-Import:

import { coerceCellValue, parseClipboardGrid } from "@/components/ui/editable-grid"

const cells = parseClipboardGrid("Etikettendrucker\t2\t1,249.00\n")
// [["Etikettendrucker", "2", "1,249.00"]]

coerceCellValue("1,249.00", { id: "price", header: "Preis", type: "currency" }, "en-US")
// 1249

Für ganze Dateien statt Blöcken aus der Zwischenablage ordnet die Komponente CSV Import Spalten zu und zeigt Fehler in einer Vorschau, bevor irgendetwas übernommen wird. Unser Guide zum React CSV Importer beschreibt diesen Ablauf.

Wie validierst du Zellen und speicherst sie auf dem Server?

Die Validierung hängt an der Spalte. required, min, max, step und options decken die üblichen Regeln ab, und validate(value, row) gibt für alles andere eine Meldung zurück. Ein ungültiger Wert bleibt mit einer roten Ecke in der Zelle stehen, die Meldung erscheint unter der aktiven Zelle, und die Toolbar zeigt die Anzahl der Fehler und springt zum nächsten. Dass der falsche Wert stehen bleibt, ist wichtig: Nach dem Einfügen von 200 Zeilen will man die drei falschen Zellen korrigieren und sie nicht neu abtippen.

Gespeichert wird nach einem festen Muster. onCellChange feuert für jede übernommene Zelle, onCellsChange für Batches (Einfügen, ein geleerter Bereich, Undo und Redo). Gibst du false oder ein abgelehntes Promise zurück, setzt das Grid die alten Werte wieder ein:

<EditableGrid
  columns={columns}
  value={rows}
  onValueChange={setRows}
  onCellChange={async ({ rowId, columnId, value }) => {
    const res = await fetch(`/api/products/${rowId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ [columnId]: value }),
    })
    if (!res.ok) throw new Error("Speichern fehlgeschlagen")
  }}
  onCellsChange={async (changes) => {
    const res = await fetch("/api/products/batch", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(changes),
    })
    if (!res.ok) throw new Error("Speichern fehlgeschlagen")
  }}
/>

Auf der Serverseite zählen zwei Details. Ein fehlgeschlagenes Speichern entfernt den Schritt auch aus dem Undo-Verlauf, Strg+Z spielt also nie eine Änderung erneut ab, die der Server abgelehnt hat. Und die Zell-Callbacks liefern nur Zellwerte: Hinzugefügte oder gelöschte Zeilen, auch die Zeilen, die ein langer eingefügter Block anhängt, bekommst du über onValueChange. Lass also entweder den Batch-Endpunkt unbekannte IDs per Upsert anlegen oder synchronisier hinzugefügte und gelöschte Zeilen aus den Zeilen, die in onValueChange ankommen.

Wenn die Zeilen nur zusammen Sinn ergeben, etwa bei einem Import oder einer Bestellung mit Positionen, verzichte auf das Speichern pro Zelle: Nutz das Grid als kontrollierte Komponente und schick rows über einen einzigen Speichern-Button, sobald die Fehleranzahl null ist. Speziell für Bestellungen gibt es die Komponente Invoice Line Items mit eingebauten Summen und Steuern.

Wie funktionieren Undo und Redo?

Strg+Z oder Cmd+Z macht rückgängig, Shift+Strg+Z oder Strg+Y stellt wieder her, und jedes Undo oder Redo läuft wie jeder andere Batch über onCellsChange, damit der Server synchron bleibt. Ein eingefügter Block oder ein geleerter Bereich ist ein Schritt, nicht einer pro Zelle, und gelöschte Zeilen kommen an ihrer ursprünglichen Stelle zurück. Das Grid merkt sich die letzten 200 Schritte. Du kannst es auch über eigene Buttons steuern: setApi gibt dir undo(), redo(), addRow(), deleteRows(ids) und focusCell(ref). So bietet das Beispiel zum Sammellöschen auf der Doku-Seite ein Undo in einem Toast an.

Wann reicht Inline Edit in einer Datentabelle?

Wenn die Tabelle vor allem zum Lesen da ist. Eine CRM-Kontaktliste, eine Bestellübersicht oder eine Benutzerverwaltung braucht zuerst Suche, Filter, Sortierung und Zeilenaktionen, und erst danach Bearbeitung. Wer daraus eine Tabellenkalkulation macht, verschlechtert das Lesen. Setz ein Inline Edit in die Zellen, die sich oft ändern, und lass den Rest als Text:

import { DataTable, createColumns } from "@/components/ui/data-table"
import { InlineEdit } from "@/components/ui/inline-edit"

type Order = { id: string; customer: string; status: string; amount: number }

const STATUSES = [
  { value: "open", label: "Offen" },
  { value: "paid", label: "Bezahlt" },
  { value: "refunded", label: "Erstattet" },
]

async function saveOrder(id: string, patch: Partial<Order>) {
  const res = await fetch(`/api/orders/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(patch),
  })
  if (!res.ok) throw new Error("Die Bestellung konnte nicht gespeichert werden")
}

const col = createColumns<Order>()
const columns = col([
  col.accessor("customer", { header: "Kunde", filter: "text" }),
  col.accessor("status", {
    header: "Status",
    filter: "multi-select",
    cell: ({ row }) => (
      <InlineEdit
        type="select"
        size="sm"
        aria-label={`Status der Bestellung von ${row.customer}`}
        options={STATUSES}
        defaultValue={row.status}
        onSave={(status) => saveOrder(row.id, { status })}
      />
    ),
  }),
  col.accessor("amount", {
    header: "Betrag",
    align: "end",
    cell: ({ row }) => (
      <InlineEdit
        type="number"
        size="sm"
        aria-label={`Betrag der Bestellung von ${row.customer}`}
        defaultValue={row.amount}
        locale="en-US"
        format={{ style: "currency", currency: "USD" }}
        validate={(v) => (v == null || v < 0 ? "Gib einen Betrag von 0 oder mehr ein" : null)}
        onSave={(amount) => saveOrder(row.id, { amount: amount ?? 0 })}
      />
    ),
  }),
])

export function Orders({ orders }: { orders: Order[] }) {
  return <DataTable data={orders} columns={columns} caption="Bestellungen" locale="en-US" />
}

Inline Edit speichert optimistisch: Der neue Wert erscheint sofort mit einem kleinen Spinner, und wenn onSave fehlschlägt, springt er zurück, wackelt kurz und zeigt den Fehler. Enter speichert, Escape bricht ab, Tab oder ein Klick daneben speichert. Die Data Table ignoriert Klicks auf Buttons und Inputs innerhalb einer Zeile, das Bearbeiten einer Zelle löst also nicht zusätzlich den Klick oder die Auswahl der Zeile aus.

Wie funktioniert eine editierbare Tabelle in React auf dem Smartphone?

Sie funktioniert, wenn das Bearbeiten aus der Zelle in ein Formular wandert. Ein Raster aus 40px hohen Zellen ist mit dem Daumen schwer zu treffen, und ein Editor in einer Zelle, die halb aus dem Bildschirm ragt, kämpft mit der Bildschirmtastatur. Das Editable Grid behält unter 768px die Tabellenansicht bei, ändert aber das Bearbeiten: Das Grid scrollt in beide Richtungen mit fixierter erster Spalte, ein Tipp markiert eine Zelle, und ein zweiter Tipp (oder ein Tipp auf die Zeilennummer) öffnet die ganze Zeile als Formular in einem Bottom Sheet mit dem Button „Save row“. Langes Drücken auf die Zeilennummer zeigt Einfügen, Duplizieren und Löschen. Auf Touchscreens wachsen die Zeilen auf 44px.

Die Data Table geht noch weiter und macht unter 768px aus Zeilen Karten. Ein Inline Edit in einer Karte funktioniert weiterhin, mit 44px großen Zielen zum Speichern und Abbrechen, und sein Select öffnet sich als Bottom Sheet. Warum wir auf Karten setzen, steht in unserem Artikel über responsive Tabellen auf dem Smartphone.

Wie schlägt sich das im Vergleich zu AG Grid und MUI?

Beide sind ausgereifte Grids mit deutlich mehr Features, und beide stecken die Spreadsheet-Funktionen in eine kostenpflichtige Stufe. Einfaches Bearbeiten von Zellen ist bei beiden kostenlos (AG Grid Community, MUI X Data Grid). Fakten Stand 5. November 2026, aus der Dokumentation der Anbieter:

Nimm AG Grid oder MUI, wenn du etwas brauchst, das unser Grid nicht hat: Sortieren und Filtern im Grid selbst, Formeln, das Ausfüllkästchen (Fill Handle), Gruppieren von Zeilen, Pivot-Tabellen, Export als Excel-Datei oder serverseitige Row Models für Millionen von Zeilen. Nimm das Editable Grid, wenn du eine React Spreadsheet Component als Quellcode in deinem Repo willst, gestylt mit deinen Tailwind Tokens, mit einem Layout fürs Smartphone und mit genau den Bearbeitungsfunktionen, die die meisten Business-Screens wirklich nutzen.

Wo fängst du am besten an?

Öffne die Doku zum Editable Grid: den Playground und Beispiele für Einfügen aus Excel, 2.000 Zeilen, Validierung, Sammellöschen mit Undo, einen Stundenzettel und das Zeilenformular auf dem Smartphone. Editable Grid, Data Table und Inline Edit gehören zu Wingo UI Pro: $8 im Monat, $80 im Jahr oder einmalig $150, Stand November 2026 (Preise). Für die anderen Eingabefelder auf einem Bearbeitungs-Screen lies den Guide zu React-Formularkomponenten. Weitere Guides findest du in der Kategorie Komponenten-Guides.

Häufige Fragen

Hat shadcn/ui eine Komponente für editierbare Tabellen?

Nein. Die Data-Table-Seite von shadcn ist eine Anleitung, mit der du deine eigene Tabelle auf TanStack Table baust. Sie deckt Sortieren, Filtern, Pagination, Spaltensichtbarkeit und Zeilenauswahl ab, aber kein Bearbeiten von Zellen. Dafür renderst du eigene Inputs im Cell-Renderer oder nimmst eine Grid-Komponente.

Wie füge ich Daten aus Excel in eine React-Tabelle ein?

Hör auf das paste-Event des fokussierten Grids, lies event.clipboardData.getData("text/plain") und teil den Text an Zeilenumbrüchen und Tabs auf: Excel und Google Sheets legen einen kopierten Bereich als tabgetrennte Werte in die Zwischenablage. Wandle dann jeden String in den Typ der Spalte um (Zahlen im Locale der Person, Datumswerte, Options-Labels in ihre Werte) und schreib den Block ab der aktiven Zelle.

Wie mache ich eine einzelne Zelle in einer React-Tabelle editierbar?

Render im Cell-Renderer dieser Spalte ein Inline-Edit-Element: Es zeigt den Wert als Text, wird bei Klick oder Enter zum Input und ruft bei Enter oder Blur eine Speicherfunktion auf. Gib die ID der Zeile im Speicheraufruf mit, damit der Server weiß, welcher Datensatz sich geändert hat, und setz den Wert zurück, wenn die Anfrage scheitert.

Sollte eine editierbare Tabelle jede Zelle einzeln oder die ganze Tabelle auf einmal speichern?

Speichere pro Zelle, wenn jede Änderung für sich steht, etwa ein Preis oder ein Status, und setz nur die Zelle zurück, die scheitert. Speichere das ganze Sheet mit einem Button, wenn die Zeilen nur zusammen Sinn ergeben, etwa bei einem Import oder einer Bestellung mit Positionen, und validiere alles vor der Anfrage.

Sind Kopieren und Einfügen und die Bereichsauswahl in AG Grid kostenlos?

Stand November 2026 kennzeichnet die Dokumentation von AG Grid Zwischenablage-Funktionen und die Zell- bzw. Bereichsauswahl als Enterprise-Features, für die du im Produktivbetrieb eine kostenpflichtige Lizenz brauchst. Einfaches Bearbeiten von Zellen gibt es in der kostenlosen Community Edition.