Table: HextaUI und shadcn/ui

Table von HextaUI behält die Namen und Theme-Tokens von shadcn/ui und wird mit derselben CLI installiert. Diese Seite listet die Unterschiede auf, aus dem Code beider gelesen. Die shadcn/ui-Seite ist das base-vega-Registry mit Stand 2026-10-16.

Auf einen Blick

Kennzahl	HextaUI	shadcn/ui
Exportierte Teile	8	8
Props, die der Wrapper verarbeitet	13	0
Codezeilen	298	115
npm-Abhängigkeiten	`class-variance-authoritycn`	`cn`
Aufgebaut aus	`theme`	–

Mehr Code ist für sich genommen nicht besser. Die meisten zusätzlichen Zeilen in HextaUI behandeln Zustände, Bewegung und Randfälle, die du sonst selbst schreiben würdest.

Props, die HextaUI ergänzt

Props, die der HextaUI-Wrapper selbst verarbeitet und der shadcn/ui-Wrapper nicht. Props, die direkt an Base UI oder die zugrunde liegende Bibliothek gehen, fehlen hier, weil beide Versionen sie annehmen.

Prop	Was sie bewirkt
`wrap`Table	Lass Zellentext umbrechen und richte Zeilen oben aus.
`scrollFade`Table	Blende die Ränder aus, hinter denen es mehr zu scrollen gibt. Entfällt, wenn Spalten fixiert sind.
`stickyHeader`Table	Halte den Header im Blick. Gib dem Container über containerClassName eine maximale Höhe.
`containerClassName`Table	Klassen für den Scroll-Container.
`containerRef`Table	Ref auf den Scroll-Container.
`align`TableHead	end schaltet außerdem auf tabellarische Ziffern um, damit Ziffern fluchten.
`pinned`TableHead	Halte die Spalte im Blick, während die Tabelle seitlich scrollt. Setze denselben Wert an ihrem Header und jeder Zelle.
`pinnedEdge`TableHead	Zeichne einen weichen Schatten am inneren Rand der letzten fixierten Spalte, solange Inhalt dahinter verborgen ist.
`align`TableCell	end schaltet außerdem auf tabellarische Ziffern um, damit Ziffern fluchten.
`pinned`TableCell	Halte die Spalte im Blick, während die Tabelle seitlich scrollt. Setze denselben Wert an ihrem Header und jeder Zelle.
`pinnedEdge`TableCell	Zeichne einen weichen Schatten am inneren Rand der letzten fixierten Spalte, solange Inhalt dahinter verborgen ist.

Varianten

Prop	In beiden	Nur HextaUI	Nur shadcn/ui
`variant`Table	–	`defaultsurface`	–
`size`Table	–	`smdefault`	–

Die HextaUI-Version

Invoice	Client	Status	Amount
INV-0418	Northwind	Paid	$2,400.00
INV-0419	Globex	Pending	$860.00
INV-0420	Initech	Paid	$1,320.50
INV-0421	Umbrella	Overdue	$415.00
Total			$4,995.50

import { Badge, BadgeDot } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const invoices = [
  { id: "INV-0418", client: "Northwind", status: "Paid", amount: 2400 },
  { id: "INV-0419", client: "Globex", status: "Pending", amount: 860 },
  { id: "INV-0420", client: "Initech", status: "Paid", amount: 1320.5 },
  { id: "INV-0421", client: "Umbrella", status: "Overdue", amount: 415 },
]

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
})

const tones = {
  Paid: "success",
  Pending: "info",
  Overdue: "destructive",
} as const

export function TableDemo() {
  const total = invoices.reduce((sum, invoice) => sum + invoice.amount, 0)

  return (
    <Table variant="surface" className="min-w-md">
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Client</TableHead>
          <TableHead>Status</TableHead>
          <TableHead align="end">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.id}>
            <TableHead scope="row">{invoice.id}</TableHead>
            <TableCell>{invoice.client}</TableCell>
            <TableCell>
              <Badge variant={tones[invoice.status as keyof typeof tones]}>
                <BadgeDot />
                {invoice.status}
              </Badge>
            </TableCell>
            <TableCell align="end">{currency.format(invoice.amount)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell align="end">{currency.format(total)}</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Alle Zustände, die Tastaturbelegung und die API-Referenz stehen auf der Komponentenseite.

7 seiner Beispiele haben auch eine eigene Seite.

Eine Komponente wechseln

Führe den add-Befehl mit --overwrite aus, um die shadcn/ui-Datei in @/components/ui zu ersetzen, und prüfe den Diff in git, bevor du ihn behältst. Die Imports bleiben gleich, und Komponenten, die du nicht ersetzt, funktionieren weiter.

pnpm dlx shadcn@latest add https://hextaui.com/r/table.json --overwrite

Jede Prop in der Tabelle oben ist neu, daher übergeben Aufrufe, die für shadcn/ui geschrieben wurden, sie noch nicht.
Prüfe vor dem Wechsel jeden Teil und jede Variante, die nur bei shadcn/ui steht, und ordne sie dem nächsten HextaUI-Gegenstück zu.