---
title: Tableaux
description: "Organisez les données en lignes et colonnes. Prend en charge les tableaux Markdown et les composants Table avec tri, mise en évidence et fusion de cellules."
---
Les tableaux organisent les données en lignes et colonnes. Jamdesk prend en charge deux approches : **les tableaux Markdown** pour des tableaux simples et rapides, et **les composants Table** pour des fonctionnalités avancées comme la mise en évidence et l'alignement.
## Utilisation
```mdx
```
## Tableaux Markdown
La méthode la plus rapide pour créer un tableau. Utilisez des barres verticales (`|`) pour séparer les colonnes et des tirets (`-`) pour la ligne d'en-tête :
```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 |
Les tableaux Markdown sont idéaux pour les données de référence simples. Le composant Table offre plus de contrôle lorsque vous avez besoin de mise en évidence, d'alignement ou d'emphase visuelle.
## Composant Table
Pour plus de contrôle, utilisez les composants ``, `` et `` :
```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 |
## Lignes Striped
Ajoutez des arrière-plans de lignes alternés pour une meilleure lisibilité :
```mdx
| Parameter |
Value |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
```
| Parameter |
Value |
| timeout | 30s |
| retries | 3 |
| backoff | exponential |
| maxDelay | 60s |
## Bordures et compacité
Ajoutez des bordures entre les cellules et réduisez le rembourrage :
```mdx
```
## Mise en évidence de lignes
Mettez en évidence des lignes entières pour attirer l'attention :
```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) |
Couleurs de mise en évidence disponibles : `primary`, `success`, `warning`, `error`, `info`
## Mise en évidence de cellules
Mettez en évidence des cellules individuelles pour les indicateurs d'état :
```mdx
| Service |
Status |
| API |
Operational |
| Database |
Degraded |
| Storage |
Outage |
```
| Service |
Status |
| API |
Operational |
| Database |
Degraded |
| Storage |
Outage |
## Alignement des cellules
Contrôlez l'alignement du texte par cellule :
```mdx
| Left |
Center |
Right |
| Text |
Text |
$99.99 |
```
| Left |
Center |
Right |
| Text |
Text |
$99.99 |
## Fusion de colonnes et de lignes
Fusionnez des cellules sur plusieurs colonnes ou lignes :
```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 |
## Légende visible
Affichez une légende de tableau accessible au-dessus du tableau :
```mdx
| Region |
Revenue |
| North America |
$1.2M |
```
| Region |
Revenue |
| North America |
$1.2M |
## Colonnes triables
Activez le tri interactif des colonnes avec la prop `sortable`. Les utilisateurs peuvent cliquer sur les en-têtes de colonne pour trier :
```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 |
Cliquez une fois sur un en-tête de colonne pour trier par ordre croissant, une deuxième fois pour l'ordre décroissant, et une troisième fois pour réinitialiser. Les nombres sont triés numériquement, le texte alphabétiquement.
Le tri fonctionne avec d'autres fonctionnalités comme les lignes alternées :
```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 | Arrière-plans de lignes alternés |
| `bordered` | boolean | false | Bordures entre toutes les cellules |
| `compact` | boolean | false | Rembourrage réduit des cellules |
| `fullWidth` | boolean | true | Le tableau occupe toute la largeur |
| `caption` | string | - | Texte de légende du tableau |
| `captionVisible` | boolean | false | Afficher la légende visuellement (par défaut : lecteur d'écran uniquement) |
| `stickyHeader` | boolean | false | Garder l'en-tête visible lors du défilement |
| `sortable` | boolean | false | Activer le tri par clic sur les en-têtes de colonne |
### Row
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `header` | boolean | false | Afficher comme ligne d'en-tête |
| `highlight` | boolean | false | Mettre la ligne en évidence |
| `highlightColor` | string | primary | Couleur : primary, success, warning, error, info |
### Cell
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `align` | string | left | Alignement du texte : left, center, right |
| `colSpan` | number | - | Nombre de colonnes à fusionner |
| `rowSpan` | number | - | Nombre de lignes à fusionner |
| `highlight` | boolean | false | Mettre la cellule en évidence |
| `highlightColor` | string | primary | Couleur : primary, success, warning, error, info |
| `header` | boolean | false | Forcer le style d'en-tête |
## Et ensuite ?
Parcourir tous les composants disponibles
Apprendre à utiliser les composants dans MDX
|