> 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-es/experience-components/ax-data-table.md). # AX - Tabla de datos ## Resumen **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. Extrae 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 Avonni Data Table es una [Componente de datos reactivo](/experience-cloud/experience-cloud-es/primeros-pasos/reactive-components.md) {% endhint %} *** ## Primeros pasos Usa este sencillo tutorial para aprender los conceptos básicos del componente Data Table y empezar a crear tus casos de uso. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} *** ## Tutoriales
Crear un botón Exportar a en la Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Configuración de la Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Mostrar archivos de Salesforce CMS en una Data Table/pages/302109335ff071e597e8d0052ad77d1673645506
*** ## Conecta tu Data Table a los datos de Salesforce ### Fuente de datos La sección de Origen de datos es donde conectas la Avonni Data Table con tus datos de Salesforce. Tienes dos opciones.
Tipo de origen de datosDescripciónCaso de uso
Origen de datos manualIntroduce manualmente los datos en la tabla de datos.Ideal para datos no dinámicos, pruebas y demostraciones.
ConsultaCrea una consulta para rellenar automáticamente la tabla con datos de Salesforce.Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño.
Colección de CMSMuestra sin problemas tus colecciones de CMS dentro de las Data Tables para actualizaciones de contenido dinámico.Crea listas de recursos o fuentes de noticias que se actualicen automáticamente.
{% 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 Das vida a tu tabla de datos en la sección Asignaciones de datos definiendo y personalizando sus columnas.
Compartición del modelo de datos con Avonni Data Table **Cumplimiento de las reglas de compartición de datos de Salesforce:** * **Respeto por 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á regida por la configuración de compartición y los permisos de usuario definidos por tu organización
#### Añadir columnas * Haz clic en el botón 'Añadir columnas' para seleccionar campos de tu origen de datos y mostrarlos como columnas en la tabla de datos.
* 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.
#### 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. * **Convertir en enlace:** Activa el enlace de los datos de la celda a otros registros o URL para una navegación rápida. * **Atributos de celda:** Personaliza la alineación y los iconos de la celda 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:** Activa el filtrado y la búsqueda por columna para una gestión eficiente de los datos. * **Oculto:** Elige ocultar ciertas columnas, útil para datos sensibles o menos relevantes. * **Ordenable:** Permite que los usuarios ordenen los datos por la columna especificada. * **Ocultar acciones predeterminadas:** Opta por ocultar las acciones predefinidas para un aspecto más limpio. * **Ajustar texto:** Activa 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 Data Table. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} *** ## Otros ajustes de configuración ### Ajustes básicos **Ocultar encabezado de la tabla** * Esta opción te permite eliminar el encabezado de la tabla para un aspecto más limpio y minimalista.
**Ocultar columnas de casillas de verificación** * Activa 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.
**Mostrar columna de número de fila** * Activa esto para mostrar una columna que enumera cada fila, lo que resulta ú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 (añadir, eliminar o funciones personalizadas) que estén directamente accesibles desde el encabezado de la tabla.
### 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 y la eficiencia del usuario.
#### Configura la interacción en el botón Configura la interacción 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í](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/navigate.md) para obtener más información.
#### 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 %} ### 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 se 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 %}
### Configuración del motor de búsqueda * **Texto de marcador:** 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 lograr una accesibilidad óptima. * **Valor predeterminado de búsqueda:** 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 marcarse como 'Buscable'. {% endhint %}

Al menos una columna debe establecerse como "Buscable" para mostrar el cuadro de búsqueda.

## Configuración {% tabs %} {% tab title="🎛️ General" %} | Nombre | Descripción | | ------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | **Ocultar encabezado de la tabla** | Alterna para ocultar el encabezado de la tabla | | **Ocultar columna de casilla de verificación** | Eliminar la columna utilizada para las casillas de selección de filas | | **Mostrar columna de número de fila** | Mostrar una columna con el número de fila | | **Desplazamiento del número de fila** | Establecer el número inicial para la numeración de filas | | **Máxima selección de filas** | Limitar el número máximo de filas que se pueden seleccionar | | **Suprimir barra inferior** | Ocultar la barra inferior, normalmente utilizada para acciones y visualización de información | | **Mostrar número de elementos seleccionados** | Mostrar el recuento de elementos seleccionados actualmente | | **Solo lectura** | Hacer que la tabla no sea interactiva, sin permitir ediciones ni selecciones | | **Permitir edición en todas las columnas** | Activar la edición para todas las columnas | | **Permitir filtro en todas las columnas** | Activar las opciones de filtrado para todas las columnas | | **Permitir ajuste de texto en todas las columnas** | Permitir el ajuste de texto en todas las columnas | | **Ocultar acciones predeterminadas** | Ocultar acciones predefinidas como editar o eliminar | | **Modo de anchos de columna** | Elige entre 'fijo' o 'automático' para el ajuste del ancho de columna | | **Ancho máximo/mínimo de columna** | Establecer límites máximos y mínimos para los anchos de columna | | **Máximo de líneas para ajuste de texto** | Definir el número máximo de líneas para el ajuste de texto en las celdas | | **Redimensionar columna desactivado** | Desactivar la capacidad de redimensionar columnas | | **Paso de redimensionado** | Establecer el incremento para el redimensionado de columnas | | **Dirección de ordenación / ordenación predeterminada** | Elige 'asc' o 'desc' para la dirección de ordenación inicial | | **Mostrar valor ordenado por** | Mostrar qué columna se está utilizando actualmente para la ordenación | | **Título/leyenda 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/desactivar acciones del encabezado** | Controla la visibilidad y la interactividad de las acciones del encabezado | | **Botones de acción visibles del encabezado** | Especifica qué botones de acción son visibles en el encabezado | | **Acciones del encabezado** | Añadir 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** | Alterna la visualización de los controles de paginación | | **Número de elementos por página** | Establece cuántos elementos mostrar por página | ### Opciones del contenedor de píldoras * Mostrar 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** | Establecer texto de marcador de posición para la entrada de búsqueda | | **Posición** | Definir la posición de la barra de búsqueda | | **Valor predeterminado de búsqueda** | Prellenar la barra de búsqueda con un valor predeterminado | | {% endtab %} | | {% tab title="🗄️ Filtrado y origen 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 'consulta' para rellenar 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 del 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 al 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 espacio interior (relleno) y exterior (margen) 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** | Modifica 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 lograr contraste o énfasis. | | **Radio del borde** | Redondea las esquinas del icono para un aspecto más suave. | ### Contenedor de píldoras | Nombre | Descripción | | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | | **Color de fondo de la píldora / al pasar el cursor** | Establece el color de fondo de los elementos de píldora, con un color diferente al pasar el cursor. | | **Color del texto de la píldora / al pasar el cursor** | 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 del objeto de la imagen del avatar** | Determina cómo debe ajustarse la imagen del avatar dentro de su contenedor. Las opciones incluyen 'rellenar', 'contener', 'cubrir', 'ninguno' y 'reducir para ajustar'. | ### Botones de paginación | Nombre | Descripción | | --------------------- | ------------------------------------------------------------------------------------------------------------------ | | **Ajustes de estilo** | Personaliza la apariencia de los botones de paginación, incluidos el color, el tamaño y las propiedades del 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 url="" flowId="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 mientras navegan. *** #### **Lo que lograrás** * **Lista de cuentas buscable y filtrable:** Permite que los socios encuentren rápidamente cuentas por nombre o sector usando los controles integrados de búsqueda y filtro. * **Registros enlazados 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 eficiente limitando los registros visibles por página. *** #### **Antes de empezar** * **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 un origen de datos** * Selecciona **Consultar cuentas** como origen de datos para este componente. {% endstep %} {% step %} #### **Establece tus asignaciones de datos** * Añade las siguientes columnas: Name, Industry, Owner.FullName y Phone. * Activar **Convertir en enlace** en la columna Name para que los nombres de las cuentas se conviertan en enlaces clicables. * Establece **Sector** como campo de filtro. * Establece **Nombre** como campo de búsqueda. {% endstep %} {% step %} #### **Configura el componente** * Establece el **Nombre de API** en `AccountsTable`. * Establece **Máxima selección de filas** en `1` para que solo se pueda seleccionar una cuenta a la vez. * Activa la paginación y establece el **Número máximo de registros** en `10`. {% endstep %} {% step %} #### **Personalizar el encabezado** * Establece el **Título del encabezado** en `Accounts`. * 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 un origen de datos para la tabla de contactos** * Selecciona **Consultar contactos** como fuente de datos. * Añade un filtro para que **AccountId** igual a `{{AccountsTable.selectedRecord.Id}}`, vinculando los resultados de esta tabla a la cuenta que esté seleccionada actualmente. {% endstep %} {% step %} #### **Establece 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 %} #### **Personalizar 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 Vista previa en Experience Builder, selecciona una fila de cuenta y confirma que la tabla de Contactos relacionados se actualiza dinámicamente para reflejar el registro seleccionado. {% endstep %} {% endstepper %} *** #### **Enlaces** {% content-ref url="/pages/084fe3a3a3ac6354db325020b470ab248e6c5d42" %} [Tablas de datos vinculadas](/experience-cloud/experience-cloud-es/tutoriales/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Ejemplo 2: oportunidades relacionadas en una página de cuenta {% @arcade/embed url="" flowId="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 la cuenta para que los usuarios de ventas tengan la الصورة completa en un solo lugar. * **Páginas de registros totalmente apiladas:** Crea páginas densas y ricas en información que eliminan la necesidad de saltar entre pestañas u objetos para gestionar un pipeline. *** #### **Antes de empezar** * **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 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 un origen de datos** * Selecciona **Consultar oportunidades** como origen de datos para este componente. {% endstep %} {% step %} #### **Establece tus asignaciones de datos** * Añade las siguientes columnas: Name, Stage y Amount. * Activar **Convertir en enlace** 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** igual a `{!Item.id}`, limitando los resultados a la cuenta que se está viendo actualmente. {% endstep %} {% step %} #### **Personalizar 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 Vista previa en Experience Builder y navega a un registro de cuenta para confirmar que solo aparezcan en la tabla las oportunidades relacionadas con esa cuenta. {% 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-es/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.