> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md). # AX - Tabella dati ## Panoramica **AX - Tabella dati** è un componente di Experience Cloud che visualizza i tuoi record Salesforce in una tabella interattiva nelle pagine dei siti Experience (in precedenza Community Cloud). Usalo per mostrare agli utenti del portale dataset filtrati con pieno controllo su colonne, ordinamento, ricerca e paginazione. Recupera record da qualsiasi oggetto standard o personalizzato e consenti agli utenti esterni di visualizzare, cercare e interagire con i dati rilevanti per il loro account o profilo. Perfetto per i portali clienti che mostrano la cronologia ordini, i portali partner che visualizzano la cronologia ordini, i portali partner che mostrano record condivisi o i siti self-service in cui gli utenti devono trovare e visualizzare i propri dati. {% hint style="success" %} La Avonni Data Table è una [Componente dati reattivo](/experience-cloud/experience-cloud-it/per-iniziare/reactive-components.md) {% endhint %} *** ## Per iniziare Usa questo semplice tutorial per apprendere le basi del componente Data Table e iniziare a creare i tuoi casi d'uso. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} *** ## Tutorial
Crea un pulsante Esporta in nella Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Configurazione della Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Visualizzazione dei file di Salesforce CMS in una Data Table/pages/81bacf31f14041d232a1f14d122b080a40442e64
*** ## Collega la tua Data Table ai dati Salesforce ### Origine dati La sezione Origine dati è il punto in cui colleghi l'Avonni Data Table ai tuoi dati Salesforce. Hai due opzioni.
Tipo di origine datiDescrizioneCaso d'uso
Origine dati manualeInserisci manualmente i dati nella tabella dati.Ideale per dati non dinamici, test e demo.
QueryCrea una query per compilare automaticamente la tabella con i dati Salesforce.Adatto per dataset dinamici, in tempo reale e di grandi dimensioni.
CMS CollectionVisualizza senza problemi le tue raccolte CMS all'interno delle Data Table per aggiornamenti dinamici dei contenuti.Crea elenchi di risorse o feed di notizie aggiornati automaticamente.
{% hint style="info" %} In modalità Query, i dati vengono mostrati in blocchi di 25 record per mantenere prestazioni ottimali del sito. {% endhint %} ### Configurazione delle mappature dei dati Dai vita alla tua tabella dati nella sezione Mappature dati definendo e personalizzando le sue colonne.
Condivisione del modello dati con Avonni Data Table **Aderenza alle regole di condivisione dei dati di Salesforce:** * **Rispetto delle impostazioni dell'organizzazione:** I componenti Avonni sono pienamente conformi alle configurazioni di condivisione dei dati e alle impostazioni di accesso esistenti della tua organizzazione Salesforce. * **Politica di non interferenza:** Questi componenti non modificano né influenzano in alcun modo le regole di condivisione dei dati predefinite. * **Visibilità e accesso controllati:** La possibilità di visualizzare e interagire con i record tramite i componenti Avonni è regolata dalle impostazioni di condivisione e dalle autorizzazioni utente definite dalla tua organizzazione
#### Aggiunta di colonne * Fai clic sul pulsante "Aggiungi colonne" per selezionare i campi dalla tua origine dati da visualizzare come colonne nella tabella dati.
* Questa sezione determina quali dati sono visibili e come sono organizzati nella tabella. * Fai clic su una colonna per accedere a tutte le proprietà di quella specifica colonna.
#### Configurazione delle proprietà della colonna * **Tipo di dato:** Regola il tipo di visualizzazione del campo (ad esempio testo, numero, data) per garantire la corretta rappresentazione dei dati. * **Linkify:** Abilita il collegamento dei dati della cella ad altri record o URL per una navigazione rapida. * **Attributi della cella:** Personalizza l'allineamento delle celle e le icone per creare una tabella più intuitiva e gradevole dal punto di vista visivo. * **Modificabile:** Decidi se una colonna deve essere modificabile direttamente all'interno della tabella. * **Filtrabile e ricercabile:** Abilita il filtro e la ricerca per singola colonna per una gestione efficiente dei dati. * **Nascosto:** Scegli di nascondere alcune colonne, utile per dati sensibili o meno rilevanti. * **Ordinabile:** Consenti agli utenti di ordinare i dati in base alla colonna specificata. * **Nascondi azioni predefinite:** Scegli di nascondere le azioni preimpostate per un aspetto più pulito. * **A capo il testo:** Abilita l'a capo del testo per una migliore leggibilità nelle colonne strette. * **Imposta la larghezza della colonna:** Specifica la larghezza di ciascuna colonna per ottenere un layout equilibrato e ordinato. #### Aggiunta di azioni di riga Ecco un tutorial interattivo guidato su come aggiungere azioni di riga alla Data Table. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} *** ## Altre impostazioni di configurazione ### Impostazioni di base **Nascondi intestazione tabella** * Questa opzione ti consente di rimuovere l'intestazione della tabella per un aspetto più pulito e minimalista.
**Nascondi colonne checkbox** * Abilita questa impostazione per nascondere le colonne checkbox, normalmente usate per la selezione delle righe in scenari multi-azione.
**Mostra colonna numero di riga** * Attivala per visualizzare una colonna che numera ogni riga, utile per un facile riferimento ai dati. ### Configurazione dell'intestazione **Titolo e didascalia** * Personalizza l'intestazione con un titolo e una didascalia per fornire contesto o informazioni riassuntive sui dati della tabella. **Nome e dimensione dell'icona** * Arricchisci l'intestazione con un'icona, scegliendone tipo e dimensione per un'enfasi visiva. **È unito** * Questa impostazione determina se l'intestazione si collega visivamente al corpo della tabella, influenzando il design complessivo. **Azioni dell'intestazione** * Configura azioni (aggiungi, elimina o funzioni personalizzate) direttamente accessibili dall'intestazione della tabella.
### Pulsanti di azione nell'intestazione * Implementa pulsanti di azione nell'intestazione della tabella per aggiungere nuovi record, esportare dati o altre azioni personalizzate, migliorando l'interazione e l'efficienza dell'utente.
#### Configura l'interazione sul pulsante Configura l'interazione quando gli utenti premono il pulsante di azione dell'intestazione nella sezione "On Click". Per capire come funziona l'interazione "Navigate", [fai clic qui](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md) per maggiori informazioni.
#### Tutorial {% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %} [Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) {% endcontent-ref %} ### Attributi di paginazione * Configura le impostazioni di paginazione, come il numero di elementi per pagina e lo stile di paginazione, per gestire come i dati vengono visualizzati e navigati nelle tabelle più grandi. {% hint style="info" %} In modalità Query, i dati vengono visualizzati in gruppi di 25 record per mantenere prestazioni ottimali del sito. Pertanto, impostare la paginazione può essere vantaggioso. {% endhint %}
### Configurazione del motore di ricerca * **Segnaposto:** Imposta un testo segnaposto per la casella di ricerca per guidare gli utenti su cosa possono cercare. * **Posizione:** Scegli la posizione della casella di ricerca all'interno del layout della tabella per un'accessibilità ottimale. * **Valore di ricerca predefinito:** Predefinisci un valore di ricerca per filtrare i dati della tabella al caricamento. {% hint style="info" %} Per visualizzare la casella di ricerca, almeno una colonna deve essere contrassegnata come "Ricercabile". {% endhint %}

