Tabelle

Le tabelle organizzano i dati in righe e colonne. Jamdesk supporta due approcci: le tabelle Markdown per tabelle rapide e semplici e i componenti Table per funzionalità avanzate come evidenziazione e allineamento.

Utilizzo

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

Tabelle Markdown

Il modo più rapido per creare una tabella. Usa le barre verticali (|) per separare le colonne e i trattini (-) per la riga d'intestazione:

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

Componente Table

Per un maggiore controllo, usa i componenti <Table>, <Row> e <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>

Righe a strisce

Aggiungi sfondi alternati alle righe per migliorare la leggibilità:

<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>

Con bordi e compatta

Aggiungi bordi tra le celle e riduci la spaziatura interna:

<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>

Evidenziazione delle righe

Evidenzia intere righe per attirare l'attenzione:

<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>

Colori di evidenziazione disponibili: primary, success, warning, error, info

Evidenziazione delle celle

Evidenzia singole celle per indicare lo stato:

<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>

Allineamento delle celle

Controlla l'allineamento del testo per ogni cella:

<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>

Estensione di colonne e righe

Unisci le celle tra colonne o righe:

<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>

Didascalia visibile

Mostra una didascalia accessibile sopra la tabella:

<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>

Colonne ordinabili

Abilita l'ordinamento interattivo delle colonne con la prop sortable. Gli utenti possono fare clic sulle intestazioni delle colonne per ordinarle:

<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>

La prop sortable funziona con altre funzionalità, come le righe a strisce:

<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>

Proprietà

Table

Row

Cell

Qual è il prossimo passo?