Los componentes de tablas tienen las siguientes propiedades.
General
- Título
- Un título para la tabla. Selecciona Markdown para un formato personalizado.
Valor: cadena - Fuente de datos
- Matriz de objetos que se muestran en una tabla.
Valores: consulta, datos de demostración, componentes
Columnas
Cada columna de datos de la fuente de datos se representa aquí y tiene las siguientes propiedades:
- Etiqueta (Label)
- Texto que aparece en la parte superior de la columna.
Valor: cadena o expresión - Ruta de datos
- Ruta JSON para acceder a valores anidados en objetos y matrices de una columna determinada.
Valor: cadena o expresión - Formato
- Tipo de formato que adopta la columna.
Valores proporcionados: cadena, enlace, píldora de estado, fecha/hora, markdown, etiquetas (tags), barra de porcentaje, número, barra de puntuación, avatar. - Clasificable
- Determina si el usuario puede clasificar por la columna.
- Copiable
- Determina si el usuario puede hacer clic para copiar el contenido de la columna.
Valores proporcionados: on, off - Filtrable
- Determina si una opción de filtro está disponible para la columna.
Valores proporcionados: on, off
Algunas columnas tienen propiedades adicionales basadas en su propiedad Formato.
Paginación
- Incluye resumen
- Determina si se muestra un resumen de la paginación directamente encima de la tabla.
Valores proporcionados: on, off - Tamaño de página
- Número de filas que se muestran por página.
Valor: número o expresión que se evalúa a un número. - Recuento total
- Número total de filas que se muestran en la tabla.
Valor: número o expresión que se evalúa a un número. - Tipo
- Determina el tipo de paginación.
Valores proporcionados: lado cliente, lado servidor.
Clasificación
- Selecciona la clasificación de la tabla por columna y dirección por defecto.
- Columna
- La columna por la que se clasificará.
Valor: nombre de columna - Dirección
- La dirección para clasificar.
Valores proporcionados: ascendente, descendente
Acciones de fila
Al añadir una acción de fila se añade una columna Actions (Acciones) a la tabla, que contiene botones de acción definidos por el usuario. Las filas pueden tener múltiples acciones. Las acciones tienen las siguientes propiedades:
- Etiqueta (Label)
- Texto que se muestra en el botón de acción.
Valor: cadena o expresión - Principal
- Diseñado para llamar la atención del usuario sobre las acciones más importantes para una determinada página o flujo de trabajo.
Valores proporcionados: on, off - Sin bordes
- Elimina el borde de cualquier botón. Al pasar el cursor por encima, se rellena el fondo.
Valores proporcionados: on, off - Desactivado
- Aplica el estilo desactivado y elimina las interacciones.
Valores proporcionados: on, off - Nivel
- Controla el color del botón según su intención.
Valores proporcionados: por defecto, peligro, éxito, advertencia - Reacciones
- Las reacciones que activa el botón. Un botón puede tener varias reacciones.
Valores proporcionados: descargar archivo, abrir modal, cerrar modal, abrir panel lateral, cerrar panel lateral, abrir URL, definir estado del componente, definir valor de variable de estado, notificación Toast, activar acción, personalizado
Algunos tipos de reacciones tienen propiedades adicionales. - Función de estado
- Recuperar
Ejemplo: Consulta Eventos.
Aspecto
- Desplazable
- Determina de qué formas se puede desplazar la tabla.
Valores proporcionados: ambos, vertical - Está cargando
- Muestra un indicador de carga.
Valores proporcionados: on, off - Tiene ajuste de texto
- Determina si el texto de la celda se ajusta.
Valores proporcionados: on, off - Tiene subfilas
- Habilita subfilas para cada fila. Incluiye la propiedad
subRows en la fuente de datos.
Valores proporcionados: on, off - Se puede buscar
- Determina si se añade una barra de búsqueda a la tabla.
Valores proporcionados: on, off - Mostrar opciones de clasificación
- Añade un botón Clasificar a la tabla que ofrece a los usuarios opciones de clasificación.
Valores proporcionados: on, off - Mostrar opciones de columna
- Añade un botón Columnas a la tabla para mostrar, ocultar o reorganizar las columnas de la tabla.
Valores proporcionados: on, off - Tiene filtro de intervalo de fechas
- Añade un filtro de intervalo de fechas a la tabla.
Valores proporcionados: on, off - Es visible
- Determina si el componente es visible para el usuario final. En modo edición, todos los componentes permanecen visibles.
Valores proporcionados: on, off
Eventos
- Evento
- Valores: pageChange, tableRowClick
- Reacción
- Valores: descargar archivo, abrir modal, cerrar modal, abrir panel lateral, cerrar panel lateral, definir estado de componente, definir valor de variable de estado, notificación Toast, activar acción, personalizado
- Funciones de estado
- Recuperar
Ejemplo: Consulta Eventos. - setSelectedRow
Ejemplo:table0.setSelectedRow(0) define la propiedad selectedRow de table0 en la primera fila.table0.setSelectedRow(null) elimina la propiedad selectedRow.
- setPageIndex
Ejemplo: table0.setPageIndex(0) define la propiedad pageIndex de table0 en la primera página.
Para obtener más información sobre eventos, consulta Eventos.
Inspeccionar datos
Muestra pares de propiedades y valores en formato JSON.
Ejemplo
Para ver este componente en contexto, consulta el plano de la aplicación Explorador de métricas y Builder de monitores.
Para ver ejemplos de uso de funciones avanzadas en tablas, consulta Tablas.