Spalten definieren und Zeilen rendern

Jede Spalte in TanStack Table wird durch ein ColumnDef-Objekt beschrieben. Die beiden wichtigsten Felder sind accessorKey (der Eigenschaftsname Ihres Datenobjekts) und header (die Zeichenfolge mit der Spaltenbezeichnung oder eine Render-Funktion).

Der accessorKey-Ansatz eignet sich ideal für flache Daten; für komplexe oder berechnete Werte benötigen Sie accessorFn.

Wenn Ihre Daten eine direkte Eigenschaft wie name oder email enthalten, verwenden Sie accessorKey: 'name'. Wenn Sie einen Wert berechnen müssen (z. B. durch das Kombinieren von firstName und lastName), verwenden Sie accessorFn: row => row.firstName + ' ' + row.lastName.

Beide sind vollständig typisiert, wenn Sie das Generic für die Zeilendaten an ColumnDef übergeben.

Das Feld cell in einer ColumnDef akzeptiert eine Funktion, die den Zellkontext empfängt und JSX zurückgibt. So rendern Sie Badges, Schaltflächen, Bilder oder jede andere benutzerdefinierte UI innerhalb einer Zelle.

Für einfache Textwerte genügt cell.renderValue(). Für alles, was darüber hinausgeht, destrukturieren Sie die benötigten Informationen aus cell.getContext().

Definieren Sie Ihre Spalten außerhalb der Komponente, damit sie nicht bei jedem Rendern neu erstellt werden. Übergeben Sie das Array zusammen mit Ihren Daten und getCoreRowModel an useReactTable.

TypeScript leitet die Spaltentypen ab, wenn Sie ColumnDef mit Ihrem Datentyp annotieren, und bietet Ihnen dadurch Autovervollständigung für accessorKey-Werte.

getCoreRowModel ist eine Factory-Funktion, die aus @tanstack/react-table importiert wird. Sie übergeben ihren Rückgabewert an useReactTable, um der Instanz mitzuteilen, wie sie die grundlegende Zeilenliste aus Ihrem Daten-Array erstellen soll.

Weitere Row Models (für Sortierung, Filterung und Paginierung) werden darübergelegt, indem Sie zusätzliche Model-Factories übergeben.

Rufen Sie table.getHeaderGroups() auf und iterieren Sie über das Ergebnis, um Ihr thead zu rendern. Jede Header-Gruppe besitzt ein headers-Array; jeder Header hat eine Spaltendefinition und eine ID.

Verwenden Sie flexRender(header.column.columnDef.header, header.getContext()), um den Header-Inhalt zu rendern, unabhängig davon, ob es sich um eine Zeichenfolge oder eine JSX zurückgebende Funktion handelt.

Rufen Sie table.getRowModel().rows auf und ordnen Sie jede Zeile einem tr-Element zu. Rufen Sie darin row.getVisibleCells() auf und ordnen Sie jede Zelle einem td zu.

Verwenden Sie flexRender(cell.column.columnDef.cell, cell.getContext()), um den Zellinhalt zu rendern und dabei jeden in der Spalte definierten benutzerdefinierten Zell-Renderer zu berücksichtigen.

flexRender ist eine Hilfsfunktion, die entweder eine React-Komponente, eine Funktion, die JSX zurückgibt, oder einen einfachen Wert akzeptiert und konsistent rendert. Dadurch können Spaltendefinitionen sowohl einfache Zeichenfolgen als auch vollständige Render-Funktionen für Header und Zellen verwenden.

Diese einheitliche API bedeutet, dass Sie vor dem Rendern nicht den Typ der Definition prüfen müssen.

cell.renderValue() gibt den rohen Accessor-Wert als Zeichenfolge formatiert zurück. Für mehr Kontrolle liefert cell.getContext() den vollständigen Rendering-Kontext einschließlich Zeile, Spalte, Tabelleninstanz und Rohwert.

Benutzerdefinierte Zell-Renderer verwenden den Kontext, um auf weitere Daten der zugehörigen Zeile außerhalb des einzelnen Accessor-Werts zuzugreifen.

Jede ColumnDef akzeptiert ein meta-Feld, an das Sie beliebige Metadaten wie isSticky: true oder alignment: 'right' anhängen können. Greifen Sie in Ihrem Renderer über column.columnDef.meta darauf zu.

Um Spalten links oder rechts zu pinnen, stellt TanStack Table einen Spalten-Pinning-State und Hilfsmethoden am Spaltenobjekt bereit.

Definieren Sie ein ColumnDef-Array mit accessorKey, header und dem optionalen cell. Rufen Sie useReactTable mit data, columns und getCoreRowModel auf. Iterieren Sie für das thead über getHeaderGroups und für das tbody über getRowModel().rows und verwenden Sie flexRender, um jeden Header und jede Zelle zu rendern.

Diese minimale Einrichtung ergibt eine voll funktionsfähige, vollständig individuell gestylte Tabelle.

Wann sollten Sie in einer TanStack-Table-Spaltendefinition accessorFn statt accessorKey verwenden?

Definieren Sie Spalten mit ColumnDef und verwenden Sie accessorKey für direkte Felder oder accessorFn für berechnete Werte. Übergeben Sie columns und getCoreRowModel an useReactTable und rendern Sie anschließend mit getHeaderGroups die Header und mit getRowModel().rows die Tabellenzeilen.

Das flexRender-Hilfsprogramm verarbeitet sowohl zeichenfolgenbasierte als auch funktionsbasierte Header- und Zellendefinitionen einheitlich.