# AX - Tabla de datos

## Descripción general

**AX - Tabla de datos** es un componente de Experience Cloud que muestra tus registros de Salesforce en una tabla interactiva en las páginas de Experience Sites (anteriormente Community Cloud).

Úsalo para mostrar a los usuarios del portal conjuntos de datos filtrados con control total sobre las columnas, la ordenación, la búsqueda y la paginación. Obtén registros de cualquier objeto estándar o personalizado y permite que los usuarios externos vean, busquen e interactúen con datos relevantes para su cuenta o perfil.

Perfecto para portales de clientes que muestran el historial de pedidos, portales de socios que muestran el historial de pedidos, portales de socios que muestran registros compartidos, o sitios de autoservicio donde los usuarios necesitan encontrar y ver sus propios datos.

{% hint style="success" %}
La Tabla de datos de Avonni es un [Componente de datos reactivo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/componentes-reactivos)
{% endhint %}

***

## Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Tabla de datos y comenzar a construir tus casos de uso.

{% @arcade/embed flowId="oAo6XOMWRBc7Vn4Y9XNd" url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" %}

***

## Tutoriales

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Crear un botón Exportar a en la Tabla de datos</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Configuración de la Tabla de datos</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/configuring-the-avonni-data-table">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Mostrar archivos de Salesforce CMS en una Tabla de datos</strong></td><td><a href="../tutoriales/componentes/tabla-de-datos/mostrar-archivos-de-salesforce-cms-en-una-tabla-de-datos">mostrar-archivos-de-salesforce-cms-en-una-tabla-de-datos</a></td></tr></tbody></table>

***

## Conecta tu Tabla de datos con los datos de Salesforce

### Fuente de datos

La sección Fuente de datos es donde conectas la Tabla de datos de Avonni con tus datos de Salesforce. Tienes dos opciones.

<table><thead><tr><th>Tipo de fuente de datos</th><th width="250.33333333333331">Descripción</th><th>Caso de uso</th></tr></thead><tbody><tr><td><strong>Fuente de datos manual</strong></td><td>Introduce datos manualmente en la tabla de datos.</td><td>Ideal para datos no dinámicos, pruebas y demostraciones.</td></tr><tr><td><strong>Consulta</strong></td><td>Crea una consulta para completar automáticamente la tabla con datos de Salesforce.</td><td>Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño.</td></tr><tr><td><strong>Colección CMS</strong></td><td>Muestra sin problemas tus colecciones CMS dentro de las tablas de datos para actualizaciones dinámicas del contenido.</td><td>Crea listas de recursos o feeds de noticias que se actualicen automáticamente.</td></tr></tbody></table>

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3PwcU320If3fDaiBQLyt%2F2024-05-06_10-20-35.png?alt=media&#x26;token=fcf364f1-14a1-4421-ab0b-9b360c71ec68" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
En el modo Consulta, los datos se muestran en lotes de 25 registros para mantener un rendimiento óptimo del sitio.
{% endhint %}

### Configuración de asignaciones de datos

Dale vida a tu tabla de datos en la sección de Asignaciones de datos definiendo y personalizando sus columnas.

<details>

<summary>Compartición del modelo de datos con la Tabla de datos de Avonni</summary>

**Cumplimiento de las reglas de compartición de datos de Salesforce:**

* **Respeto a la configuración de la organización:** Los componentes de Avonni cumplen totalmente con las configuraciones de compartición de datos y los ajustes de acceso existentes de tu organización de Salesforce.
* **Política de no interferencia:** Estos componentes no modifican ni afectan de ninguna manera tus reglas de compartición de datos preestablecidas.
* **Visibilidad y acceso controlados:** La capacidad de ver e interactuar con los registros a través de los componentes de Avonni está gobernada por la configuración de compartición y los permisos de usuario definidos por tu organización

</details>

#### Añadir columnas

* Haz clic en el botón "Añadir columnas" para seleccionar campos de tu fuente de datos que se mostrarán como columnas en la tabla de datos.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FE2cKSG6IyYXg6PT5EEU1%2F2023-12-10_20-56-54.png?alt=media&#x26;token=46cc7e51-eb28-4925-9842-50b3d91255bf" alt=""><figcaption></figcaption></figure>

* Esta sección determina qué datos son visibles y cómo se organizan en tu tabla.
* Haz clic en una columna para acceder a todas las propiedades de esa columna específica.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNlSXCo4bj0fPee0FFPtt%2F2023-12-10_20-58-01.png?alt=media&#x26;token=b0626d49-1d47-42be-a092-08baf64024ef" alt=""><figcaption></figcaption></figure>

#### Configuración de propiedades de columna

* **Tipo de dato:** Ajusta el tipo de visualización del campo (por ejemplo, texto, número, fecha) para garantizar una representación correcta de los datos.
* **Hacer enlazable:** Habilita el enlace de los datos de la celda a otros registros o URLs para una navegación rápida.
* **Atributos de celda:** Personaliza la alineación de las celdas y los iconos para crear una tabla más intuitiva y visualmente atractiva.
* **Editable:** Decide si una columna debe ser editable directamente dentro de la tabla.
* **Filtrable y buscable:** Habilita el filtrado y la búsqueda por columna para una gestión eficiente de los datos.
* **Oculta:** Elige ocultar ciertas columnas, útil para datos sensibles o menos relevantes.
* **Ordenable:** Permite a los usuarios ordenar los datos por la columna especificada.
* **Ocultar acciones predeterminadas:** Opta por ocultar las acciones predefinidas para una apariencia más limpia.
* **Ajustar texto:** Habilita el ajuste de texto para mejorar la legibilidad en columnas estrechas.
* **Establecer ancho de columna:** Especifica el ancho de cada columna para lograr un diseño equilibrado y organizado.

#### Añadir acciones de fila

Aquí tienes un tutorial interactivo guiado sobre cómo añadir acciones de fila a la Tabla de datos.

{% @arcade/embed flowId="db617gnzKCL8QA22aziq" url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" %}

***

## Otros ajustes de configuración

### Configuración básica

**Ocultar encabezado de la tabla**

* Esta opción te permite eliminar el encabezado de la tabla para un aspecto más limpio y minimalista.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqSHMEKEbljIMwDFR7JQw%2F2023-12-10_21-00-20.png?alt=media&#x26;token=2a5788ad-e9d1-421c-a1a8-159567f6a6d4" alt=""><figcaption></figcaption></figure>

**Ocultar columnas de casillas de verificación**

* Habilita este ajuste para ocultar las columnas de casillas de verificación, normalmente usadas para la selección de filas en escenarios de múltiples acciones.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBSnbhKLYW291nhWopETy%2F2023-12-10_21-01-29.png?alt=media&#x26;token=e156517b-4d21-4a1c-bbe3-3acc91e8f267" alt=""><figcaption></figcaption></figure>

**Mostrar columna de número de fila**

* Activa esto para mostrar una columna que enumera cada fila, lo cual es útil para una referencia rápida de los datos.

### Configuración del encabezado

**Título y subtítulo**

* Personaliza el encabezado con un título y un subtítulo para proporcionar contexto o información resumida sobre los datos de la tabla.

**Nombre y tamaño del icono**

* Mejora el encabezado con un icono, seleccionando su tipo y tamaño para darle énfasis visual.

**Está unido**

* Este ajuste determina si el encabezado se conecta visualmente con el cuerpo de la tabla, lo que afecta al diseño general.

**Acciones del encabezado**

* Configura acciones (agregar, eliminar o funciones personalizadas) que son accesibles directamente desde el encabezado de la tabla.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdlHeul0BOJuSLxlwxlrr%2F2023-12-05_08-55-05.png?alt=media&#x26;token=7569d3b6-f011-41fe-85cd-44eba513cced" alt=""><figcaption></figcaption></figure>

### Botones de acción en el encabezado

* Implementa botones de acción en el encabezado de la tabla para añadir nuevos registros, exportar datos u otras acciones personalizadas, mejorando la interacción del usuario y la eficiencia.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FpflegSFq3ppt9e1bFJpT%2F2023-12-05_09-00-09.png?alt=media&#x26;token=33633798-ff4e-4812-8075-71ba4deafbed" alt=""><figcaption></figcaption></figure>

#### Configura la interacción en el botón

Configura la interacción para cuando los usuarios presionen el botón de acción del encabezado en la sección "Al hacer clic". Para entender cómo funciona la interacción "Navegar", [haz clic aquí](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/panel-de-propiedades/interacciones/navegar) para obtener más información.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FP3G4hQaPYgAYh4qxlE6V%2F2023-12-10_21-05-18.png?alt=media&#x26;token=2617f41f-3045-4cf0-83e2-5ae3455deef4" alt=""><figcaption></figcaption></figure>

#### Tutorial

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table>" %}
[Create an Export To button on the Data Table](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table)
{% endcontent-ref %}

### Atributos de paginación

* Configura los ajustes de paginación, como el número de elementos por página y el estilo de paginación, para gestionar cómo se muestran y navegan los datos en tablas más grandes.

{% hint style="info" %}
En el modo Consulta, los datos se muestran en conjuntos de 25 registros para mantener un rendimiento óptimo del sitio. Por lo tanto, configurar la paginación puede ser beneficioso.
{% endhint %}

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTYV8JFlB7hI8aXbiio5z%2F2023-12-05_09-16-35.png?alt=media&#x26;token=fcd3ecdc-5c47-4ae2-8140-947a219bd9b9" alt=""><figcaption></figcaption></figure>

### Configuración del motor de búsqueda

* **Marcador de posición:** Establece un texto de marcador de posición para el cuadro de búsqueda para guiar a los usuarios sobre qué pueden buscar.
* **Posición:** Elige la posición del cuadro de búsqueda dentro del diseño de la tabla para una accesibilidad óptima.
* **Valor de búsqueda predeterminado:** Predefine un valor de búsqueda para filtrar los datos de la tabla al cargar.

{% hint style="info" %}
Para mostrar el cuadro de búsqueda, al menos una columna debe estar marcada como "Buscable".
{% endhint %}

<div><figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNxORNYAA6GqNWdTGaNvL%2F2023-12-05_08-56-31.png?alt=media&#x26;token=4dcc78d0-e09b-4058-a130-da98a081cbe1" alt=""><figcaption></figcaption></figure> <figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FjwElPRwuNrGJbdSHAdZO%2F2023-12-05_08-57-12.png?alt=media&#x26;token=9145311c-b2b7-49f6-b82c-d1c721f9f77c" alt=""><figcaption><p>Al menos una columna debe establecerse como "Buscable" para mostrar el cuadro de búsqueda.</p></figcaption></figure></div>

## Configuración

{% tabs %}
{% tab title="🎛️ General" %}

| Nombre                                             | Descripción                                                                                 |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Ocultar encabezado de la tabla**                 | Activa para ocultar el encabezado de la tabla                                               |
| **Ocultar columna de casillas de verificación**    | Elimina la columna usada para las casillas de verificación de selección de filas            |
| **Mostrar columna de número de fila**              | Mostrar una columna con el número de fila                                                   |
| **Desfase del número de fila**                     | Establece el número inicial para la numeración de filas                                     |
| **Selección máxima de filas**                      | Limita el número máximo de filas que se pueden seleccionar                                  |
| **Suprimir barra inferior**                        | Oculta la barra inferior normalmente utilizada para acciones y visualización de información |
| **Mostrar número de elementos seleccionados**      | Muestra el conteo de elementos actualmente seleccionados                                    |
| **Solo lectura**                                   | Haz que la tabla no sea interactiva, sin permitir ediciones ni selecciones                  |
| **Permitir edición en todas las columnas**         | Habilita la edición para todas las columnas                                                 |
| **Permitir filtro en todas las columnas**          | Habilita las opciones de filtrado para todas las columnas                                   |
| **Permitir ajuste de texto en todas las columnas** | Permite el ajuste de texto en todas las columnas                                            |
| **Ocultar acciones predeterminadas**               | Oculta acciones predefinidas como editar o eliminar                                         |
| **Modo de anchos de columna**                      | Elige entre 'fixed' o 'auto' para la configuración del ancho de columna                     |
| **Ancho máximo/mínimo de columna**                 | Establece límites máximos y mínimos para los anchos de columna                              |
| **Número máximo de líneas para ajuste de texto**   | Define el número máximo de líneas para el ajuste de texto en las celdas                     |
| **Redimensionar columna deshabilitado**            | Desactiva la capacidad de cambiar el tamaño de las columnas                                 |
| **Paso de redimensionamiento**                     | Establece el incremento para cambiar el tamaño de las columnas                              |
| **Ordenado/Dirección de orden predeterminada**     | Elige 'asc' o 'desc' para la dirección de orden inicial                                     |
| **Mostrar valor ordenado por**                     | Muestra qué columna se está utilizando actualmente para ordenar                             |
| **Título/Subtítulo del encabezado**                | Establece un título y un subtítulo para el encabezado de la tabla                           |
| **Nombre/Tamaño del icono del encabezado**         | Añade un icono al encabezado con tamaño personalizable                                      |
| **El encabezado está unido**                       | Opta por conectar visualmente el encabezado con el cuerpo de la tabla                       |
| **Ocultar/Deshabilitar acciones del encabezado**   | Controla la visibilidad y la interactividad de las acciones del encabezado                  |
| **Botones de acciones visibles en el encabezado**  | Especifica qué botones de acción son visibles en el encabezado                              |
| **Acciones del encabezado**                        | Añade acciones personalizadas al encabezado de la tabla                                     |
| {% endtab %}                                       |                                                                                             |

{% tab title="⏩️ Paginación y búsqueda" %}

### Atributos de paginación

| Nombre                             | Descripción                                                        |
| ---------------------------------- | ------------------------------------------------------------------ |
| **Mostrar paginación**             | Activa o desactiva la visualización de los controles de paginación |
| **Número de elementos por página** | Establece cuántos elementos se mostrarán por página                |

### Opciones del contenedor de píldoras

* Muestra un contenedor para los elementos seleccionados, a menudo usado con la selección de filas.

### Opciones del motor de búsqueda

| Nombre                               | Descripción                                                         |
| ------------------------------------ | ------------------------------------------------------------------- |
| **Marcador de posición**             | Establece texto de marcador de posición para la entrada de búsqueda |
| **Posición**                         | Define la posición de la barra de búsqueda                          |
| **Valor de búsqueda predeterminado** | Precarga la barra de búsqueda con un valor predeterminado           |
| {% endtab %}                         |                                                                     |

{% tab title="🗄️ Filtrado y fuente de datos" %}

| Nombre                   | Descripción                                                                                                      |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| **Opciones de filtrado** | Configura el filtrado para que se muestre como un popover para cada columna.                                     |
| **Fuente de datos**      | Selecciona entre 'manual' y 'query' para poblar los datos de la tabla.                                           |
| **Columnas**             | Define y añade columnas a la tabla de datos, personalizando las propiedades y el comportamiento de cada columna. |
| {% endtab %}             |                                                                                                                  |

{% tab title="🎨 Estilo" %}

### Encabezado

| Nombre                                     | Descripción                                                                                                   |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| **Color de fondo**                         | Establece el color de fondo del encabezado.                                                                   |
| **Color del borde**                        | Define el color del borde del encabezado.                                                                     |
| **Tamaño del borde**                       | Ajusta el grosor del borde.                                                                                   |
| **Estilo del borde**                       | Selecciona el estilo (sólido, punteado, discontinuo, etc.) del borde.                                         |
| **Radio del borde**                        | Redondea las esquinas del encabezado.                                                                         |
| **Color del borde inferior (Está unido)**  | Especifica el color del borde inferior cuando el encabezado está visualmente unido con el cuerpo de la tabla. |
| **Tamaño del borde inferior (Está unido)** | Determina el grosor del borde inferior unido.                                                                 |
| **Estilo del borde inferior (Está unido)** | Establece el estilo del borde inferior unido.                                                                 |
| **Relleno y margen**                       | Controla el espaciado interior (padding) y exterior (margin) del encabezado.                                  |

### Título del encabezado

| Nombre               | Descripción                                                        |
| -------------------- | ------------------------------------------------------------------ |
| **Color**            | Establece el color del texto del título.                           |
| **Tamaño de fuente** | Ajusta el tamaño del texto del título.                             |
| **Peso de fuente**   | Altera el grosor del texto del título.                             |
| **Estilo de fuente** | Aplica un estilo específico (cursiva, normal) al texto del título. |

### Subtítulo del encabezado

| Nombre               | Descripción                                  |
| -------------------- | -------------------------------------------- |
| **Color**            | Define el color del texto del subtítulo.     |
| **Tamaño de fuente** | Ajusta el tamaño del texto del subtítulo.    |
| **Peso de fuente**   | Controla el grosor del texto del subtítulo.  |
| **Estilo de fuente** | Establece el estilo del texto del subtítulo. |

### Icono del encabezado

| Nombre                                | Descripción                                                    |
| ------------------------------------- | -------------------------------------------------------------- |
| **Color de fondo**                    | Establece el color de fondo del icono.                         |
| **Color de primer plano**             | Cambia el color del propio icono.                              |
| **Utilidad de color de primer plano** | Ajusta el color de utilidad para dar contraste o énfasis.      |
| **Radio del borde**                   | Redondea las esquinas del icono para una apariencia más suave. |

### Contenedor de píldoras

| Nombre                                 | Descripción                                                                                         |
| -------------------------------------- | --------------------------------------------------------------------------------------------------- |
| **Color de fondo de la píldora/hover** | Establece el color de fondo de los elementos de píldora, con un color diferente al pasar el cursor. |
| **Color de texto de la píldora/hover** | Cambia el color del texto dentro de la píldora, con un color diferente al pasar el cursor.          |
| **Altura de línea de la píldora**      | Ajusta la altura de línea dentro de la píldora para la alineación del texto.                        |

### Avatar

| Nombre                          | Descripción                                                                                                                                          |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Ajuste de imagen del avatar** | Determina cómo debe ajustarse la imagen del avatar dentro de su contenedor. Las opciones incluyen 'fill', 'contain', 'cover', 'none' y 'scale-down'. |

### Botones de paginación

| Nombre                | Descripción                                                                                              |
| --------------------- | -------------------------------------------------------------------------------------------------------- |
| **Ajustes de estilo** | Personaliza la apariencia de los botones de paginación, incluyendo propiedades de color, tamaño y borde. |

### Pie de página

| Nombre               | Descripción                                    |
| -------------------- | ---------------------------------------------- |
| **Color de fondo**   | Establece el color de fondo del pie de página. |
| **Color del borde**  | Define el color del borde del pie de página.   |
| **Tamaño del borde** | Ajusta el grosor del borde.                    |
| **Estilo del borde** | Selecciona el estilo del borde.                |
| **Radio del borde**  | Redondea las esquinas del pie de página.       |
| {% endtab %}         |                                                |
| {% endtabs %}        |                                                |

## Ejemplos de casos de uso

### Ejemplo 1: Lista de cuentas mejorada y contactos relacionados

{% @arcade/embed flowId="sxcJn4NliMFN6qTRk5Mi" url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" %}

Ofrece a tus socios una forma potente e intuitiva de explorar los datos de las cuentas, con búsqueda en línea, filtrado y un panel de contactos en vivo que se actualiza a medida que navegan.

***

#### **Lo que lograrás**

* **Lista de cuentas buscable y filtrable:** Permite a los socios encontrar rápidamente cuentas por nombre o sector utilizando los controles de búsqueda y filtro integrados.
* **Registros vinculados en línea:** Haz que los nombres de las cuentas sean clicables para que los socios puedan ir directamente a las páginas de detalle del registro.
* **Panel de contactos relacionados en vivo:** Muestra una segunda tabla que se actualiza automáticamente para mostrar los contactos vinculados a la cuenta seleccionada.
* **Resultados paginados:** Mantén la interfaz limpia y con buen rendimiento limitando los registros visibles por página.

***

#### **Antes de comenzar**

* **Diseño de página de dos columnas:** Asegúrate de que tu página de Lista de cuentas en Experience Builder ya tenga un diseño de dos columnas listo para recibir ambos componentes.

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade la primera AX - Datatable a tu página**

* Arrastra un componente AX - Datatable a la columna izquierda de tu página de Lista de cuentas en Experience Builder.
  {% endstep %}

{% step %}

#### **Elige una fuente de datos**

* Selecciona **Consultar cuentas** como la fuente de datos para este componente.
  {% endstep %}

{% step %}

#### **Configura tus asignaciones de datos**

* Añade las siguientes columnas: Name, Industry, Owner.FullName y Phone.
* Habilita **Hacer enlazable** en la columna Name para que los nombres de las cuentas se conviertan en enlaces clicables.
* Establece **Industry** como campo de filtro.
* Establece **Nombre** como campo de búsqueda.
  {% endstep %}

{% step %}

#### **Configura el componente**

* Establece el **Nombre de API** en `AccountsTable`.
* Establece **Selección máxima de filas** en `1` para que solo se pueda seleccionar una cuenta a la vez.
* Habilita la paginación y establece el **Número máximo de registros** en `10`.
  {% endstep %}

{% step %}

#### **Personaliza el encabezado**

* Establece el **Título del encabezado** en `Cuentas`.
* Establece el **Icono del encabezado** en `standard:account_info`.
  {% endstep %}

{% step %}

#### **Añade la segunda AX - Datatable a tu página**

* Arrastra un segundo componente AX - Datatable a la columna derecha de la misma página.
  {% endstep %}

{% step %}

#### **Elige una fuente de datos para la tabla de contactos**

* Selecciona **Consultar contactos** como fuente de datos.
* Añade un filtro para que **AccountId** sea igual a `{{AccountsTable.selectedRecord.Id}}`, vinculando los resultados de esta tabla con la cuenta que esté seleccionada actualmente.
  {% endstep %}

{% step %}

#### **Configura tus asignaciones de datos**

* Añade las siguientes columnas: Name y Title.
  {% endstep %}

{% step %}

#### **Configura el componente**

* Establece el **Nombre de API** en `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Personaliza el encabezado**

* Establece el **Título del encabezado** en `Contactos relacionados`.
* Establece el **Icono del encabezado** en `standard:contact`.
  {% endstep %}

{% step %}

#### **Previsualiza tu página**

* Haz clic en Previsualizar en Experience Builder, selecciona una fila de cuenta y confirma que la tabla Contactos relacionados se actualiza dinámicamente para reflejar el registro seleccionado.
  {% endstep %}
  {% endstepper %}

***

#### **Enlaces**

{% content-ref url="../tutoriales/componentes-reactivos/tablas-de-datos-vinculadas" %}
[tablas-de-datos-vinculadas](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/componentes-reactivos/tablas-de-datos-vinculadas)
{% endcontent-ref %}

***

### Ejemplo 2: Oportunidades relacionadas en una página de cuenta

{% @arcade/embed flowId="tZa89LmaWt8n5CoQhwB8" url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" %}

Ofrece a los usuarios de ventas una vista rápida de cada oportunidad vinculada a una cuenta, justo donde la necesitan, sin salir nunca de la página del registro.

***

#### **Lo que lograrás**

* **Vista 360 del cliente más completa:** Muestra los datos clave de las oportunidades directamente en la página de Cuenta para que los usuarios de ventas obtengan la imagen completa en un solo lugar.
* **Páginas de registros completamente estructuradas:** Crea páginas densas y ricas en información que eliminan la necesidad de cambiar entre pestañas u objetos para gestionar un pipeline.

***

#### **Antes de comenzar**

* **Página de registro de cuenta con componentes existentes:** Asegúrate de que tu página de registro de Cuenta en Experience Builder ya incluya los detalles del registro, un banner y un diseño de columnas listo para alojar el nuevo componente.

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade la AX - Datatable a tu página de Cuenta**

* Arrastra un componente AX - Datatable a tu página de registro de Cuenta en Experience Builder.
  {% endstep %}

{% step %}

#### **Elige una fuente de datos**

* Selecciona **Consultar oportunidades** como la fuente de datos para este componente.
  {% endstep %}

{% step %}

#### **Configura tus asignaciones de datos**

* Añade las siguientes columnas: Name, Stage y Amount.
* Habilita **Hacer enlazable** en la columna Name para que los nombres de las oportunidades se conviertan en enlaces clicables.
  {% endstep %}

{% step %}

#### **Configura el componente**

* Establece el **Nombre de API** en `RelatedOpportunities`.
* Añade un filtro para que **AccountId** sea igual a `{!Item.id}`, limitando los resultados a la cuenta que se está viendo actualmente.
  {% endstep %}

{% step %}

#### **Personaliza el encabezado**

* Establece el **Título del encabezado** en `Oportunidades`.
* Establece el **Estilo del encabezado** en `Encabezado 2`.
* Establece el **Icono del encabezado** en `standard:opportunity`.
  {% endstep %}

{% step %}

#### **Previsualiza tu página**

* Haz clic en Previsualizar en Experience Builder y navega a un registro de Cuenta para confirmar que solo las oportunidades relacionadas con esa cuenta aparecen en la tabla.
  {% endstep %}
  {% endstepper %}