Tablas

Documentos > App Builder > Componentes > Tablas

En esta página se describen las funciones avanzadas que puedes utilizar para manipular componentes de tablas en tus aplicaciones App Builder.

Filtrado del lado del cliente

Cuando ya tienes una lista completa de elementos y quieres filtrarlos, existen varios métodos para hacerlo del lado del cliente.

Filtrado por columnas

En Columns (Columnas), amplía una columna y activa la opción Filterable (Filtrable) para permitir a los usuarios filtrar por las entradas de esa columna. Cuando está activada, aparece un menú desplegable en la cabecera de la tabla que permite al usuario seleccionar un elemento de esa columna para filtrar.

Filtrar por intervalo de fechas

Para permitir el filtrado por intervalo de fechas, en Appearance (Apariencia) activa la opción Has Date Range Filter (Tiene filtro de intervalo de fechas) y selecciona una ruta de datos por la que filtrar. Cuando está activada, aparece un menú desplegable en la cabecera de la tabla que permite al usuario seleccionar un periodo de tiempo por el que filtrar.

Filtrar con búsqueda

Para añadir una barra de búsqueda a tu tabla, Appearance (Apariencia) activa la opción Is Searchable (Se puede buscar).

Filtrar una tabla con un componente de entrada de texto o de búsqueda

Un uso frecuente consiste en filtrar un componente de tabla utilizando el valor de un componente de entrada de texto.

Por ejemplo, si quieres enumerar tus dashboards en una tabla que puedas filtrar utilizando un componente de entrada de texto, puedes hacer lo siguiente:

Añadir una nueva consulta utilizando el botón +.
Buscar “List dashboards” (Enumerar dashboards) y hacer clic en la acción List Dashboards. Debes asignar un nombre a tu consulta listDashboards0.
Añadir un componente de entrada de texto o de búsqueda a tu aplicación. Debes asignarle el nombre searchInput.
Añadir un componente de tabla.
Configurar la propiedad data source (fuente de datos) de la tabla con los datos filtrados por el componente de entrada de texto o búsqueda que creaste. En este ejemplo, debes configurar data source con la siguiente expresión:
```
${listDashboards0?.outputs.dashboards.filter(row => row.title.includes(searchInput.value))}
```

Puedes escribir texto en el componente de entrada de texto y las filas de la tabla se filtrarán por ese texto.

Filtrar una tabla con un componente seleccionado

Otro uso frecuente consiste en filtrar una tabla utilizando un componente seleccionado.

Por ejemplo, si quieres enumerar tus dashboards en una tabla que puedas filtrar utilizando un componente seleccionado, puedes hacer lo siguiente:

Añadir una nueva consulta utilizando el botón +.
Buscar “List dashboards” (Enumerar dashboards) y hacer clic en la acción List Dashboards. Debes asignar un nombre a tu consulta listDashboards0.
Añadir un componente seleccionadoa tu aplicación. Debes asignarle el nombre selectInput.
Añadir un componente de tabla.
Configurar la propiedad data source (fuente de datos) a tus datos filtrados por el componente seleccionado. En este ejemplo, debes configurar data source con la siguiente expresión:
```
${listDashboards0?.outputs.dashboards.filter(row => row.title.includes(selectInput.value))}
```

Puedes seleccionar un valor del componente seleccionado y las filas de la tabla se filtrarán por ese valor.

Filtrar los resultados de la consulta mediante una transformación posterior a la consulta

Si quieres filtrar los resultados de una consulta en sí, y luego utilizar esos resultados en tu tabla, realiza los siguientes pasos:

Añade una nueva consulta utilizando el botón +.
Busca “List dashboards” (Enumerar dashboards) y haz clic en la acción List Dashboards. Asigna un nombre a tu consulta listDashboards0.
Añade un componente de entrada de texto o de búsqueda a tu aplicación. Asígnale el nombre searchInput.
Añade un componente de tabla y configura su propiedad data source (fuente de datos) a la consulta que añadiste.
Amplía la sección Advanced (Avanzado) de la consulta y busca Post-query Transformation (Transformación posterior a la consulta).

Sustituya return outputs por la línea siguiente:

outputs.dashboards.filter(row => row.title.includes(searchInput.value))

Puedes escribir texto en el componente de entrada de texto y las filas de la tabla se filtrarán por ese texto.

Si necesita el resultado de la consulta original, sin transformar, puedes referenciarlo como ${listDashboards0.rawOutputs}.

Filtrado del lado del servidor

En algunos casos, es posible que quieras filtrar valores del lado del servidor y emitir nuevas solicitudes cuando el usuario introduce un valor en una entrada, como por ejemplo un componente de entrada de texto.

En este caso, puedes activar el filtrado del lado del servidor editando la consulta directamente.

Por ejemplo, en el plano del pipeline de solicitudes de extracción de GitHub, la consulta listOpenedPulls tiene una entrada que obtiene la siguiente URL:

https://api.github.com/search/issues?q=org:${organizationInput.value}+author:${userNameInput.value}+type:pr+state:open

La API de GitHub acepta parámetros de consulta para filtrar por organización, autor o tipo de solicitud de extracción. La URL de entrada de la consulta anterior contiene expresiones de plantilla para organizationInput.value, que es el valor del componente de entrada de texto “Organización”, y userNameInput.value, que es el valor del componente de entrada de texto “Nombre de usuario”. Si defines la configuración de ejecución de la consulta en automática, la consulta se actualizará automáticamente cuando cambien los valores de estas expresiones de plantilla y se actualizarán los valores de la tabla.

Mostrar un indicador de carga

Si quieres mostrar un indicador de carga en una tabla mientras se obtienen los datos, puedes configurar el valor isLoading de la tabla igual a la propiedad isLoading de la consulta. Por ejemplo:

Sigue los pasos de filtrado con una entrada de texto.
En las propiedades de tu tabla, en Appearance (Apariencia), haz clic en el </> junto a Is Loading (Se está cargando) para abrir el editor de código.
Configura el valor isLoading de la tabla con la siguiente expresión:
```
${listDashboards0.isLoading}
```

La tabla muestra un indicador de carga cuando se escribes texto nuevo en el componente de entrada de texto.

Valores dinámicos de la tabla

Puedes utilizar la propiedad data source (fuente de datos) de un componente de tabla para rellenar dinámicamente los valores de la tabla y restringir qué objetos se introducen en la tabla como columnas.

Por ejemplo, el plano del resumidor de solicitudes de extracción de GitHub utiliza una serie de consultas de GitHub para resumir una lista de solicitudes de extracción en un repositorio. La consulta utiliza la entrada de la fuente de datos para restringir la tabla a 6 columnas: title,Summary,updated_at,user,html_url y state. El código resaltado rellena dinámicamente la columna de usuario de cada solicitud de extracción con el avatar del autor y el nombre de usuario de GitHub.

${(() => {
    const summaryById = Object.fromEntries(
        summarizePulls.outputs.map(({id, summary}) => [id, summary])
    );
    return listPulls.outputs.map(result => {
        const {title, updated_at, user, state, html_url} = result;
        const updatedAt = new Date(result.updated_at);
        let summary;
        if (summarizePulls.isLoading) {
            summary = 'Summarizing';
        } else {
            summary = summaryById[result.id] ?? 'N/A';
        }
        return {
            title: `**${title}**`,
            updated_at: updatedAt.toLocaleString(),
            user: {label: user.login, src: user.avatar_url},
            summary,
            state, html_url};
    })
})()}