Tableaux

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

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
  </Row>
</Table>

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 :

| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |

Composant Table

Pour plus de contrôle, utilisez les composants <Table>, <Row> et <Cell> :

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
    <Cell>Unique identifier</Cell>
  </Row>
  <Row>
    <Cell>email</Cell>
    <Cell>string</Cell>
    <Cell>User email address</Cell>
  </Row>
</Table>

Lignes Striped

Ajoutez des arrière-plans de lignes alternés pour une meilleure lisibilité :

<Table striped>
  <Row header>
    <Cell>Parameter</Cell>
    <Cell>Value</Cell>
  </Row>
  <Row><Cell>timeout</Cell><Cell>30s</Cell></Row>
  <Row><Cell>retries</Cell><Cell>3</Cell></Row>
  <Row><Cell>backoff</Cell><Cell>exponential</Cell></Row>
  <Row><Cell>maxDelay</Cell><Cell>60s</Cell></Row>
</Table>

Bordures et compacité

Ajoutez des bordures entre les cellules et réduisez le rembourrage :

<Table bordered compact>
  <Row header>
    <Cell>A</Cell>
    <Cell>B</Cell>
    <Cell>C</Cell>
  </Row>
  <Row>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
  </Row>
</Table>

Mise en évidence de lignes

Mettez en évidence des lignes entières pour attirer l'attention :

<Table>
  <Row header>
    <Cell>Field</Cell>
    <Cell>Required</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row highlight highlightColor="warning">
    <Cell>api_key</Cell>
    <Cell>Yes</Cell>
    <Cell>Your API authentication key</Cell>
  </Row>
  <Row>
    <Cell>limit</Cell>
    <Cell>No</Cell>
    <Cell>Maximum results (default: 100)</Cell>
  </Row>
</Table>

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 :

<Table>
  <Row header>
    <Cell>Service</Cell>
    <Cell>Status</Cell>
  </Row>
  <Row>
    <Cell>API</Cell>
    <Cell highlight highlightColor="success">Operational</Cell>
  </Row>
  <Row>
    <Cell>Database</Cell>
    <Cell highlight highlightColor="warning">Degraded</Cell>
  </Row>
  <Row>
    <Cell>Storage</Cell>
    <Cell highlight highlightColor="error">Outage</Cell>
  </Row>
</Table>

Alignement des cellules

Contrôlez l'alignement du texte par cellule :

<Table>
  <Row header>
    <Cell align="left">Left</Cell>
    <Cell align="center">Center</Cell>
    <Cell align="right">Right</Cell>
  </Row>
  <Row>
    <Cell align="left">Text</Cell>
    <Cell align="center">Text</Cell>
    <Cell align="right">$99.99</Cell>
  </Row>
</Table>

Fusion de colonnes et de lignes

Fusionnez des cellules sur plusieurs colonnes ou lignes :

<Table bordered>
  <Row header>
    <Cell>Category</Cell>
    <Cell>Item</Cell>
    <Cell>Price</Cell>
  </Row>
  <Row>
    <Cell rowSpan={2}>Fruits</Cell>
    <Cell>Apple</Cell>
    <Cell>$1.00</Cell>
  </Row>
  <Row>
    <Cell>Banana</Cell>
    <Cell>$0.50</Cell>
  </Row>
  <Row>
    <Cell colSpan={2}>Subtotal</Cell>
    <Cell>$1.50</Cell>
  </Row>
</Table>

Légende visible

Affichez une légende de tableau accessible au-dessus du tableau :

<Table caption="Monthly Revenue by Region" captionVisible>
  <Row header>
    <Cell>Region</Cell>
    <Cell align="right">Revenue</Cell>
  </Row>
  <Row>
    <Cell>North America</Cell>
    <Cell align="right">$1.2M</Cell>
  </Row>
</Table>

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 :

<Table sortable>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Price</Cell>
    <Cell>Stock</Cell>
  </Row>
  <Row><Cell>Widget A</Cell><Cell>$29.99</Cell><Cell>150</Cell></Row>
  <Row><Cell>Gadget B</Cell><Cell>$49.99</Cell><Cell>75</Cell></Row>
  <Row><Cell>Tool C</Cell><Cell>$19.99</Cell><Cell>200</Cell></Row>
  <Row><Cell>Device D</Cell><Cell>$99.99</Cell><Cell>25</Cell></Row>
</Table>

Le tri fonctionne avec d'autres fonctionnalités comme les lignes alternées :

<Table sortable striped>
  <Row header>
    <Cell>Team</Cell>
    <Cell>Wins</Cell>
    <Cell>Losses</Cell>
  </Row>
  <Row><Cell>Eagles</Cell><Cell>12</Cell><Cell>4</Cell></Row>
  <Row><Cell>Bears</Cell><Cell>8</Cell><Cell>8</Cell></Row>
  <Row><Cell>Lions</Cell><Cell>10</Cell><Cell>6</Cell></Row>
</Table>

Props

Table

Row

Cell

Et ensuite ?