--- title: Tabelle description: Organizza i dati in righe e colonne. Supporta tabelle Markdown e componenti Table con ordinamento, evidenziazione e celle estese. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. 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 ```mdx Name Type id string
``` ## 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: ```markdown | Name | Type | Description | |------|------|-------------| | id | string | Unique identifier | | email | string | User email address | ``` | Nome | Tipo | Descrizione | |------|------|-------------| | id | string | Identificatore univoco | | email | string | Indirizzo email dell'utente | Le tabelle Markdown sono ideali per dati di riferimento semplici. Il componente Table offre un maggiore controllo quando sono necessarie evidenziazione, allineamento o enfasi visiva. ## Componente Table Per un maggiore controllo, usa i componenti ``, `` e ``: ```mdx
Name Type Description id string Unique identifier email string User email address
``` Nome Tipo Descrizione id string Identificatore univoco email string Indirizzo email dell'utente
## Righe a strisce Aggiungi sfondi alternati alle righe per migliorare la leggibilità: ```mdx Parameter Value timeout30sretries3backoffexponentialmaxDelay60s
``` Parametro Valore timeout30sretries3backoffesponenzialemaxDelay60s
## Con bordi e compatta Aggiungi bordi tra le celle e riduci la spaziatura interna: ```mdx A B C 1 2 3
``` A B C 1 2 3
## Evidenziazione delle righe Evidenzia intere righe per attirare l'attenzione: ```mdx Field Required Description api_key Yes Your API authentication key limit No Maximum results (default: 100)
``` Campo Obbligatorio Descrizione api_key Sì La tua chiave di autenticazione API limit No Numero massimo di risultati (predefinito: 100)
Colori di evidenziazione disponibili: `primary`, `success`, `warning`, `error`, `info` ## Evidenziazione delle celle Evidenzia singole celle per indicare lo stato: ```mdx Service Status API Operational Database Degraded Storage Outage
``` Servizio Stato API Operativo Database Degradato Archiviazione Interruzione
## Allineamento delle celle Controlla l'allineamento del testo per ogni cella: ```mdx Left Center Right Text Text $99.99
``` Sinistra Centro Destra Testo Testo $99.99
## Estensione di colonne e righe Unisci le celle tra colonne o righe: ```mdx Category Item Price Fruits Apple $1.00 Banana $0.50 Subtotal $1.50
``` Categoria Articolo Prezzo Frutta Mela $1.00 Banana $0.50 Subtotale $1.50
## Didascalia visibile Mostra una didascalia accessibile sopra la tabella: ```mdx Region Revenue North America $1.2M
``` Regione Ricavi Nord America $1.2M
## Colonne ordinabili Abilita l'ordinamento interattivo delle colonne con la prop `sortable`. Gli utenti possono fare clic sulle intestazioni delle colonne per ordinarle: ```mdx Name Price Stock Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
``` Nome Prezzo Disponibilità Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
Fai clic una volta sull'intestazione di una colonna per ordinare in modo crescente, una seconda volta per ordinare in modo decrescente e una terza volta per reimpostare l'ordinamento. I numeri vengono ordinati numericamente, il testo in ordine alfabetico. La prop `sortable` funziona con altre funzionalità, come le righe a strisce: ```mdx Team Wins Losses Eagles124Bears88Lions106
``` Squadra Vittorie Sconfitte Eagles124Bears88Lions106
## Proprietà ### Table | Prop | Tipo | Predefinito | Descrizione | |------|------|-------------|-------------| | `striped` | boolean | false | Sfondi alternati delle righe | | `bordered` | boolean | false | Bordi tra tutte le celle | | `compact` | boolean | false | Spaziatura interna delle celle ridotta | | `fullWidth` | boolean | true | La tabella occupa l'intera larghezza | | `caption` | string | - | Testo della didascalia della tabella | | `captionVisible` | boolean | false | Mostra visivamente la didascalia (predefinito: solo per lettori dello schermo) | | `stickyHeader` | boolean | false | Mantieni visibile l'intestazione durante lo scorrimento | | `sortable` | boolean | false | Abilita l'ordinamento tramite clic sulle intestazioni delle colonne | ### Row | Prop | Tipo | Predefinito | Descrizione | |------|------|-------------|-------------| | `header` | boolean | false | Visualizza come riga d'intestazione | | `highlight` | boolean | false | Evidenzia la riga | | `highlightColor` | string | primary | Colore: primary, success, warning, error, info | ### Cell | Prop | Tipo | Predefinito | Descrizione | |------|------|-------------|-------------| | `align` | string | left | Allineamento del testo: left, center, right | | `colSpan` | number | - | Numero di colonne da estendere | | `rowSpan` | number | - | Numero di righe da estendere | | `highlight` | boolean | false | Evidenzia la cella | | `highlightColor` | string | primary | Colore: primary, success, warning, error, info | | `header` | boolean | false | Forza lo stile dell'intestazione | ## Qual è il prossimo passo? Esplora tutti i componenti disponibili Scopri come usare i componenti in MDX