Tabla densa para datos tabulares — pedidos, mesas, items de menú con stock.
Si tu lista no tiene varias columnas comparables, prefiere list
o card. La tabla es para escanear datos, no para presentar
contenido editorial.
Anatomía
Una tabla completa: caption al pie, thead con
columnas, tbody con filas de datos, tfoot con
totales. Alinea texto a la izquierda, números a la derecha.
| Mesa | Estado | Total | Propina |
|---|---|---|---|
| 12 | Servida | $84.000 | $8.400 |
| 14 | En cocina | $126.000 | $12.600 |
| 7 | Entregada | $58.000 | $5.800 |
| 3 | Reservada | — | — |
| Total turno | $268.000 | $26.800 | |
Alineación
Texto siempre a la izquierda, números a la derecha. Cuando hay totales,
asegúrate de que la columna numérica del tfoot herede la misma
alineación.
| Plato | Pedidos | Precio |
|---|---|---|
| Pad Thai de cerdo | 42 | $32.000 |
| Curry verde | 28 | $36.000 |
| Tom yum | 15 | $28.000 |
Estados de fila
Una fila puede estar seleccionada (data-[state=selected]:bg-muted)
o resaltarse en hover (hover:bg-muted/50). Como en estático no
hay puntero, mostramos la fila seleccionada con el fondo aplicado
directamente.
| Pedido | Mesa | Estado |
|---|---|---|
| #1284 | 12 | Servida |
| #1285 | 14 | En cocina |
| #1286 | 7 | Entregada |
Estado theme: ⚠ pendiente verificar.