Table (Tabla)

Componente responsivo para mostrar datos tabulares de forma estructurada.

Ejemplo Básico

Una lista de tus facturas recientes.
Factura Estado Método Monto
INV001 Pagado Tarjeta de Crédito $250.00
INV002 Pendiente PayPal $150.00
INV003 Fallido Transferencia Bancaria $350.00
Code Snippet
<TableComponent>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead class="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell class="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell class="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell class="font-medium">INV002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell>PayPal</TableCell>
      <TableCell class="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
</TableComponent>