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

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.