Nexus – Elemento: Table

¿Qué es?

Table es un componente de tipo Data. Muestra una tabla de datos con columnas configurables. Al arrastrarlo al lienzo viene con un ejemplo precargado (columnas Name, Email, Status, con 2 filas de datos).

Propiedades

Al seleccionar Table en el lienzo, el panel derecho muestra “Properties of Table”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. tbl_4d35b0e6).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Columns (JSON): campo de código donde se definen las columnas de la tabla en formato JSON. Cada columna se compone de:

  • field: nombre del campo de datos que representa (ej. “name”).
  • header: título visible de la columna (ej. “Name”).
    Cuenta con el editor de código expandido para más comodidad.

• Data (JSON): campo de código donde se cargan los datos/filas de la tabla en formato JSON. Cada fila es un objeto con las claves correspondientes a los field definidos en Columns (ej. name, email, status).
• Row Color Field: nombre del campo de datos (dentro de cada fila en Data) que define el color de esa fila (ej. color). El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

Pestaña Style:

• Default Row Color: color por defecto de las filas (usado si no se especifica Row Color Field por fila, o como color de fallback).
• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Para agregar una nueva columna, hay que ubicarse en la última llave } del bloque anterior dentro de Columns (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[
 {
    "field": "status",
    "header": "Status"
  },
  {
    "field": "createdAt",
    "header": "Created At"
  }
]

Para agregar una nueva fila de datos, se hace lo mismo dentro de Data (JSON), asegurándose de incluir todas las claves que coincidan con los field definidos en Columns:

[
  {
    "name": "Jane Smith",
    "email": "jane@example.com",
    "status": "Inactive"
  },
  {
    "name": "Carlos Ruiz",
    "email": "carlos@example.com",
    "status": "Active"
  }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.

Con Row Color Field, si cada objeto de Data incluye una clave adicional (por ejemplo “color”: “#fee2e2”), esa fila específica toma ese color en vez del color por defecto — útil para resaltar filas según su estado (por ejemplo, en rojo las filas con status “Inactive”).