# Tablas de datos vinculadas

## Mantener las tablas sincronizadas

Imagina que tienes dos tablas en tu página:

1. **Tabla de cuentas:** Esta tabla (`accountsDatatable`) enumera todas tus cuentas de clientes.
2. **Tabla de contactos:** Esta tabla (`contactsDatatable`) enumera todas las personas de contacto de tus cuentas.

**El objetivo:** Cuando seleccionas una cuenta en la Tabla de cuentas, quieres que la Tabla de contactos se actualice automáticamente y muestre solo los contactos de *esa* cuenta.

## **Cómo lograrlo**

### **La Tabla de cuentas**

* Arrastra el componente Avonni Data Table
* Asegúrate de haber dado a esta tabla el nombre de API `accountsDatatable`.
* Configura la fuente de datos usando Query Data Source
* Selecciona el objeto Accounts
* Configura los mapeos de datos para crear columnas

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FujTcn7FaNoTNp48CLr3C%2F2024-05-28_20-33-37.png?alt=media&#x26;token=e7a9df0d-1ff1-4d52-8819-525e339db4d7" alt=""><figcaption></figcaption></figure>

### **La Tabla de contactos**

* Esta tabla también está configurada, mostrando todos tus contactos.
* Ve a la sección "Data Source" en la configuración de la tabla.
* Elige la opción "Query Data Source".
* Selecciona el objeto que contiene la información de tus contactos (p. ej., "Contact").
* Agrega una condición de filtro:
  * Campo: `Id de la cuenta` (o el campo que vincule contactos con cuentas)
  * Operador: `Igual`
  * Valor: `{{accountsDatatable.selectedRecord.Id}}`
    * Este código de expresión indica a la Tabla de contactos que muestre solo los contactos cuyo Id de cuenta coincide con el Id de la fila seleccionada en la Tabla de cuentas.
* Crea columnas agregando campos.

### **El resultado**

* Los usuarios navegan por su lista de cuentas en la Tabla de cuentas.
* Hacen clic en una cuenta.
* La Tabla de contactos se actualiza instantáneamente para mostrar solo los contactos asociados con esa cuenta seleccionada.

Esto mantiene tus tablas sincronizadas y proporciona una experiencia de usuario fluida e intuitiva.