---
title: Tablas
description: Organiza datos en filas y columnas. Admite tablas markdown y componentes Table con ordenación, resaltado y combinación de celdas.
---
Las tablas organizan datos en filas y columnas. Jamdesk admite dos enfoques: **tablas markdown** para tablas simples y rápidas y **componentes Table** para funciones avanzadas como resaltado y alineación.
## Uso
```mdx
```
## Tablas Markdown
La forma más rápida de crear una tabla. Usa barras verticales (`|`) para separar columnas y guiones (`-`) para la fila de encabezado:
```markdown
| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |
```
| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |
Las tablas Markdown son ideales para datos de referencia simples. El componente Table ofrece más control cuando necesitas resaltado, alineación o énfasis visual.
## Componente Table
Para mayor control, usa los componentes ``, `` y ``:
```mdx
| Name |
Type |
Description |
| id |
string |
Unique identifier |
| email |
string |
User email address |
```
| Name |
Type |
Description |
| id |
string |
Unique identifier |
| email |
string |
User email address |
## Filas Alternadas
Agrega fondos de fila alternos para mejorar la legibilidad:
```mdx
| Parameter |
Value |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
```
| Parameter |
Value |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
## Con Bordes y Compacta
Agrega bordes entre celdas y reduce el relleno:
```mdx
```
## Resaltado de Filas
Resalta filas completas para llamar la atención:
```mdx
| Field |
Required |
Description |
| api_key |
Yes |
Your API authentication key |
| limit |
No |
Maximum results (default: 100) |
```
| Field |
Required |
Description |
| api_key |
Yes |
Your API authentication key |
| limit |
No |
Maximum results (default: 100) |
Colores de resaltado disponibles: `primary`, `success`, `warning`, `error`, `info`
## Resaltado de Celdas
Resalta celdas individuales para indicadores de estado:
```mdx
| Service |
Status |
| API |
Operational |
| Database |
Degraded |
| Storage |
Outage |
```
| Service |
Status |
| API |
Operational |
| Database |
Degraded |
| Storage |
Outage |
## Alineación de Celdas
Controla la alineación del texto por celda:
```mdx
| Left |
Center |
Right |
| Text |
Text |
$99.99 |
```
| Left |
Center |
Right |
| Text |
Text |
$99.99 |
## Combinación de Columnas y Filas
Fusiona celdas a lo largo de columnas o filas:
```mdx
| Category |
Item |
Price |
| Fruits |
Apple |
$1.00 |
| Banana |
$0.50 |
| Subtotal |
$1.50 |
```
| Category |
Item |
Price |
| Fruits |
Apple |
$1.00 |
| Banana |
$0.50 |
| Subtotal |
$1.50 |
## Título Visible
Muestra un título de tabla accesible encima de la tabla:
```mdx
| Region |
Revenue |
| North America |
$1.2M |
```
| Region |
Revenue |
| North America |
$1.2M |
## Columnas Ordenables
Habilita la ordenación interactiva de columnas con la prop `sortable`. Los usuarios pueden hacer clic en los encabezados de columna para ordenar:
```mdx
| Name |
Price |
Stock |
| Widget A | $29.99 | 150 |
| Gadget B | $49.99 | 75 |
| Tool C | $19.99 | 200 |
| Device D | $99.99 | 25 |
```
| Name |
Price |
Stock |
| Widget A | $29.99 | 150 |
| Gadget B | $49.99 | 75 |
| Tool C | $19.99 | 200 |
| Device D | $99.99 | 25 |
Haz clic en el encabezado de una columna una vez para ordenar de forma ascendente, de nuevo para descendente, y una tercera vez para restablecer. Los números se ordenan numéricamente, el texto alfabéticamente.
La ordenación funciona con otras funciones como las filas alternadas:
```mdx
| Team |
Wins |
Losses |
| Eagles | 12 | 4 |
| Bears | 8 | 8 |
| Lions | 10 | 6 |
```
| Team |
Wins |
Losses |
| Eagles | 12 | 4 |
| Bears | 8 | 8 |
| Lions | 10 | 6 |
## Props
### Table
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `striped` | boolean | false | Fondos de fila alternos |
| `bordered` | boolean | false | Bordes entre todas las celdas |
| `compact` | boolean | false | Relleno de celda reducido |
| `fullWidth` | boolean | true | La tabla ocupa el ancho completo |
| `caption` | string | - | Texto del título de la tabla |
| `captionVisible` | boolean | false | Mostrar el título visualmente (por defecto: solo para lectores de pantalla) |
| `stickyHeader` | boolean | false | Mantener el encabezado visible al desplazarse |
| `sortable` | boolean | false | Habilitar clic para ordenar en los encabezados de columna |
### Row
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `header` | boolean | false | Renderizar como fila de encabezado |
| `highlight` | boolean | false | Resaltar la fila |
| `highlightColor` | string | primary | Color: primary, success, warning, error, info |
### Cell
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `align` | string | left | Alineación del texto: left, center, right |
| `colSpan` | number | - | Columnas a combinar |
| `rowSpan` | number | - | Filas a combinar |
| `highlight` | boolean | false | Resaltar la celda |
| `highlightColor` | string | primary | Color: primary, success, warning, error, info |
| `header` | boolean | false | Forzar estilo de encabezado |
## ¿Qué sigue?
Explora todos los componentes disponibles
Aprende a usar componentes en MDX
|