TABLE
Tabla con orden, paginacion y seleccion.
En esta página
Props
Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.
| Prop | Tipo | Requerido | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|---|
| columns | arreglo de objeto | No | — | — | Columnas. |
| data | cualquiera | No | — | — | Filas (arreglo de objetos). |
| rows | cualquiera | No | — | — | Alias de data. |
| rowKey | nombre | No | — | — | Clave unica de fila (por defecto el indice). |
| selectable | enum | No | "none""single""multiple" | "none" | Seleccion de filas. |
| bind | nombre | No | — | — | Clave de state con las claves seleccionadas. |
| pageSize | numero | No | 0 … 200 | 0 | Filas por pagina (0 = sin paginar). |
| density | enum | No | "compact""comfortable""spacious" | "comfortable" | Altura de fila. |
| emptyText | texto | No | — | — | Texto si no hay filas. |
| loading | booleano | No | truefalse | — | Muestra esqueleto. |
| actions | arreglo de objeto | No | — | — | Acciones por fila. |
| onRowClick | accion(es)acción | No | — | — | Accion al pulsar una fila (recibe row). |
| onSelect | accion(es)acción | No | — | — | Accion al cambiar la seleccion (recibe value). |
| caption | texto | No | — | — | Titulo accesible de la tabla. |
| searchable | booleano | No | truefalse | — | Caja de busqueda que filtra por cualquier columna. |
| searchPlaceholder | texto | No | — | — | Texto de ejemplo de la busqueda. |
| defaultSort | objeto | No | — | — | Orden inicial. |
| bulkActions | arreglo de objeto | No | — | — | Acciones sobre las filas seleccionadas (aparecen con seleccion multiple). |
| error | texto | No | — | — | Mensaje de error de carga: sustituye a las filas. |
| onRetry | accion(es)acción | No | — | — | Accion del boton Reintentar (solo con error). |
Estructuras anidadas
columns[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| columns[].key | nombre | — | — | Clave del dato en cada fila. |
| columns[].label | texto | — | — | Cabecera. |
| columns[].sortable | booleano | truefalse | — | Permite ordenar por esta columna. |
| columns[].align | enum | "start""center""end" | — | Alineacion del texto. |
| columns[].format | enum | "text""number""date""datetime""boolean""badge""code""link""status" | "text" | Formato del valor (link: el valor es el texto y hrefKey la URL; status: punto + texto con el tono de toneMap). |
| columns[].tone | enum | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| columns[].toneMap | mapa de enum | — | — | Valor de la celda -> tono (formatos badge y status); lo no listado usa tone. |
| columns[].hrefKey | nombre | — | — | Formato link: clave de la fila con la URL (http, https, mailto, tel o ruta interna); sin ella el propio valor es la URL. |
| columns[].filter | booleano | truefalse | — | Anade un filtro desplegable con los valores distintos de la columna (hasta 30). |
| columns[].width | enum | "xs""sm""md""lg" | — | Ancho orientativo. |
actions[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| actions[].label | texto | — | — | Nombre accesible de la accion. |
| actions[].icon | icono (Lucide) | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| actions[].tone | enum | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| actions[].onClick | accion(es)acción | — | — | Accion (recibe row). |
defaultSort
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| defaultSort.key | nombre | — | — | Clave de la columna. |
| defaultSort.dir | enum | "asc""desc" | "asc" | Sentido. |
bulkActions[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| bulkActions[].label | texto | — | — | Nombre de la accion (texto del boton). |
| bulkActions[].icon | icono (Lucide) | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| bulkActions[].tone | enum | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| bulkActions[].onClick | accion(es)acción | — | — | Accion sobre la seleccion (recibe rows y value: claves seleccionadas). |
Props comunes a todos los componentes
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| hidden | booleano | truefalse | — | true oculta el componente (admite expresiones). |
| onLoad | accion(es)acción | — | — | Accion que se ejecuta una vez al montar. |
| onLoadWhen | cualquiera | — | — | Condicion: onLoad se ejecuta cuando pasa a verdadera. |
| ariaLabel | texto | — | — | Nombre accesible explicito. |
Eventos y acciones que acepta
Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.
| Evento | Recibe | Descripción |
|---|---|---|
| actions[].onClick | ${row} | Accion (recibe row). |
| onRowClick | ${row} | Accion al pulsar una fila (recibe row). |
| onSelect | ${value} | Accion al cambiar la seleccion (recibe value). |
| bulkActions[].onClick | ${rows}${value} | Accion sobre la seleccion (recibe rows y value: claves seleccionadas). |
| onRetry | — | Accion del boton Reintentar (solo con error). |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
bindEnlace bidireccional: lee y escribe
state.<clave>(admite rutas "a.b"). Vervalue/defaultValue.loadingAcepta
${state.$loading.<clave>}: CALL_BACKEND/CALL_API mantienen esa marca solos.items / data / rows / optionsLos datos suelen venir de
${state.<clave>}(rellenada porresultKeyde CALL_BACKEND) o de${context.*}.hidden / onLoadWhenCondiciones comunes:
hidden: "${!state.x}"oculta el componente;onLoadWhenejecutaonLoadal pasar a verdadera.
Simulador interactivo
Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.
Acciones relacionadas
Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.
Usadas en sus ejemplos y manifests
- TOAST
Muestra un aviso breve.
Obligatorios:
message· Campos:messagevarianttone - CALL_BACKEND
Llama a una funcion del server.js. Pone
state.$loading[key]/state.$error[key]solos, admite reintento y guarda el resultado conresultKey.Obligatorios:
function· Campos:functionargsparamskeyresultKeyretrytoastOnErroronSuccess - INSERT_CONTENT
Inserta HTML/texto en el editor del composer.
Obligatorios:
content· Campos:contentcloseOverlay
Acciones que lo controlan
- SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue - SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Tomado de bloomx-extensions/dropbox-links/manifest.json (core-dropbox-links), en mounts[1].component.children[2] (punto OVERLAY).
También se usa en: domain-metrics/manifest.json, github-issues/manifest.json, quick-notes/manifest.json.
{
"type": "TABLE",
"props": {
"caption": {
"es": "Resultados de Dropbox",
"en": "Dropbox results"
},
"columns": [
{
"key": "name",
"label": {
"es": "Nombre",
"en": "Name"
}
},
{
"key": "folder",
"label": {
"es": "Carpeta",
"en": "Folder"
}
},
{
"key": "modified",
"label": {
"es": "Modificado",
"en": "Modified"
},
"format": "datetime"
}
],
"data": "${state.dropbox.files}",
"rowKey": "path",
"pageSize": 8,
"emptyText": {
"es": "Busca un archivo para ver resultados",
"en": "Search a file to see results"
},
"loading": "${state.$loading.searchFiles}",
"actions": [
{
"label": {
"es": "Insertar enlace",
"en": "Insert link"
},
"icon": "Link",
"onClick": {
"action": "CALL_BACKEND",
"function": "createLink",
"args": {
"path": "${row.path}"
},
"key": "createLink",
"onSuccess": [
{
"action": "INSERT_CONTENT",
"content": "${result.html}",
"closeOverlay": true
},
{
"action": "TOAST",
"message": {
"es": "Enlace insertado",
"en": "Link inserted"
},
"tone": "success"
}
]
}
}
]
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "OVERLAY",
"component": {
"type": "TABLE",
"props": {
"caption": {
"es": "Resultados de Dropbox",
"en": "Dropbox results"
},
"columns": [
{
"key": "name",
"label": {
"es": "Nombre",
"en": "Name"
}
},
{
"key": "folder",
"label": {
"es": "Carpeta",
"en": "Folder"
}
},
{
"key": "modified",
"label": {
"es": "Modificado",
"en": "Modified"
},
"format": "datetime"
}
],
"data": "${state.dropbox.files}",
"rowKey": "path",
"pageSize": 8,
"emptyText": {
"es": "Busca un archivo para ver resultados",
"en": "Search a file to see results"
},
"loading": "${state.$loading.searchFiles}",
"actions": [
{
"label": {
"es": "Insertar enlace",
"en": "Insert link"
},
"icon": "Link",
"onClick": {
"action": "CALL_BACKEND",
"function": "createLink",
"args": {
"path": "${row.path}"
},
"key": "createLink",
"onSuccess": [
{
"action": "INSERT_CONTENT",
"content": "${result.html}",
"closeOverlay": true
},
{
"action": "TOAST",
"message": {
"es": "Enlace insertado",
"en": "Link inserted"
},
"tone": "success"
}
]
}
}
]
}
}
}
]
}