Almeno una colonna deve essere impostata su "Ricercabile" per visualizzare la casella di ricerca.

## Impostazioni {% tabs %} {% tab title="🎛️ Generale" %} | Nome | Descrizione | | ------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | **Nascondi intestazione tabella** | Attiva/disattiva per nascondere l'intestazione della tabella | | **Nascondi colonna checkbox** | Rimuovi la colonna usata per le caselle di selezione delle righe | | **Mostra colonna numero di riga** | Mostra una colonna con il numero di riga | | **Offset numero di riga** | Imposta il numero iniziale per la numerazione delle righe | | **Selezione massima righe** | Limita il numero massimo di righe che possono essere selezionate | | **Nascondi barra inferiore** | Nascondi la barra inferiore solitamente usata per le azioni e la visualizzazione delle informazioni | | **Mostra numero di elementi selezionati** | Visualizza il conteggio degli elementi attualmente selezionati | | **Sola lettura** | Rendi la tabella non interattiva, impedendo modifiche o selezioni | | **Consenti modifica su tutte le colonne** | Abilita la modifica per tutte le colonne | | **Consenti filtro su tutte le colonne** | Abilita le opzioni di filtro per tutte le colonne | | **Consenti a capo su tutte le colonne** | Consenti l'a capo del testo in tutte le colonne | | **Nascondi azioni predefinite** | Nascondi azioni predefinite come modifica o eliminazione | | **Modalità larghezza colonne** | Scegli tra "fixed" o "auto" per l'impostazione della larghezza delle colonne | | **Larghezza massima/minima colonna** | Imposta limiti massimi e minimi per le larghezze delle colonne | | **Numero massimo di righe per a capo** | Definisci il numero massimo di righe per l'a capo del testo nelle celle | | **Ridimensionamento colonna disabilitato** | Disabilita la possibilità di ridimensionare le colonne | | **Passo di ridimensionamento** | Imposta l'incremento per il ridimensionamento delle colonne | | **Direzione ordinamento/sort predefinita** | Scegli "asc" o "desc" per la direzione iniziale dell'ordinamento | | **Mostra valore ordinato per** | Mostra quale colonna è attualmente utilizzata per l'ordinamento | | **Titolo/didascalia dell'intestazione** | Imposta un titolo e una didascalia per l'intestazione della tabella | | **Nome/dimensione icona intestazione** | Aggiungi un'icona all'intestazione con dimensione personalizzabile | | **L'intestazione è unita** | Scegli di collegare visivamente l'intestazione al corpo della tabella | | **Nascondi/Disabilita azioni intestazione** | Controlla visibilità e interattività delle azioni dell'intestazione | | **Pulsanti di azione visibili nell'intestazione** | Specifica quali pulsanti di azione sono visibili nell'intestazione | | **Azioni dell'intestazione** | Aggiungi azioni personalizzate all'intestazione della tabella | | {% endtab %} | | {% tab title="⏩️ Paginazione e ricerca" %} ### Attributi di paginazione | Nome | Descrizione | | --------------------------------- | ---------------------------------------------------------------- | | **Mostra paginazione** | Attiva/disattiva la visualizzazione dei controlli di paginazione | | **Numero di elementi per pagina** | Imposta quanti elementi visualizzare per pagina | ### Opzioni del contenitore pill * Mostra un contenitore per gli elementi selezionati, spesso usato con la selezione delle righe. ### Opzioni del motore di ricerca | Nome | Descrizione | | --------------------------------- | -------------------------------------------------------- | | **Segnaposto** | Imposta il testo segnaposto per l'input di ricerca | | **Posizione** | Definisci la posizione della barra di ricerca | | **Valore di ricerca predefinito** | Precompila la barra di ricerca con un valore predefinito | | {% endtab %} | | {% tab title="🗄️ Filtraggio e origine dati" %} | Nome | Descrizione | | --------------------- | -------------------------------------------------------------------------------------------------------------------- | | **Opzioni di filtro** | Configura il filtro per essere visualizzato come popover per ciascuna colonna. | | **Origine dati** | Seleziona tra "manual" e "query" per popolare i dati della tabella. | | **Colonne** | Definisci e aggiungi colonne alla tabella dati, personalizzando le proprietà e il comportamento di ciascuna colonna. | | {% endtab %} | | {% tab title="🎨 Stile" %} ### Intestazione | Nome | Descrizione | | --------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | **Colore di sfondo** | Imposta il colore dello sfondo dell'intestazione. | | **Colore del bordo** | Definisce il colore del bordo dell'intestazione. | | **Dimensione del bordo** | Regola lo spessore del bordo. | | **Stile del bordo** | Seleziona lo stile del bordo (solido, puntinato, tratteggiato, ecc.). | | **Raggio del bordo** | Arrotonda gli angoli dell'intestazione. | | **Colore bordo inferiore (unito)** | Specifica il colore del bordo inferiore quando l'intestazione è visivamente unita al corpo della tabella. | | **Dimensione del bordo inferiore (se unito)** | Determina lo spessore del bordo inferiore unito. | | **Stile del bordo inferiore (se unito)** | Imposta lo stile del bordo inferiore unito. | | **Spaziatura e margine** | Controlla lo spazio interno (padding) ed esterno (margin) dell'intestazione. | ### Titolo dell'intestazione | Nome | Descrizione | | ---------------------------- | ------------------------------------------------------------------- | | **Colore** | Imposta il colore del testo del titolo. | | **Dimensione del carattere** | Regola la dimensione del testo del titolo. | | **Peso del carattere** | Altera il grassetto del testo del titolo. | | **Stile del font** | Applica uno stile specifico (corsivo, normale) al testo del titolo. | ### Didascalia dell'intestazione | Nome | Descrizione | | ---------------------------- | ------------------------------------------------- | | **Colore** | Definisce il colore del testo della didascalia. | | **Dimensione del carattere** | Regola la dimensione del testo della didascalia. | | **Peso del carattere** | Controlla lo spessore del testo della didascalia. | | **Stile del font** | Imposta lo stile del testo della didascalia. | ### Icona dell'intestazione | Nome | Descrizione | | ------------------------------ | ----------------------------------------------------------- | | **Colore di sfondo** | Imposta il colore di sfondo dell'icona. | | **Colore in primo piano** | Cambia il colore dell'icona stessa. | | **Utilità colore primo piano** | Regola il colore di utilità per contrasto o enfasi. | | **Raggio del bordo** | Arrotonda gli angoli dell'icona per un aspetto più morbido. | ### Contenitore pill | Nome | Descrizione | | ---------------------------- | ------------------------------------------------------------------------------------------------ | | **Colore sfondo pill/hover** | Imposta il colore di sfondo degli elementi pill, con un colore diverso al passaggio del mouse. | | **Colore testo pill/hover** | Cambia il colore del testo all'interno della pill, con un colore diverso al passaggio del mouse. | | **Altezza riga pill** | Regola l'altezza della riga all'interno della pill per l'allineamento del testo. | ### Avatar | Nome | Descrizione | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | **Adattamento oggetto immagine avatar** | Determina come l'immagine dell'avatar deve adattarsi al suo contenitore. Le opzioni includono "fill", "contain", "cover", "none" e "scale-down". | ### Pulsanti di paginazione | Nome | Descrizione | | ------------------------- | ----------------------------------------------------------------------------------------------------- | | **Impostazioni di stile** | Personalizza l'aspetto dei pulsanti di paginazione, inclusi colore, dimensione e proprietà del bordo. | ### Piè di pagina | Nome | Descrizione | | ------------------------ | ------------------------------------------------- | | **Colore di sfondo** | Imposta il colore dello sfondo del piè di pagina. | | **Colore del bordo** | Definisce il colore del bordo del piè di pagina. | | **Dimensione del bordo** | Regola lo spessore del bordo. | | **Stile del bordo** | Seleziona lo stile del bordo. | | **Raggio del bordo** | Arrotonda gli angoli del piè di pagina. | | {% endtab %} | | | {% endtabs %} | | ## Esempi di casi d'uso ### Esempio 1: elenco Account migliorato e contatti correlati {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} Offri ai tuoi partner un modo potente e intuitivo per esplorare i dati degli account, con ricerca in linea, filtri e un pannello contatti in tempo reale che si aggiorna mentre navigano. *** #### **Cosa otterrai** * **Elenco account ricercabile e filtrabile:** Permetti ai partner di trovare rapidamente gli account per nome o settore usando i controlli di ricerca e filtro integrati. * **Record collegati in linea:** Rendi cliccabili i nomi degli account così che i partner possano passare direttamente alle pagine di dettaglio del record. * **Pannello contatti correlati in tempo reale:** Visualizza una seconda tabella che si aggiorna automaticamente per mostrare i contatti associati all'account selezionato. * **Risultati paginati:** Mantieni l'interfaccia pulita e performante limitando i record visibili per pagina. *** #### **Prima di iniziare** * **Layout pagina a due colonne:** Assicurati che la pagina Elenco account in Experience Builder abbia già un layout a due colonne pronto a ospitare entrambi i componenti. *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il primo AX - Datatable alla tua pagina** * Trascina un componente AX - Datatable nella colonna sinistra della pagina Elenco account in Experience Builder. {% endstep %} {% step %} #### **Scegli un'origine dati** * Seleziona **Query Accounts** come origine dati per questo componente. {% endstep %} {% step %} #### **Imposta le mappature dei dati** * Aggiungi le seguenti colonne: Name, Industry, Owner.FullName e Phone. * Abilita **Linkify** nella colonna Name in modo che i nomi degli account diventino link cliccabili. * Imposta **Industry** come campo filtro. * Imposta **Nome** come campo di ricerca. {% endstep %} {% step %} #### **Configura il componente** * Imposta l' **Nome API** su `AccountsTable`. * Imposta **Selezione massima righe** su `1` così che possa essere selezionato solo un account alla volta. * Abilita la paginazione e imposta il **Numero massimo di record** su `10`. {% endstep %} {% step %} #### **Personalizza l'intestazione** * Imposta l' **Titolo dell'intestazione** su `Account`. * Imposta l' **Icona dell'intestazione** su `standard:account_info`. {% endstep %} {% step %} #### **Aggiungi il secondo AX - Datatable alla tua pagina** * Trascina un secondo componente AX - Datatable nella colonna destra della stessa pagina. {% endstep %} {% step %} #### **Scegli un'origine dati per la tabella dei contatti** * Seleziona **Query Contacts** come origine dati. * Aggiungi un filtro in modo che **AccountId** uguale a `{{AccountsTable.selectedRecord.Id}}`, collegando i risultati di questa tabella all'account attualmente selezionato. {% endstep %} {% step %} #### **Imposta le mappature dei dati** * Aggiungi le seguenti colonne: Name e Title. {% endstep %} {% step %} #### **Configura il componente** * Imposta l' **Nome API** su `relatedContactsTable`. {% endstep %} {% step %} #### **Personalizza l'intestazione** * Imposta l' **Titolo dell'intestazione** su `Contatti correlati`. * Imposta l' **Icona dell'intestazione** su `standard:contact`. {% endstep %} {% step %} #### **Anteprima della tua pagina** * Fai clic su Anteprima in Experience Builder, seleziona una riga di account e conferma che la tabella Contatti correlati si aggiorni dinamicamente per riflettere il record selezionato. {% endstep %} {% endstepper %} *** #### **Collegamenti** {% content-ref url="/pages/c4ee1770b891ed3c59613ddc8315f750467343c5" %} [Tabelle dati collegate](/experience-cloud/experience-cloud-it/tutorial/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Esempio 2: Opportunità correlate in una pagina Account {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} Offri agli utenti sales una vista immediata di ogni opportunità collegata a un account, proprio dove ne hanno bisogno, senza mai lasciare la pagina del record. *** #### **Cosa otterrai** * **Vista customer 360 più ricca:** Mostra i principali dati delle opportunità direttamente nella pagina Account, così gli utenti sales hanno il quadro completo in un unico posto. * **Pagine record completamente strutturate:** Crea pagine dense e ricche di informazioni che eliminano la necessità di passare tra schede o oggetti per gestire una pipeline. *** #### **Prima di iniziare** * **Pagina record Account con componenti esistenti:** Assicurati che la pagina record Account in Experience Builder includa già i dettagli del record, un banner e un layout a colonne pronti a ospitare il nuovo componente. *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi l'AX - Datatable alla tua pagina Account** * Trascina un componente AX - Datatable nella pagina record Account in Experience Builder. {% endstep %} {% step %} #### **Scegli un'origine dati** * Seleziona **Query Opportunities** come origine dati per questo componente. {% endstep %} {% step %} #### **Imposta le mappature dei dati** * Aggiungi le seguenti colonne: Name, Stage e Amount. * Abilita **Linkify** nella colonna Name in modo che i nomi delle opportunità diventino link cliccabili. {% endstep %} {% step %} #### **Configura il componente** * Imposta l' **Nome API** su `RelatedOpportunities`. * Aggiungi un filtro in modo che **AccountId** uguale a `{!Item.id}`, limitando i risultati all'account attualmente visualizzato. {% endstep %} {% step %} #### **Personalizza l'intestazione** * Imposta l' **Titolo dell'intestazione** su `Opportunità`. * Imposta l' **Stile intestazione** su `Titolo 2`. * Imposta l' **Icona dell'intestazione** su `standard:opportunity`. {% endstep %} {% step %} #### **Anteprima della tua pagina** * Fai clic su Anteprima in Experience Builder e vai a un record Account per confermare che nella tabella compaiano solo le opportunità correlate a quell'account. {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.