Table: HextaUI y shadcn/ui

El Table de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	8	8
Props que gestiona el envoltorio	13	0
Líneas de código	298	115
Dependencias de npm	`class-variance-authoritycn`	`cn`
Construido con	`theme`	–

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`wrap`Table	Permite que el texto de las celdas se ajuste y alinea las filas arriba.
`scrollFade`Table	Desvanece los bordes que tienen más contenido por desplazar. Se omite cuando hay columnas fijadas.
`stickyHeader`Table	Mantiene el encabezado a la vista. Dale al contenedor una altura máxima mediante containerClassName.
`containerClassName`Table	Clases para el contenedor de scroll.
`containerRef`Table	Ref al contenedor de scroll.
`align`TableHead	end también cambia a números tabulares para que los dígitos se alineen.
`pinned`TableHead	Mantiene la columna a la vista mientras la tabla se desplaza lateralmente. Define el mismo valor en su encabezado y en todas sus celdas.
`pinnedEdge`TableHead	Dibuja una sombra suave en el borde interior de la última columna fijada mientras hay contenido oculto detrás.
`align`TableCell	end también cambia a números tabulares para que los dígitos se alineen.
`pinned`TableCell	Mantiene la columna a la vista mientras la tabla se desplaza lateralmente. Define el mismo valor en su encabezado y en todas sus celdas.
`pinnedEdge`TableCell	Dibuja una sombra suave en el borde interior de la última columna fijada mientras hay contenido oculto detrás.

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`variant`Table	–	`defaultsurface`	–
`size`Table	–	`smdefault`	–

La versión de 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 los estados, el mapa de teclado y la referencia de la API están en la página del componente.

7 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

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

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.