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 haberle 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 y muestra 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 tu información de contacto (por ejemplo, "Contact").
• Agrega una condición de filtro:

  • Campo: Id de cuenta (o cualquier campo que vincule los contactos con las cuentas)
  • Operador: Igual a
  • 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 coincida con el ID de la fila seleccionada en la Tabla de cuentas.
• Crea columnas agregando campos.

El resultado

• Los usuarios recorren su lista de cuentas en la Tabla de cuentas.
• Hacen clic en una cuenta.
• La Tabla de contactos se actualiza al instante para mostrar solo los contactos asociados con esa cuenta elegida.

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