Table : HextaUI et shadcn/ui

Le Table de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.

En un coup d’œil

Mesure	HextaUI	shadcn/ui
Parties exportées	8	8
Props gérées par l’enveloppe	13	0
Lignes de code	298	115
Dépendances npm	`class-variance-authoritycn`	`cn`
Construit avec	`theme`	–

Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.

Props ajoutées par HextaUI

Les props gérées par l’enveloppe HextaUI elle-même et pas par celle de shadcn/ui. Les props transmises telles quelles à Base UI ou à la bibliothèque sous-jacente sont exclues, car les deux versions les acceptent.

Prop	Rôle
`wrap`Table	Laisse le texte des cellules passer à la ligne et aligne les lignes en haut.
`scrollFade`Table	Estompe les bords qui ont plus de contenu à faire défiler. Ignoré quand des colonnes sont épinglées.
`stickyHeader`Table	Garde l'en-tête visible. Donnez au conteneur une hauteur maximale via containerClassName.
`containerClassName`Table	Classes pour le conteneur de défilement.
`containerRef`Table	Ref vers le conteneur de défilement.
`align`TableHead	end passe aussi aux chiffres tabulaires pour aligner les chiffres.
`pinned`TableHead	Garde la colonne visible pendant le défilement latéral du tableau. Définissez la même valeur sur son en-tête et sur chaque cellule.
`pinnedEdge`TableHead	Trace une ombre douce sur le bord intérieur de la dernière colonne épinglée tant que du contenu est caché derrière.
`align`TableCell	end passe aussi aux chiffres tabulaires pour aligner les chiffres.
`pinned`TableCell	Garde la colonne visible pendant le défilement latéral du tableau. Définissez la même valeur sur son en-tête et sur chaque cellule.
`pinnedEdge`TableCell	Trace une ombre douce sur le bord intérieur de la dernière colonne épinglée tant que du contenu est caché derrière.

Variantes

Prop	Dans les deux	Seulement HextaUI	Seulement shadcn/ui
`variant`Table	–	`defaultsurface`	–
`size`Table	–	`smdefault`	–

La version HextaUI

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>
  )
}

Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.

7 de ses exemples ont aussi leur propre page.

Changer un composant

Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.

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

Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.