Table

Tabla de datos con subcomponentes para estructurar cabecera, cuerpo y celdas.

---

Import

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from '@imansi/ui';

---

Uso básico

<Table>
  <TableCaption>Lista de usuarios</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Nombre</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Rol</TableHead>
      <TableHead className="text-right">Acciones</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Juan Pérez</TableCell>
      <TableCell>juan@ejemplo.com</TableCell>
      <TableCell>Admin</TableCell>
      <TableCell className="text-right">
        <Button size="sm" variant="ghost">Editar</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

---

Con footer (totales)

<TableFooter>
  <TableRow>
    <TableCell colSpan={3}>Total</TableCell>
    <TableCell className="text-right">$1,234.00</TableCell>
  </TableRow>
</TableFooter>

---

Con Badge de estado

<TableCell>
  <Badge variant="success">Activo</Badge>
</TableCell>
<TableCell>
  <Badge variant="outline">Inactivo</Badge>
</TableCell>

---

Con Avatar

<TableRow>
  <TableCell>
    <div className="flex items-center gap-3">
      <Avatar className="h-8 w-8">
        <AvatarImage src={usuario.avatar} />
        <AvatarFallback>{usuario.iniciales}</AvatarFallback>
      </Avatar>
      <div>
        <p className="font-medium">{usuario.nombre}</p>
        <p className="text-sm text-muted-foreground">{usuario.email}</p>
      </div>
    </div>
  </TableCell>
</TableRow>

---

Tabla responsive

<div className="rounded-md border">
  <Table>
    {/* ... */}
  </Table>
</div>

---

Subcomponentes

Componente	Uso
Table	Contenedor principal
TableHeader	Cabecera (<thead>)
TableBody	Cuerpo (<tbody>)
TableFooter	Pie (<tfoot>)
TableRow	Fila (<tr>)
TableHead	Celda de cabecera (<th>)
TableCell	Celda de datos (<td>)
TableCaption	Título de la tabla (<caption>)

Todos aceptan className y props nativas del elemento HTML que renderizan.

---

Accesibilidad

• Estructura semántica correcta (<table>, <thead>, <tbody>)
• TableHead renderiza <th> con scope="col" implícito
• Compatible con lectores de pantalla
• Navegable con teclado si las celdas contienen elementos interactivos