⚡Vibe Coding

Daten-Tabellen mit TanStack

Professionelle Tabellen die alles koennen

TanStack Table ist die maechtigste Tabellen-Library fuer React. Sortierung, Filter, Pagination, alles dabei. Kombiniert mit Shadcn bekommst du Tabellen die aussehen wie in einer SaaS-App.

Pro-Tip — Der schnelle Weg

Nutze TanStack Table headless und style mit Shadcn. So hast du volle Kontrolle ueber das Design und trotzdem alle Features.

Seite 1

Installation

Installiere TanStack Table und die Shadcn Table Komponente. TanStack liefert die Logik, Shadcn das Styling.

npm install @tanstack/react-table
npx shadcn@latest add table

Columns definieren

Definiere deine Spalten als Array. Jede Spalte hat einen Header, einen AccessorKey fuer die Daten und optional eine eigene Cell-Komponente.

const columns = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'E-Mail' },
{
accessorKey: 'status',
header: 'Status',
cell: ({ row }) => (
<Badge variant={row.getValue('status') === 'aktiv' ? 'default' : 'secondary'}>
{row.getValue('status')}
</Badge>
)
}
]

Table Hook nutzen

useReactTable ist der zentrale Hook. Er nimmt Daten, Spalten und Optionen und gibt dir alles was du zum Rendern brauchst.

const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
})

Sortierung und Pagination

Sortierung und Pagination sind eingebaut. Klick auf den Header sortiert, Buttons am Ende blaettern durch Seiten. Alles client-seitig ohne API-Calls.

Server-Side fuer grosse Daten

Bei mehr als 1000 Zeilen nutze Server-Side Pagination. Schicke page und pageSize an deine API und lade nur die aktuelle Seite.

Seite 2

Warum das funktioniert

Headless Design gibt dir volle Kontrolle ueber jeden Pixel
Eingebaute Sortierung und Pagination sparen Stunden Entwicklung
TypeScript-Support verhindert Fehler bei komplexen Datenstrukturen
Server-Side Pagination skaliert fuer Millionen von Zeilen

Tipps

Column Definitions ausserhalb der Komponente definieren fuer Performance
Nutze ColumnDef Type fuer TypeScript-Unterstuetzung
Shadcn Table Komponente als Basis fuer konsistentes Design
Fuzzy-Filter mit TanStack fuer Suchfunktion in der Tabelle

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen