# Table

> Una tabla de datos: cabecera con banda, columnas numéricas alineadas a la derecha y densidad compacta.

```tsx
import { Table, TableBody, TableCaption, TableCell, … } from "sebs7n-ui/table"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Con números a la derecha

`numeric` alinea a la derecha y usa cifras tabulares: las columnas de plata se comparan de un vistazo.

```tsx
import { Badge } from "sebs7n-ui/badge"
import { Button } from "sebs7n-ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "sebs7n-ui/dropdown-menu"
import { MoreHorizontalIcon } from "lucide-react"
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function Basico() {
  return (
    <Table>
      <TableCaption>Facturas emitidas en septiembre.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Nº</TableHead>
          <TableHead>Cliente</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead numeric>Importe</TableHead>
          <TableHead className="w-12" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {FACTURAS.map((factura) => (
          <TableRow key={factura.id}>
            <TableCell className="text-label-13-mono">{factura.id}</TableCell>
            <TableCell>{factura.cliente}</TableCell>
            <TableCell>
              <Badge color={factura.color} size="sm">
                {factura.estado}
              </Badge>
            </TableCell>
            <TableCell numeric>{factura.importe}</TableCell>
            <TableCell>
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={<Button aria-label={`Acciones de la factura ${factura.id}`} size="icon-sm" variant="ghost" />}
                >
                  <MoreHorizontalIcon />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>Ver</DropdownMenuItem>
                  <DropdownMenuItem>Descargar PDF</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell numeric>$ 265.600</TableCell>
          <TableCell />
        </TableRow>
      </TableFooter>
    </Table>
  )
}
```

### Densidad compacta

Para más de ~20 filas visibles.

```tsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function Compacta() {
  return (
    <Table density="compact">
      <TableHeader>
        <TableRow>
          <TableHead>Nº</TableHead>
          <TableHead>Cliente</TableHead>
          <TableHead numeric>Importe</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {FACTURAS.map((factura) => (
          <TableRow key={factura.id}>
            <TableCell className="text-label-13-mono">{factura.id}</TableCell>
            <TableCell>{factura.cliente}</TableCell>
            <TableCell numeric>{factura.importe}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

## Props

### Table

Hereda las props de `<table>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `density` | `"default" \| "compact"` | `"default"` | `compact` baja el alto de fila. Para listas largas. |
| `className` | `string` | — | — |

### TableBody

Hereda las props de `<tbody>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TableCaption

Hereda las props de `<caption>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TableCell

Hereda las props de `<td>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `numeric` | `boolean` | `false` | Alinea a la derecha con cifras tabulares. Tiene que coincidir con el `TableHead`. |
| `className` | `string` | — | — |

### TableFooter

Hereda las props de `<tfoot>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TableHead

Hereda las props de `<th>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `numeric` | `boolean` | `false` | Alinea a la derecha con cifras tabulares. |
| `className` | `string` | — | — |

### TableHeader

Hereda las props de `<thead>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### TableRow

Hereda las props de `<tr>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Recorre los controles de las celdas, no las celdas. |
| — | No es una grilla: si necesitás navegar celda por celda con flechas, hace falta una data grid de verdad. |

## Accesibilidad

- Emite `<table>` nativa: el lector anuncia filas y columnas sin ayuda.
- `TableCaption` es el nombre de la tabla. Si el título ya está arriba en un `PageHeader`, asocialo con `aria-labelledby`.
- `TableHead` con `numeric` alinea a la derecha y usa cifras tabulares: las columnas de plata se comparan de un vistazo.
- Una tabla sin `<thead>` no es una tabla: es una lista.

## Reglas de uso

- **Números a la derecha con `numeric`, texto a la izquierda.** Nunca centrado.
- `density="compact"` para más de ~20 filas visibles.
- En mobile una tabla de más de 3 columnas no entra: o hacés scroll horizontal con la primera columna fija, o cambiás a tarjetas.
- Las acciones de fila van en la última columna, en un `DropdownMenu`, no como tres botones sueltos.
- El `thead` y el `tfoot` usan `bg-background-200`: es la banda, no la superficie.

## Relacionados

[card](/docs/components/card.md) · [badge](/docs/components/badge.md) · [empty-state](/docs/components/empty-state.md) · [skeleton](/docs/components/skeleton.md)