Table: HextaUI e shadcn/ui

O Table do HextaUI mantém os nomes e tokens de tema do shadcn/ui e instala com a mesma CLI. Esta página lista o que muda, lido do código de ambos. O lado do shadcn/ui é o registro base-vega em 2026-10-16.

Visão geral

Medida	HextaUI	shadcn/ui
Partes exportadas	8	8
Props tratadas pelo wrapper	13	0
Linhas de código	298	115
Dependências do npm	`class-variance-authoritycn`	`cn`
Construído com	`theme`	–

Mais código não é melhor por si só. A maior parte das linhas extras do HextaUI cuida de estados, animações e casos extremos que você escreveria por conta própria.

Props que o HextaUI adiciona

Props que o próprio wrapper do HextaUI trata e o do shadcn/ui não. Props repassadas direto ao Base UI ou à biblioteca por baixo ficam de fora, porque as duas versões as aceitam.

Prop	O que faz
`wrap`Table	Permite que o texto das células quebre e alinha as linhas ao topo.
`scrollFade`Table	Esmaece as bordas que têm mais conteúdo para rolar. Ignorado quando há colunas fixas.
`stickyHeader`Table	Mantém o cabeçalho à vista. Dê ao contêiner uma altura máxima por containerClassName.
`containerClassName`Table	Classes para o contêiner de rolagem.
`containerRef`Table	Ref para o contêiner de rolagem.
`align`TableHead	end também muda para números tabulares para os dígitos se alinharem.
`pinned`TableHead	Mantém a coluna à vista enquanto a tabela rola de lado. Defina o mesmo valor no cabeçalho e em todas as células.
`pinnedEdge`TableHead	Desenha uma sombra suave na borda interna da última coluna fixa enquanto há conteúdo escondido atrás dela.
`align`TableCell	end também muda para números tabulares para os dígitos se alinharem.
`pinned`TableCell	Mantém a coluna à vista enquanto a tabela rola de lado. Defina o mesmo valor no cabeçalho e em todas as células.
`pinnedEdge`TableCell	Desenha uma sombra suave na borda interna da última coluna fixa enquanto há conteúdo escondido atrás dela.

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`variant`Table	–	`defaultsurface`	–
`size`Table	–	`smdefault`	–

A versão do 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>
  )
}

Todos os estados, o mapa de teclado e a referência da API estão na página do componente.

7 dos seus exemplos também têm uma página própria.

Troque um componente

Rode o comando add com --overwrite para substituir o arquivo do shadcn/ui em @/components/ui e revise o diff no git antes de mantê-lo. Os imports continuam iguais e os componentes que você não trocar seguem funcionando.

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

Cada prop da tabela acima é nova, então o código escrito para o shadcn/ui ainda não a passa.
Antes de trocar, confira qualquer parte ou variante listada só para o shadcn/ui e associe-a à mais próxima do HextaUI.