TABLE y COLUMN

El componente TABLE muestra registros en un formato de grilla estructurada con definiciones de columnas y soporte de paginación.

TABLE

PAGE
 └─ TABLE
     ├─ COLUMN (uno o más)
     └─ BUTTON (opcional, cero o más)

Propiedad	Tipo	Requerido	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser TABLE
name	string	Sí	—	Identificador del componente
source	string	No	name del componente	Nombre de la variable que contiene el Resultset
pagination	boolean	No	false	Habilita la paginación. Cuando es false, la tabla muestra todas las filas del Resultset sin paginar
pageSizeVar	string	No	—	Nombre de la variable que contiene el número de filas por página. Requiere pagination: true. Si no se especifica, se usa 10
offsetVar	string	No	—	Nombre de la variable donde Autobase asignará el offset calculado (páginaActual - 1) * pageSize. Requiere pagination: true
currentPageVar	string	Sí (con paginación)	—	Nombre de la variable que almacena la página actual. Requerido solo si pagination: true
totalRowsVar	string	No	—	Nombre de la variable con el total de filas. Si no se especifica, se calcula de rs.Rows.Count. Requiere pagination: true
onPageChange	string	No	—	Script Lua que se ejecuta cuando cambia la página. Requiere pagination: true
cssClass	string	No	""	Clases CSS para el elemento table
cssStyle	string	No	""	Estilos CSS para el elemento table
visible	boolean	No	true	Indica si el componente es visible
columns	collection	Sí	—	Columnas de la tabla (ver sección COLUMN)
buttons	collection	No	—	Acciones por fila (ver sección Botones)

El TABLE trabaja con un Resultset que debe estar disponible en una variable (definida por source).

Cuando pagination: true, se habilita la paginación: el usuario debe indicar la página actual (currentPageVar), el tamaño de página (pageSizeVar) y opcionalmente el total de filas (totalRowsVar) y la variable de offset (offsetVar). Cuando el usuario cambia de página, se dispara el evento onPageChange que debe actualizar tanto el Resultset en source como la variable totalRowsVar si corresponde.

Cuando pagination: false (valor por defecto), la tabla muestra todas las filas del Resultset sin paginación.

- name: customersTable
  type: TABLE
  source: customersRs
  pagination: true
  currentPageVar: customersPage
  totalRowsVar: customersTotal
  pageSizeVar: pageSize
  offsetVar: offset

  columns:
    - name: customerId
      title: ID
      field: id

    - name: customerName
      title: Cliente
      field: name

    - name: customerEmail
      title: Email
      field: email

    - name: customerPhone
      title: Teléfono
      field: phone

En el evento onPageChange, Autobase calcula automáticamente el offset (páginaActual - 1) * pageSize y lo asigna en la variable indicada en offsetVar.

Entonces se puede hacer, suponiendo que rs es la variable que contiene el Resultset referenciado en la propiedad source:

rs = sql("SELECT * FROM table LIMIT {{pageSize}} OFFSET {{offset}}")

Botones por fila

Se pueden agregar botones de acción en cada fila de la tabla usando la colección buttons. Cada botón se renderiza en una columna adicional al final.

- name: customersTable
  type: TABLE
  source: customersRs
  pagination: true
  currentPageVar: customersPage
  totalRowsVar: customersTotal
  pageSizeVar: pageSize
  offsetVar: offset

  columns:
    - name: customerName
      title: Cliente
      field: name

    - name: customerPhone
      title: Teléfono
      field: phone

  buttons:
    - name: editCustomer
      text: Editar
      icon: edit
      variant: primary
      onClick: editCustomer

    - name: deleteCustomer
      text: Eliminar
      icon: trash
      variant: danger
      onClick: deleteCustomer

Propiedades de botón

Propiedad	Tipo	Requerido	Valor predeterminado	Descripción
name	string	Sí	—	Identificador del botón
text	string	No	""	Texto del botón
icon	string	No	""	Ícono Tabler (https://tabler.io/icons)
variant	string	No	primary	Variante visual: primary, secondary, success, danger, warning, info, light, dark
style	string	No	solid	Estilo visual: solid, outline, link
size	string	No	md	Tamaño: sm, md, lg
onClick	string	Sí	—	Nombre del evento a ejecutar al hacer clic

Contexto de fila

Al hacer clic en un botón de fila se pasarán automáticamente los valores de cada campo de la fila a variables del mismo nombre que el campo. Así, en el evento onClick del botón estarán disponibles los valores de la fila clickeada en forma de variables.

Ejemplo de script para el evento editCustomer, suponiendo que había dos columnas en la tabla llamadas "id" y "name":

local customerId = {{id}}
local customerName = {{name}}

COLUMN

El componente COLUMN define la estructura y renderizado de columnas individuales dentro de un componente TABLE.

Propiedad	Tipo	Requerido	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser COLUMN
name	string	Sí	—	Identificador de la columna
field	string	Sí	—	Nombre del campo del Resultset a mostrar
title	string	No	""	Texto del encabezado de la columna
showAsCheckBox	boolean	No	—	Si es true, muestra el campo como checkbox (automático para campos Boolean)
cssClass	string	No	""	Clases CSS para las celdas (automático: text-end para números)
visible	boolean	No	true	Indica si la columna es visible